mirror of
https://github.com/anomalyco/opencode.git
synced 2026-08-17 12:58:34 -04:00
Compare commits
27 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 667e6594ce | |||
| d4e363e175 | |||
| 14c2f7cab2 | |||
| 01fbe4027e | |||
| cc53db4406 | |||
| 5e651053cc | |||
| 9d4b6c6589 | |||
| fa055143ea | |||
| 216b479f7a | |||
| 6eece351c4 | |||
| 875b28658f | |||
| 0f90793df2 | |||
| 46e832b1fd | |||
| 0e022036fb | |||
| f0ae3b9569 | |||
| 3b5837d354 | |||
| e1ff217e44 | |||
| ecda3779fa | |||
| a3e69a967b | |||
| 6359623e24 | |||
| e26473f0bc | |||
| 9b4b36dfd0 | |||
| 100487719b | |||
| 6106cb64c7 | |||
| c786ab92d3 | |||
| c400746dd5 | |||
| e3ce37899d |
@@ -81,7 +81,6 @@
|
|||||||
"@solidjs/router": "catalog:",
|
"@solidjs/router": "catalog:",
|
||||||
"@tanstack/solid-query": "5.91.4",
|
"@tanstack/solid-query": "5.91.4",
|
||||||
"@tanstack/solid-virtual": "catalog:",
|
"@tanstack/solid-virtual": "catalog:",
|
||||||
"@thisbeyond/solid-dnd": "0.7.5",
|
|
||||||
"diff": "catalog:",
|
"diff": "catalog:",
|
||||||
"effect": "catalog:",
|
"effect": "catalog:",
|
||||||
"fuzzysort": "catalog:",
|
"fuzzysort": "catalog:",
|
||||||
@@ -189,12 +188,15 @@
|
|||||||
"@types/bun": "catalog:",
|
"@types/bun": "catalog:",
|
||||||
"@typescript/native-preview": "catalog:",
|
"@typescript/native-preview": "catalog:",
|
||||||
"effect": "catalog:",
|
"effect": "catalog:",
|
||||||
|
"solid-js": "catalog:",
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"effect": "4.0.0-beta.101",
|
"effect": "4.0.0-beta.101",
|
||||||
|
"solid-js": ">=1.9.0",
|
||||||
},
|
},
|
||||||
"optionalPeers": [
|
"optionalPeers": [
|
||||||
"effect",
|
"effect",
|
||||||
|
"solid-js",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
"packages/codemode": {
|
"packages/codemode": {
|
||||||
@@ -2953,8 +2955,6 @@
|
|||||||
|
|
||||||
"@testing-library/user-event": ["@testing-library/user-event@14.6.3", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-6dBq67jT8lE+JTE8Exm02Kt6ze43hz1jdiSpSJwtTZiT1xQQ6b7nZYTTQ9njdArdU8XklOwaDp/AbT/eYSKF4g=="],
|
"@testing-library/user-event": ["@testing-library/user-event@14.6.3", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-6dBq67jT8lE+JTE8Exm02Kt6ze43hz1jdiSpSJwtTZiT1xQQ6b7nZYTTQ9njdArdU8XklOwaDp/AbT/eYSKF4g=="],
|
||||||
|
|
||||||
"@thisbeyond/solid-dnd": ["@thisbeyond/solid-dnd@0.7.5", "", { "peerDependencies": { "solid-js": "^1.5" } }, "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw=="],
|
|
||||||
|
|
||||||
"@tsconfig/bun": ["@tsconfig/bun@1.0.9", "", {}, "sha512-4M0/Ivfwcpz325z6CwSifOBZYji3DFOEpY6zEUt0+Xi2qRhzwvmqQN9XAHJh3OVvRJuAqVTLU2abdCplvp6mwQ=="],
|
"@tsconfig/bun": ["@tsconfig/bun@1.0.9", "", {}, "sha512-4M0/Ivfwcpz325z6CwSifOBZYji3DFOEpY6zEUt0+Xi2qRhzwvmqQN9XAHJh3OVvRJuAqVTLU2abdCplvp6mwQ=="],
|
||||||
|
|
||||||
"@tsconfig/node22": ["@tsconfig/node22@22.0.2", "", {}, "sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA=="],
|
"@tsconfig/node22": ["@tsconfig/node22@22.0.2", "", {}, "sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA=="],
|
||||||
|
|||||||
@@ -126,6 +126,13 @@ export async function setupTimeline(
|
|||||||
const transport = await installSseTransport<EventPayload>(page, {
|
const transport = await installSseTransport<EventPayload>(page, {
|
||||||
server,
|
server,
|
||||||
retry: input.eventRetry ?? 20,
|
retry: input.eventRetry ?? 20,
|
||||||
|
existingTools: messages.flatMap((message) =>
|
||||||
|
"parts" in message
|
||||||
|
? message.parts.flatMap((part) => (part.type === "tool" ? [part.callID] : []))
|
||||||
|
: message.type === "assistant"
|
||||||
|
? message.content.flatMap((part) => (part.type === "tool" ? [part.id] : []))
|
||||||
|
: [],
|
||||||
|
),
|
||||||
})
|
})
|
||||||
await mockOpenCodeServer(page, {
|
await mockOpenCodeServer(page, {
|
||||||
protocol: "v2",
|
protocol: "v2",
|
||||||
@@ -151,9 +158,6 @@ export async function setupTimeline(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
if (settings.newLayoutDesigns === false) {
|
|
||||||
localStorage.setItem("app-version.v1", JSON.stringify({ version: "1.17.20" }))
|
|
||||||
}
|
|
||||||
}, input.settings ?? {})
|
}, input.settings ?? {})
|
||||||
if (input.locale) {
|
if (input.locale) {
|
||||||
await page.addInitScript((locale) => {
|
await page.addInitScript((locale) => {
|
||||||
|
|||||||
@@ -48,7 +48,6 @@ benchmark.describe("performance: review pane scaling", () => {
|
|||||||
await setupTimelineBenchmark(page, {
|
await setupTimelineBenchmark(page, {
|
||||||
historyTurns: 0,
|
historyTurns: 0,
|
||||||
eventBatch: 1,
|
eventBatch: 1,
|
||||||
newLayoutDesigns: true,
|
|
||||||
})
|
})
|
||||||
await page.route("**/vcs/diff**", (route) =>
|
await page.route("**/vcs/diff**", (route) =>
|
||||||
route.fulfill({
|
route.fulfill({
|
||||||
|
|||||||
@@ -13,21 +13,8 @@ import { measureSessionSwitch, waitForStableTimeline } from "./session-tab-switc
|
|||||||
|
|
||||||
type Result = Awaited<ReturnType<typeof measureSessionSwitch>>
|
type Result = Awaited<ReturnType<typeof measureSessionSwitch>>
|
||||||
|
|
||||||
benchmark("benchmarks cold and hot session tab switching", async ({ browser, report }, testInfo) => {
|
|
||||||
benchmark.setTimeout(180_000)
|
|
||||||
const results = { cold: [] as Result[], hot: [] as Result[] }
|
|
||||||
for (const mode of ["cold", "hot"] as const) {
|
|
||||||
for (let run = 0; run < 5; run++) {
|
|
||||||
results[mode].push(
|
|
||||||
await withBenchmarkPage(browser, `session-tab-switch-${mode}-${run}`, (page) => trial(page, mode), testInfo),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
report({ results, summary: summarize(results) })
|
|
||||||
})
|
|
||||||
|
|
||||||
benchmark(
|
benchmark(
|
||||||
"benchmarks v2 session tab switching with and without the review pane",
|
"benchmarks session tab switching with and without the review pane",
|
||||||
async ({ browser, report }, testInfo) => {
|
async ({ browser, report }, testInfo) => {
|
||||||
benchmark.setTimeout(360_000)
|
benchmark.setTimeout(360_000)
|
||||||
const runs = Number(process.env.SESSION_TAB_SWITCH_RUNS ?? 5)
|
const runs = Number(process.env.SESSION_TAB_SWITCH_RUNS ?? 5)
|
||||||
@@ -41,8 +28,8 @@ benchmark(
|
|||||||
results[reviewPane][mode].push(
|
results[reviewPane][mode].push(
|
||||||
await withBenchmarkPage(
|
await withBenchmarkPage(
|
||||||
browser,
|
browser,
|
||||||
`session-tab-switch-v2-${reviewPane}-${mode}-${run}`,
|
`session-tab-switch-${reviewPane}-${mode}-${run}`,
|
||||||
(page) => trial(page, mode, { newLayoutDesigns: true, reviewPane }),
|
(page) => trial(page, mode, reviewPane),
|
||||||
testInfo,
|
testInfo,
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
@@ -53,14 +40,10 @@ benchmark(
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
async function trial(
|
async function trial(page: Page, mode: "cold" | "hot", reviewPane: "closed" | "open") {
|
||||||
page: Page,
|
const reviewDiffs = createReviewDiffs()
|
||||||
mode: "cold" | "hot",
|
|
||||||
options?: { newLayoutDesigns?: boolean; reviewPane?: "closed" | "open" },
|
|
||||||
) {
|
|
||||||
const reviewDiffs = options?.newLayoutDesigns ? createReviewDiffs() : undefined
|
|
||||||
await mockStressTimeline(page, { vcsDiff: reviewDiffs })
|
await mockStressTimeline(page, { vcsDiff: reviewDiffs })
|
||||||
if (options?.newLayoutDesigns) await installTimelineSettings(page)
|
await installTimelineSettings(page)
|
||||||
await installStressSessionTabs(page)
|
await installStressSessionTabs(page)
|
||||||
if (mode === "hot") {
|
if (mode === "hot") {
|
||||||
await page.goto(stressSessionHref(fixture.targetID))
|
await page.goto(stressSessionHref(fixture.targetID))
|
||||||
@@ -72,7 +55,7 @@ async function trial(
|
|||||||
await expectSessionTitle(page, fixture.expected.sourceTitle)
|
await expectSessionTitle(page, fixture.expected.sourceTitle)
|
||||||
}
|
}
|
||||||
await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
|
await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
|
||||||
if (options?.reviewPane === "open") {
|
if (reviewPane === "open") {
|
||||||
await openReviewPane(page)
|
await openReviewPane(page)
|
||||||
await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
|
await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
|
||||||
}
|
}
|
||||||
@@ -134,8 +117,6 @@ async function openReviewPane(page: Page) {
|
|||||||
await page.getByRole("button", { name: "Toggle review" }).click()
|
await page.getByRole("button", { name: "Toggle review" }).click()
|
||||||
const panel = page.locator("#review-panel")
|
const panel = page.locator("#review-panel")
|
||||||
await expect(panel).toBeVisible()
|
await expect(panel).toBeVisible()
|
||||||
// Text-based readiness works across review implementations; the legacy list mounts
|
|
||||||
// diff viewers lazily while V2 mounts the active preview eagerly.
|
|
||||||
await page.waitForFunction(() => {
|
await page.waitForFunction(() => {
|
||||||
const panel = document.querySelector<HTMLElement>("#review-panel")
|
const panel = document.querySelector<HTMLElement>("#review-panel")
|
||||||
const text = panel?.textContent ?? ""
|
const text = panel?.textContent ?? ""
|
||||||
|
|||||||
@@ -98,7 +98,6 @@ export async function setupTimelineBenchmark(
|
|||||||
options: {
|
options: {
|
||||||
historyTurns: number
|
historyTurns: number
|
||||||
eventBatch: number
|
eventBatch: number
|
||||||
newLayoutDesigns?: boolean
|
|
||||||
vcsDiff?: unknown[]
|
vcsDiff?: unknown[]
|
||||||
turnDiffs?: unknown[]
|
turnDiffs?: unknown[]
|
||||||
},
|
},
|
||||||
@@ -124,22 +123,18 @@ export async function setupTimelineBenchmark(
|
|||||||
events: () => events.splice(0, eventBatch),
|
events: () => events.splice(0, eventBatch),
|
||||||
eventRetry: 16,
|
eventRetry: 16,
|
||||||
})
|
})
|
||||||
await page.addInitScript(
|
await page.addInitScript(() => {
|
||||||
(input) => {
|
localStorage.setItem(
|
||||||
localStorage.setItem(
|
"settings.v3",
|
||||||
"settings.v3",
|
JSON.stringify({
|
||||||
JSON.stringify({
|
general: {
|
||||||
general: {
|
editToolPartsExpanded: true,
|
||||||
newLayoutDesigns: input.newLayoutDesigns,
|
shellToolPartsExpanded: true,
|
||||||
editToolPartsExpanded: true,
|
showReasoningSummaries: true,
|
||||||
shellToolPartsExpanded: true,
|
},
|
||||||
showReasoningSummaries: true,
|
}),
|
||||||
},
|
)
|
||||||
}),
|
})
|
||||||
)
|
|
||||||
},
|
|
||||||
{ newLayoutDesigns: options.newLayoutDesigns ?? false },
|
|
||||||
)
|
|
||||||
await page.setViewportSize({ width: 1366, height: 768 })
|
await page.setViewportSize({ width: 1366, height: 768 })
|
||||||
const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
|
const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
|
||||||
const text = page.locator(`[data-timeline-part-id="${textPartID}"]`).first()
|
const text = page.locator(`[data-timeline-part-id="${textPartID}"]`).first()
|
||||||
|
|||||||
@@ -15,7 +15,6 @@ import {
|
|||||||
} from "./session-timeline-stream-probe"
|
} from "./session-timeline-stream-probe"
|
||||||
|
|
||||||
type TimelineStreamOptions = {
|
type TimelineStreamOptions = {
|
||||||
newLayoutDesigns?: boolean
|
|
||||||
reviewDiffs?: boolean
|
reviewDiffs?: boolean
|
||||||
reviewPane?: boolean
|
reviewPane?: boolean
|
||||||
}
|
}
|
||||||
@@ -45,34 +44,27 @@ benchmark.describe("performance: session timeline streaming", () => {
|
|||||||
report(result.metrics, result.context)
|
report(result.metrics, result.context)
|
||||||
})
|
})
|
||||||
|
|
||||||
benchmark("streams assistant text in v2 with review pane closed", async ({ page, report }) => {
|
benchmark("streams assistant text with review diffs and pane closed", async ({ page, report }) => {
|
||||||
benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
|
benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
|
||||||
const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true })
|
const result = await runTimelineStreamBenchmark(page, { reviewDiffs: true })
|
||||||
report(result.metrics, result.context)
|
report(result.metrics, result.context)
|
||||||
})
|
})
|
||||||
|
|
||||||
benchmark("streams assistant text in v2 with review diffs and pane closed", async ({ page, report }) => {
|
benchmark("streams assistant text with review pane open", async ({ page, report }) => {
|
||||||
benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
|
benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
|
||||||
const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true, reviewDiffs: true })
|
const result = await runTimelineStreamBenchmark(page, { reviewPane: true })
|
||||||
report(result.metrics, result.context)
|
|
||||||
})
|
|
||||||
|
|
||||||
benchmark("streams assistant text in v2 with review pane open", async ({ page, report }) => {
|
|
||||||
benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
|
|
||||||
const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true, reviewPane: true })
|
|
||||||
report(result.metrics, result.context)
|
report(result.metrics, result.context)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
benchmark.describe("performance: review pane", () => {
|
benchmark.describe("performance: review pane", () => {
|
||||||
benchmark("loads v2 review diffs and switches active files", async ({ page, report }) => {
|
benchmark("loads review diffs and switches active files", async ({ page, report }) => {
|
||||||
benchmark.setTimeout(240_000)
|
benchmark.setTimeout(240_000)
|
||||||
const historyTurns = Number(process.env.REVIEW_PANE_HISTORY_TURNS ?? 72)
|
const historyTurns = Number(process.env.REVIEW_PANE_HISTORY_TURNS ?? 72)
|
||||||
const diffs = createReviewDiffs()
|
const diffs = createReviewDiffs()
|
||||||
const fixture = await setupTimelineBenchmark(page, {
|
const fixture = await setupTimelineBenchmark(page, {
|
||||||
historyTurns,
|
historyTurns,
|
||||||
eventBatch: 1,
|
eventBatch: 1,
|
||||||
newLayoutDesigns: true,
|
|
||||||
vcsDiff: diffs,
|
vcsDiff: diffs,
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -112,7 +104,6 @@ async function runTimelineStreamBenchmark(page: Page, options: TimelineStreamOpt
|
|||||||
const fixture = await setupTimelineBenchmark(page, {
|
const fixture = await setupTimelineBenchmark(page, {
|
||||||
historyTurns,
|
historyTurns,
|
||||||
eventBatch,
|
eventBatch,
|
||||||
newLayoutDesigns: options.newLayoutDesigns,
|
|
||||||
// Turn diffs exercise timeline data cost; the pane-open scenario serves the same
|
// Turn diffs exercise timeline data cost; the pane-open scenario serves the same
|
||||||
// diffs through the default git mode so it works across review implementations.
|
// diffs through the default git mode so it works across review implementations.
|
||||||
turnDiffs: options.reviewDiffs ? diffs : undefined,
|
turnDiffs: options.reviewDiffs ? diffs : undefined,
|
||||||
@@ -173,7 +164,6 @@ async function runTimelineStreamBenchmark(page: Page, options: TimelineStreamOpt
|
|||||||
queuedDeltas: deltas.length,
|
queuedDeltas: deltas.length,
|
||||||
historyTurns,
|
historyTurns,
|
||||||
eventBatch,
|
eventBatch,
|
||||||
newLayoutDesigns: options.newLayoutDesigns === true,
|
|
||||||
reviewPane: options.reviewPane === true ? "open" : "closed",
|
reviewPane: options.reviewPane === true ? "open" : "closed",
|
||||||
reviewDiffs: diffs?.length ?? 0,
|
reviewDiffs: diffs?.length ?? 0,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ export async function installTimelineSettings(page: Page) {
|
|||||||
"settings.v3",
|
"settings.v3",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
general: {
|
general: {
|
||||||
newLayoutDesigns: true,
|
|
||||||
editToolPartsExpanded: true,
|
editToolPartsExpanded: true,
|
||||||
shellToolPartsExpanded: true,
|
shellToolPartsExpanded: true,
|
||||||
showReasoningSummaries: true,
|
showReasoningSummaries: true,
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ test("closing the active server's last tab opens the remaining server tab", asyn
|
|||||||
await mockServers(page, requests)
|
await mockServers(page, requests)
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ serverB, sessionA, sessionB }) => {
|
({ serverB, sessionA, sessionB }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.window.browser.dat:tabs",
|
"opencode.window.browser.dat:tabs",
|
||||||
@@ -39,19 +38,12 @@ test("closing the active server's last tab opens the remaining server tab", asyn
|
|||||||
await expect(page.getByText(sessionB.title).first()).toBeVisible()
|
await expect(page.getByText(sessionB.title).first()).toBeVisible()
|
||||||
const sessionBRequests = requests.filter((url) => url.includes(`/session/${sessionB.id}`))
|
const sessionBRequests = requests.filter((url) => url.includes(`/session/${sessionB.id}`))
|
||||||
expect(sessionBRequests.every((url) => url.startsWith(serverB))).toBe(true)
|
expect(sessionBRequests.every((url) => url.startsWith(serverB))).toBe(true)
|
||||||
expect(
|
|
||||||
requests.some((request) => {
|
|
||||||
const url = new URL(request)
|
|
||||||
return url.origin === serverB && url.searchParams.get("directory") === sessionB.directory
|
|
||||||
}),
|
|
||||||
).toBe(true)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test("legacy session routes preserve an existing tab's server", async ({ page }) => {
|
test("legacy session routes preserve an existing tab's server", async ({ page }) => {
|
||||||
await mockServers(page, [])
|
await mockServers(page, [])
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ serverB, sessionB }) => {
|
({ serverB, sessionB }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.window.browser.dat:tabs",
|
"opencode.window.browser.dat:tabs",
|
||||||
|
|||||||
@@ -124,7 +124,6 @@ async function setup(page: Page) {
|
|||||||
|
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessionID }) => {
|
({ directory, server, sessionID }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -28,7 +28,6 @@ test("matches the rounded panel corners to the dark new-session background", asy
|
|||||||
})
|
})
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, draftID, server }) => {
|
({ directory, draftID, server }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem("opencode-theme-id", "oc-2")
|
localStorage.setItem("opencode-theme-id", "oc-2")
|
||||||
localStorage.setItem("opencode-color-scheme", "dark")
|
localStorage.setItem("opencode-color-scheme", "dark")
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
|
|||||||
@@ -81,10 +81,6 @@ test("expands a folder whose path has a trailing Windows separator", async ({ pa
|
|||||||
|
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessionID }) => {
|
({ directory, server, sessionID }) => {
|
||||||
localStorage.setItem(
|
|
||||||
"settings.v3",
|
|
||||||
JSON.stringify({ general: { newLayoutDesigns: true, shouldDisplayTabsToast: false } }),
|
|
||||||
)
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -32,10 +32,6 @@ test("preserves the draft when a populated command menu triggers a built-in", as
|
|||||||
],
|
],
|
||||||
pageMessages: () => ({ items: [] }),
|
pageMessages: () => ({ items: [] }),
|
||||||
})
|
})
|
||||||
await page.addInitScript(() => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
})
|
|
||||||
|
|
||||||
await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
|
await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
|
||||||
const composer = page.locator('[data-component="prompt-input-v2"]')
|
const composer = page.locator('[data-component="prompt-input-v2"]')
|
||||||
const input = composer.locator('[data-component="prompt-input"]')
|
const input = composer.locator('[data-component="prompt-input"]')
|
||||||
|
|||||||
@@ -49,10 +49,6 @@ test("shows the V2 thinking level control while relevant", async ({ page }) => {
|
|||||||
],
|
],
|
||||||
pageMessages: () => ({ items: [] }),
|
pageMessages: () => ({ items: [] }),
|
||||||
})
|
})
|
||||||
await page.addInitScript(() => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
})
|
|
||||||
|
|
||||||
await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
|
await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
|
||||||
const composer = page.locator('[data-component="prompt-input-v2"]')
|
const composer = page.locator('[data-component="prompt-input-v2"]')
|
||||||
const input = composer.locator('[data-component="prompt-input"]')
|
const input = composer.locator('[data-component="prompt-input"]')
|
||||||
|
|||||||
@@ -156,7 +156,6 @@ type PermissionResponse = {
|
|||||||
async function configureServers(page: Page, tabs: { type: "session"; server: string; sessionId: string }[] = []) {
|
async function configureServers(page: Page, tabs: { type: "session"; server: string; sessionId: string }[] = []) {
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ serverB, tabs }) => {
|
({ serverB, tabs }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
||||||
localStorage.setItem("opencode.window.browser.dat:tabs", JSON.stringify(tabs))
|
localStorage.setItem("opencode.window.browser.dat:tabs", JSON.stringify(tabs))
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ test("tab busy indicator reflects the tab server's own session status", async ({
|
|||||||
await mockServers(page)
|
await mockServers(page)
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ serverA, serverB, sessionA, sessionB }) => {
|
({ serverA, serverB, sessionA, sessionB }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.window.browser.dat:tabs",
|
"opencode.window.browser.dat:tabs",
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
import { expect, test } from "@playwright/test"
|
|
||||||
import { mockOpenCodeServer } from "../utils/mock-server"
|
|
||||||
|
|
||||||
const draftID = "draft_removed_layout_preference"
|
|
||||||
const directory = "C:/OpenCode/RemovedLayoutPreference"
|
|
||||||
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
|
|
||||||
|
|
||||||
test("ignores persisted old layout preferences when opening drafts", async ({ page }) => {
|
|
||||||
await mockOpenCodeServer(page, {
|
|
||||||
directory,
|
|
||||||
project: {
|
|
||||||
id: "proj_removed_layout_preference",
|
|
||||||
worktree: directory,
|
|
||||||
vcs: "git",
|
|
||||||
name: "removed-layout-preference",
|
|
||||||
time: { created: 1700000000000, updated: 1700000000000 },
|
|
||||||
sandboxes: [],
|
|
||||||
},
|
|
||||||
provider: { all: [], connected: [], default: {} },
|
|
||||||
sessions: [],
|
|
||||||
pageMessages: () => ({ items: [] }),
|
|
||||||
})
|
|
||||||
await page.addInitScript(
|
|
||||||
({ directory, draftID, server }) => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: false } }))
|
|
||||||
localStorage.setItem(
|
|
||||||
"opencode.window.browser.dat:tabs",
|
|
||||||
JSON.stringify([{ type: "draft", draftID, server, directory }]),
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{ directory, draftID, server },
|
|
||||||
)
|
|
||||||
|
|
||||||
await page.goto(`/new-session?draftId=${draftID}`)
|
|
||||||
|
|
||||||
await expect(page).toHaveURL(`/new-session?draftId=${draftID}`)
|
|
||||||
await expect(page.locator("body")).toHaveAttribute("data-new-layout", "")
|
|
||||||
await expect(page.getByRole("textbox", { name: "Prompt" })).toBeVisible()
|
|
||||||
})
|
|
||||||
@@ -26,9 +26,6 @@ test("clicking an image file in the v2 review pane does not blank the panel", as
|
|||||||
|
|
||||||
async function openReview(page: Page) {
|
async function openReview(page: Page) {
|
||||||
await page.setViewportSize({ width: 960, height: 900 })
|
await page.setViewportSize({ width: 960, height: 900 })
|
||||||
await page.addInitScript(() => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
})
|
|
||||||
await mockOpenCodeServer(page, {
|
await mockOpenCodeServer(page, {
|
||||||
directory,
|
directory,
|
||||||
project: {
|
project: {
|
||||||
|
|||||||
@@ -63,7 +63,6 @@ test("opens and searches project files inline", async ({ page }) => {
|
|||||||
})
|
})
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessionID }) => {
|
({ directory, server, sessionID }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -103,7 +103,6 @@ async function setup(page: Page) {
|
|||||||
)
|
)
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessions }) => {
|
({ directory, server, sessions }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -103,7 +103,6 @@ async function setup(page: Page) {
|
|||||||
|
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessions }) => {
|
({ directory, server, sessions }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -124,7 +124,6 @@ test("keeps the review tree and terminal sized when both panels are open", async
|
|||||||
)
|
)
|
||||||
await page.routeWebSocket("**/api/pty/pty_review_terminal/connect", () => undefined)
|
await page.routeWebSocket("**/api/pty/pty_review_terminal/connect", () => undefined)
|
||||||
await page.addInitScript(() => {
|
await page.addInitScript(() => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:layout",
|
"opencode.global.dat:layout",
|
||||||
JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
|
JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
|
||||||
|
|||||||
@@ -233,7 +233,4 @@ async function mockServer(
|
|||||||
forms: requests.forms,
|
forms: requests.forms,
|
||||||
sessionStatus: requests.sessionStatus,
|
sessionStatus: requests.sessionStatus,
|
||||||
})
|
})
|
||||||
await page.addInitScript(() => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -119,15 +119,11 @@ test.describe("regression: session timeline local row state", () => {
|
|||||||
await wrapper.locator('[data-slot="collapsible-trigger"]').first().click()
|
await wrapper.locator('[data-slot="collapsible-trigger"]').first().click()
|
||||||
await expectExpanded(wrapper, false)
|
await expectExpanded(wrapper, false)
|
||||||
|
|
||||||
events.push({
|
events.push(...streamedTextEvents())
|
||||||
directory,
|
|
||||||
payload: {
|
|
||||||
type: "message.part.updated",
|
|
||||||
properties: { part: streamedTextPart },
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
|
await expect(page.locator(`[data-timeline-part-id="${assistantMessageID}:text:0"]`).first()).toBeVisible({
|
||||||
|
timeout: 10_000,
|
||||||
|
})
|
||||||
|
|
||||||
expect(await readToolState(page)).toEqual({
|
expect(await readToolState(page)).toEqual({
|
||||||
expanded: false,
|
expanded: false,
|
||||||
@@ -151,15 +147,11 @@ test.describe("regression: session timeline local row state", () => {
|
|||||||
await expectAppVisible(file)
|
await expectAppVisible(file)
|
||||||
await markDiffProbe(page)
|
await markDiffProbe(page)
|
||||||
|
|
||||||
events.push({
|
events.push(...streamedTextEvents())
|
||||||
directory,
|
|
||||||
payload: {
|
|
||||||
type: "message.part.updated",
|
|
||||||
properties: { part: streamedTextPart },
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
|
await expect(page.locator(`[data-timeline-part-id="${assistantMessageID}:text:0"]`).first()).toBeVisible({
|
||||||
|
timeout: 10_000,
|
||||||
|
})
|
||||||
const siblingProbe = await readDiffProbe(page)
|
const siblingProbe = await readDiffProbe(page)
|
||||||
expect(siblingProbe).toEqual({
|
expect(siblingProbe).toEqual({
|
||||||
fileMarker: "before",
|
fileMarker: "before",
|
||||||
@@ -171,13 +163,7 @@ test.describe("regression: session timeline local row state", () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
await markDiffProbe(page)
|
await markDiffProbe(page)
|
||||||
events.push({
|
events.push(...toolEvents(editPartWithAdditions(2)))
|
||||||
directory,
|
|
||||||
payload: {
|
|
||||||
type: "message.part.updated",
|
|
||||||
properties: { part: editPartWithAdditions(2) },
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
await expect(wrapper.locator('[data-slot="diff-changes-additions"]').filter({ hasText: "+2" }).first()).toBeVisible(
|
await expect(wrapper.locator('[data-slot="diff-changes-additions"]').filter({ hasText: "+2" }).first()).toBeVisible(
|
||||||
{ timeout: 10_000 },
|
{ timeout: 10_000 },
|
||||||
@@ -293,7 +279,7 @@ async function readToolState(page: Page) {
|
|||||||
row: element.closest("[data-timeline-row]")?.getAttribute("data-timeline-row"),
|
row: element.closest("[data-timeline-row]")?.getAttribute("data-timeline-row"),
|
||||||
streamedTextVisible: !!document.querySelector(`[data-timeline-part-id="${textPartID}"]`),
|
streamedTextVisible: !!document.querySelector(`[data-timeline-part-id="${textPartID}"]`),
|
||||||
}),
|
}),
|
||||||
textPartID,
|
`${assistantMessageID}:text:0`,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -397,6 +383,39 @@ async function mockServer(page: Page, events: EventPayload[], messages = [userMe
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function streamedTextEvents(): EventPayload[] {
|
||||||
|
const data = { sessionID, assistantMessageID, ordinal: 0 }
|
||||||
|
return [
|
||||||
|
{ directory, payload: { type: "session.text.started", properties: data } },
|
||||||
|
{ directory, payload: { type: "session.text.ended", properties: { ...data, text: streamedTextPart.text } } },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function toolEvents(part: typeof editPart): EventPayload[] {
|
||||||
|
const data = { sessionID, assistantMessageID, id: part.callID }
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
directory,
|
||||||
|
payload: {
|
||||||
|
type: "session.tool.called",
|
||||||
|
properties: { ...data, input: part.state.input, executed: false },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
directory,
|
||||||
|
payload: {
|
||||||
|
type: "session.tool.success",
|
||||||
|
properties: {
|
||||||
|
...data,
|
||||||
|
content: [{ type: "text", text: part.state.output }],
|
||||||
|
metadata: part.state.metadata,
|
||||||
|
executed: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
function project() {
|
function project() {
|
||||||
return {
|
return {
|
||||||
id: projectID,
|
id: projectID,
|
||||||
|
|||||||
@@ -75,12 +75,7 @@ test.describe("regression: session timeline context group resize", () => {
|
|||||||
})
|
})
|
||||||
await startVisualProbe(page, regions)
|
await startVisualProbe(page, regions)
|
||||||
for (const [index, delay] of [120, 350, 80, 500].entries()) {
|
for (const [index, delay] of [120, 350, 80, 500].entries()) {
|
||||||
events.push({
|
const part = contextTool(
|
||||||
directory,
|
|
||||||
payload: {
|
|
||||||
type: "message.part.updated",
|
|
||||||
properties: {
|
|
||||||
part: contextTool(
|
|
||||||
contextIDs[index]!,
|
contextIDs[index]!,
|
||||||
id("msg_assistant", 10),
|
id("msg_assistant", 10),
|
||||||
["read", "glob", "grep", "list"][index]!,
|
["read", "glob", "grep", "list"][index]!,
|
||||||
@@ -90,10 +85,36 @@ test.describe("regression: session timeline context group resize", () => {
|
|||||||
{ path: directory, pattern: "Explored" },
|
{ path: directory, pattern: "Explored" },
|
||||||
{ path: "src" },
|
{ path: "src" },
|
||||||
][index]!,
|
][index]!,
|
||||||
),
|
)
|
||||||
|
events.push(
|
||||||
|
{
|
||||||
|
directory,
|
||||||
|
payload: {
|
||||||
|
type: "session.tool.called",
|
||||||
|
properties: {
|
||||||
|
sessionID,
|
||||||
|
assistantMessageID: part.messageID,
|
||||||
|
id: part.callID,
|
||||||
|
input: part.state.input,
|
||||||
|
executed: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
{
|
||||||
|
directory,
|
||||||
|
payload: {
|
||||||
|
type: "session.tool.success",
|
||||||
|
properties: {
|
||||||
|
sessionID,
|
||||||
|
assistantMessageID: part.messageID,
|
||||||
|
id: part.callID,
|
||||||
|
content: [{ type: "text", text: part.state.output }],
|
||||||
|
metadata: part.state.metadata,
|
||||||
|
executed: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
await page.waitForTimeout(delay)
|
await page.waitForTimeout(delay)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -95,16 +95,16 @@ test("moves busy through retry and recovery to final idle content", async ({ pag
|
|||||||
await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
|
await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
|
||||||
await expect(page.locator('[data-timeline-row="DiffSummary"]')).toHaveCount(0)
|
await expect(page.locator('[data-timeline-row="DiffSummary"]')).toHaveCount(0)
|
||||||
await timeline.send(status("retry"), 180)
|
await timeline.send(status("retry"), 180)
|
||||||
await expect(page.locator('[data-timeline-row="Retry"]')).toBeVisible()
|
await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
|
||||||
await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
|
|
||||||
await timeline.send(status("busy", 2), 180)
|
await timeline.send(status("busy", 2), 180)
|
||||||
await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
|
await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
|
||||||
await timeline.send(partUpdated(textPart("prt_recovered", "Recovered response")), 140)
|
await timeline.send(partUpdated(textPart("prt_recovered", "Recovered response")), 140)
|
||||||
await timeline.send(messageUpdated(completedAssistantInfo(assistant.info)), 100)
|
await timeline.send(messageUpdated(completedAssistantInfo(assistant.info)), 100)
|
||||||
await timeline.send(status("idle"), 350)
|
await timeline.send(status("idle"), 350)
|
||||||
await expect(page.locator('[data-timeline-row="Retry"]')).toHaveCount(0)
|
|
||||||
await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
|
await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
|
||||||
await expect(page.locator('[data-timeline-part-id="prt_recovered"]')).toContainText("Recovered response")
|
await expect(page.locator('[data-timeline-part-id="msg_1001_timeline_assistant:text:0"]')).toContainText(
|
||||||
|
"Recovered response",
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
function lines(count: number) {
|
function lines(count: number) {
|
||||||
|
|||||||
@@ -203,7 +203,12 @@ test("separates blocking and already-backgrounded work into two rows", async ({
|
|||||||
page.locator('[data-timeline-part-id="call_shell_backgrounded"] [data-component="text-shimmer"]'),
|
page.locator('[data-timeline-part-id="call_shell_backgrounded"] [data-component="text-shimmer"]'),
|
||||||
).toHaveAttribute("data-active", "true")
|
).toHaveAttribute("data-active", "true")
|
||||||
|
|
||||||
await timeline.send(event("session.status", { sessionID: backgroundID, status: { type: "idle" } }))
|
await timeline.transport.send({
|
||||||
|
id: "evt_background_succeeded",
|
||||||
|
created: Date.now(),
|
||||||
|
type: "session.execution.succeeded",
|
||||||
|
data: { sessionID: backgroundID },
|
||||||
|
} as never)
|
||||||
await expect(backgroundCard.locator('[data-component="session-progress-indicator-v2"]')).toHaveCount(0)
|
await expect(backgroundCard.locator('[data-component="session-progress-indicator-v2"]')).toHaveCount(0)
|
||||||
await expect(backgroundCard).toContainText("Background task (background)")
|
await expect(backgroundCard).toContainText("Background task (background)")
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -146,10 +146,7 @@ test.describe("session timeline projection", () => {
|
|||||||
parentID: "msg_2000_diff_next_user",
|
parentID: "msg_2000_diff_next_user",
|
||||||
created: 1700000011000,
|
created: 1700000011000,
|
||||||
})
|
})
|
||||||
await setupTimeline(page, {
|
await setupTimeline(page, { messages: [user, assistantMessage(), nextUser, nextAssistant] })
|
||||||
messages: [user, assistantMessage(), nextUser, nextAssistant],
|
|
||||||
settings: { newLayoutDesigns: false },
|
|
||||||
})
|
|
||||||
const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
|
const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
|
||||||
await scroller.evaluate((element) => (element.scrollTop = 0))
|
await scroller.evaluate((element) => (element.scrollTop = 0))
|
||||||
|
|
||||||
@@ -159,7 +156,6 @@ test.describe("session timeline projection", () => {
|
|||||||
{ exact: true },
|
{ exact: true },
|
||||||
),
|
),
|
||||||
).toBeVisible()
|
).toBeVisible()
|
||||||
await expect(page.locator('[data-timeline-row="CommentStrip"]')).toHaveCount(0)
|
|
||||||
await expect(page.locator('[data-timeline-row="DiffSummary"]')).toHaveCount(0)
|
await expect(page.locator('[data-timeline-row="DiffSummary"]')).toHaveCount(0)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -39,5 +39,7 @@ test("reducer-hardening: converges when idle arrives before final part and messa
|
|||||||
await timeline.send(messageUpdated(completedAssistantInfo(assistant.info)), 250)
|
await timeline.send(messageUpdated(completedAssistantInfo(assistant.info)), 250)
|
||||||
|
|
||||||
await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
|
await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
|
||||||
await expect(page.locator(`[data-timeline-part-id="${textID}"]`)).toContainText("Final after early idle")
|
await expect(page.locator('[data-timeline-part-id="msg_1001_timeline_assistant:text:1"]')).toContainText(
|
||||||
|
"Final after early idle",
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ for (const deviceScaleFactor of [1.25, 1.5]) {
|
|||||||
const shellID = "prt_shell_outline"
|
const shellID = "prt_shell_outline"
|
||||||
const timeline = await setupTimeline(page, {
|
const timeline = await setupTimeline(page, {
|
||||||
messages: [userMessage(), assistantMessage([shell(shellID, "completed", "shell output")])],
|
messages: [userMessage(), assistantMessage([shell(shellID, "completed", "shell output")])],
|
||||||
settings: { newLayoutDesigns: true, shellToolPartsExpanded: true },
|
settings: { shellToolPartsExpanded: true },
|
||||||
reducedMotion: true,
|
reducedMotion: true,
|
||||||
deviceScaleFactor,
|
deviceScaleFactor,
|
||||||
})
|
})
|
||||||
@@ -82,7 +82,7 @@ test("keeps the patch card inside a fractionally short virtual row", async ({ pa
|
|||||||
toolPart(patchID, "apply_patch", "completed", { files: [file.filePath] }, { metadata: { files: [file] } }),
|
toolPart(patchID, "apply_patch", "completed", { files: [file.filePath] }, { metadata: { files: [file] } }),
|
||||||
]),
|
]),
|
||||||
],
|
],
|
||||||
settings: { editToolPartsExpanded: true, newLayoutDesigns: true },
|
settings: { editToolPartsExpanded: true },
|
||||||
reducedMotion: true,
|
reducedMotion: true,
|
||||||
})
|
})
|
||||||
const part = page.locator(`[data-timeline-part-id="${patchID}"]`)
|
const part = page.locator(`[data-timeline-part-id="${patchID}"]`)
|
||||||
|
|||||||
@@ -83,6 +83,26 @@ test("labels all web search provider variants", async ({ page }) => {
|
|||||||
await expect(page.getByRole("button", { name: /^Web Search/ })).toBeVisible()
|
await expect(page.getByRole("button", { name: /^Web Search/ })).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test("labels completed searches with result counts", async ({ page }) => {
|
||||||
|
const glob = "prt_glob_count"
|
||||||
|
const grep = "prt_grep_count"
|
||||||
|
await setupTimeline(page, {
|
||||||
|
messages: [
|
||||||
|
userMessage(),
|
||||||
|
assistantMessage([
|
||||||
|
toolPart(glob, "glob", "completed", { path: ".", pattern: "**/*.ts" }, { metadata: { count: 1 } }),
|
||||||
|
toolPart(grep, "grep", "completed", { path: ".", pattern: "value" }, { metadata: { matches: 12 } }),
|
||||||
|
]),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
const group = page.locator(`[data-timeline-part-ids="${glob},${grep}"]`)
|
||||||
|
await group.locator('[data-slot="collapsible-trigger"]').click()
|
||||||
|
const rows = group.locator('[data-component="tool-trigger"]')
|
||||||
|
await expect(rows.nth(0)).toContainText("(1 match)")
|
||||||
|
await expect(rows.nth(1)).toContainText("(12 matches)")
|
||||||
|
})
|
||||||
|
|
||||||
test("labels V2 read tools from their path input", async ({ page }) => {
|
test("labels V2 read tools from their path input", async ({ page }) => {
|
||||||
const id = "prt_read_path"
|
const id = "prt_read_path"
|
||||||
await setupTimeline(page, {
|
await setupTimeline(page, {
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
import { expect, test, type Page } from "@playwright/test"
|
import { expect, test, type Page } from "@playwright/test"
|
||||||
import { partUpdated, setupTimeline, textPart } from "../performance/timeline-stability/fixture"
|
import { partUpdated, setupTimeline, textPart } from "../performance/timeline-stability/fixture"
|
||||||
|
|
||||||
|
const streamedTextID = (ordinal: number) => `msg_1001_timeline_assistant:text:${ordinal}`
|
||||||
|
|
||||||
test("keeps one connection open while delivering multiple events", async ({ page }) => {
|
test("keeps one connection open while delivering multiple events", async ({ page }) => {
|
||||||
const timeline = await setupTimeline(page)
|
const timeline = await setupTimeline(page)
|
||||||
|
|
||||||
const first = await timeline.transport.send(partUpdated(textPart("prt_transport_first", "first event")))
|
const first = await timeline.transport.send(partUpdated(textPart("prt_transport_first", "first event")))
|
||||||
const second = await timeline.transport.send(partUpdated(textPart("prt_transport_second", "second event")))
|
const second = await timeline.transport.send(partUpdated(textPart("prt_transport_second", "second event")))
|
||||||
|
|
||||||
await timeline.waitForPart("prt_transport_first")
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
await timeline.waitForPart("prt_transport_second")
|
await timeline.waitForPart(streamedTextID(1))
|
||||||
expect(first.connectionID).toBe(second.connectionID)
|
expect(first.connectionID).toBe(second.connectionID)
|
||||||
await expect.poll(async () => (await timeline.transport.connections()).length).toBe(1)
|
await expect.poll(async () => (await timeline.transport.connections()).length).toBe(1)
|
||||||
expect(await timeline.transport.acknowledgements()).toHaveLength(2)
|
expect(await timeline.transport.acknowledgements()).toHaveLength(2)
|
||||||
@@ -21,8 +23,8 @@ test("delivers a burst from one stream chunk", async ({ page }) => {
|
|||||||
partUpdated(textPart("prt_transport_burst_b", "burst b")),
|
partUpdated(textPart("prt_transport_burst_b", "burst b")),
|
||||||
])
|
])
|
||||||
|
|
||||||
await timeline.waitForPart("prt_transport_burst_a")
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
await timeline.waitForPart("prt_transport_burst_b")
|
await timeline.waitForPart(streamedTextID(1))
|
||||||
expect(acknowledgements.map((item) => item.chunkCount)).toEqual([1, 1])
|
expect(acknowledgements.map((item) => item.chunkCount)).toEqual([1, 1])
|
||||||
expect(new Set(acknowledgements.map((item) => item.deliveryID)).size).toBe(2)
|
expect(new Set(acknowledgements.map((item) => item.deliveryID)).size).toBe(2)
|
||||||
})
|
})
|
||||||
@@ -36,8 +38,8 @@ test("parses split JSON and a split multibyte code point", async ({ page }) => {
|
|||||||
|
|
||||||
const acknowledgement = await timeline.transport.split(payload, [9, multibyte + 1, multibyte + 2])
|
const acknowledgement = await timeline.transport.split(payload, [9, multibyte + 1, multibyte + 2])
|
||||||
|
|
||||||
await timeline.waitForPart("prt_transport_split")
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
await expect(page.locator('[data-timeline-part-id="prt_transport_split"]')).toContainText(
|
await expect(page.locator(`[data-timeline-part-id="${streamedTextID(0)}"]`)).toContainText(
|
||||||
"split snowman \u2603\u2603\u2603",
|
"split snowman \u2603\u2603\u2603",
|
||||||
)
|
)
|
||||||
expect(acknowledgement.chunkCount).toBe(4)
|
expect(acknowledgement.chunkCount).toBe(4)
|
||||||
@@ -45,10 +47,9 @@ test("parses split JSON and a split multibyte code point", async ({ page }) => {
|
|||||||
|
|
||||||
test("delivers server heartbeat without mutating the timeline", async ({ page }) => {
|
test("delivers server heartbeat without mutating the timeline", async ({ page }) => {
|
||||||
const timeline = await setupTimeline(page)
|
const timeline = await setupTimeline(page)
|
||||||
const partID = "prt_transport_heartbeat_sentinel"
|
const sentinel = await timeline.transport.send(partUpdated(textPart("prt_transport_heartbeat_sentinel", "heartbeat sentinel")))
|
||||||
const sentinel = await timeline.transport.send(partUpdated(textPart(partID, "heartbeat sentinel")))
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
await timeline.waitForPart(partID)
|
await expect(page.locator(`[data-timeline-part-id="${streamedTextID(0)}"] [data-component="markdown"]`)).toHaveAttribute(
|
||||||
await expect(page.locator(`[data-timeline-part-id="${partID}"] [data-component="markdown"]`)).toHaveAttribute(
|
|
||||||
"data-markdown-ready",
|
"data-markdown-ready",
|
||||||
"",
|
"",
|
||||||
)
|
)
|
||||||
@@ -68,7 +69,7 @@ test("reconnects after a clean close", async ({ page }) => {
|
|||||||
const second = await timeline.transport.waitForConnection({ after: first.id })
|
const second = await timeline.transport.waitForConnection({ after: first.id })
|
||||||
await timeline.transport.send(partUpdated(textPart("prt_transport_close", "after close")))
|
await timeline.transport.send(partUpdated(textPart("prt_transport_close", "after close")))
|
||||||
|
|
||||||
await timeline.waitForPart("prt_transport_close")
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
expect(second.id).toBeGreaterThan(first.id)
|
expect(second.id).toBeGreaterThan(first.id)
|
||||||
expect((await timeline.transport.connections())[0]?.endedBy).toBe("close")
|
expect((await timeline.transport.connections())[0]?.endedBy).toBe("close")
|
||||||
})
|
})
|
||||||
@@ -81,7 +82,7 @@ test("reconnects after a stream error", async ({ page }) => {
|
|||||||
const second = await timeline.transport.waitForConnection({ after: first.id })
|
const second = await timeline.transport.waitForConnection({ after: first.id })
|
||||||
await timeline.transport.send(partUpdated(textPart("prt_transport_error", "after error")))
|
await timeline.transport.send(partUpdated(textPart("prt_transport_error", "after error")))
|
||||||
|
|
||||||
await timeline.waitForPart("prt_transport_error")
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
await expect.poll(async () => (await timeline.transport.connections()).length).toBe(2)
|
await expect.poll(async () => (await timeline.transport.connections()).length).toBe(2)
|
||||||
expect(second.id).toBeGreaterThan(first.id)
|
expect(second.id).toBeGreaterThan(first.id)
|
||||||
expect((await timeline.transport.connections())[0]?.endedBy).toBe("error")
|
expect((await timeline.transport.connections())[0]?.endedBy).toBe("error")
|
||||||
@@ -92,7 +93,7 @@ test("does not request replay when reconnecting the volatile V2 event stream", a
|
|||||||
const first = await timeline.transport.send(partUpdated(textPart("prt_transport_id", "event with id")), {
|
const first = await timeline.transport.send(partUpdated(textPart("prt_transport_id", "event with id")), {
|
||||||
id: "timeline-event-7",
|
id: "timeline-event-7",
|
||||||
})
|
})
|
||||||
await timeline.waitForPart("prt_transport_id")
|
await timeline.waitForPart(streamedTextID(0))
|
||||||
|
|
||||||
await timeline.transport.error("retry with event id")
|
await timeline.transport.error("retry with event id")
|
||||||
const connection = await timeline.transport.waitForConnection({ after: first.connectionID })
|
const connection = await timeline.transport.waitForConnection({ after: first.connectionID })
|
||||||
|
|||||||
@@ -1,169 +0,0 @@
|
|||||||
import { base64Encode } from "@opencode-ai/core/util/encode"
|
|
||||||
import { expect, test, type Page } from "@playwright/test"
|
|
||||||
import { mockOpenCodeServer } from "../utils/mock-server"
|
|
||||||
import { expectSessionTitle } from "../utils/waits"
|
|
||||||
|
|
||||||
const directory = "C:/OpenCode/TodoDockNavigation"
|
|
||||||
const projectID = "proj_todo_dock_navigation"
|
|
||||||
const sourceID = "ses_todo_dock_source"
|
|
||||||
const otherID = "ses_todo_dock_other"
|
|
||||||
const sourceTitle = "Todo dock animation"
|
|
||||||
const otherTitle = "Separate session"
|
|
||||||
|
|
||||||
const activeTodos = [
|
|
||||||
{ id: "todo-1", content: "Receive todos in the active session", status: "completed", priority: "high" },
|
|
||||||
{ id: "todo-2", content: "Keep the dock visible across tabs", status: "completed", priority: "high" },
|
|
||||||
{ id: "todo-3", content: "Close after the final todo", status: "in_progress", priority: "high" },
|
|
||||||
]
|
|
||||||
|
|
||||||
type EventPayload = {
|
|
||||||
directory: string
|
|
||||||
payload: Record<string, unknown>
|
|
||||||
}
|
|
||||||
|
|
||||||
test.use({ viewport: { width: 1440, height: 900 } })
|
|
||||||
|
|
||||||
test("animates todo opening without replaying it across session tabs", async ({ page }) => {
|
|
||||||
test.setTimeout(90_000)
|
|
||||||
const events: EventPayload[] = []
|
|
||||||
const todos: Record<string, typeof activeTodos> = { [sourceID]: [], [otherID]: [] }
|
|
||||||
const sessionStatus: Record<string, { type: "busy" | "idle" }> = {}
|
|
||||||
|
|
||||||
await mockOpenCodeServer(page, {
|
|
||||||
directory,
|
|
||||||
project: {
|
|
||||||
id: projectID,
|
|
||||||
worktree: directory,
|
|
||||||
vcs: "git",
|
|
||||||
name: "todo-dock-navigation",
|
|
||||||
time: { created: 1700000000000, updated: 1700000000000 },
|
|
||||||
sandboxes: [],
|
|
||||||
},
|
|
||||||
provider: {
|
|
||||||
all: [
|
|
||||||
{
|
|
||||||
id: "opencode",
|
|
||||||
name: "OpenCode",
|
|
||||||
models: {
|
|
||||||
"claude-opus-4-6": {
|
|
||||||
id: "claude-opus-4-6",
|
|
||||||
name: "Claude Opus 4.6",
|
|
||||||
limit: { context: 200_000 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
connected: ["opencode"],
|
|
||||||
default: { providerID: "opencode", modelID: "claude-opus-4-6" },
|
|
||||||
},
|
|
||||||
sessions: [session(sourceID, sourceTitle, 1700000000000), session(otherID, otherTitle, 1700000001000)],
|
|
||||||
pageMessages: () => ({ items: [] }),
|
|
||||||
events: () => events.splice(0, 1),
|
|
||||||
eventRetry: 16,
|
|
||||||
sessionStatus: () => sessionStatus,
|
|
||||||
todos: (sessionID) => todos[sessionID] ?? [],
|
|
||||||
})
|
|
||||||
await configurePage(page)
|
|
||||||
|
|
||||||
await page.goto(sessionHref(sourceID))
|
|
||||||
await expectSessionTitle(page, sourceTitle)
|
|
||||||
const dock = page.locator('[data-component="session-todo-dock"]')
|
|
||||||
await expect(dock).toHaveCount(0)
|
|
||||||
|
|
||||||
sessionStatus[sourceID] = { type: "busy" }
|
|
||||||
events.push(statusEvent(sourceID, "busy"))
|
|
||||||
await expect(page.getByRole("button", { name: "Stop" })).toBeVisible()
|
|
||||||
|
|
||||||
await page.waitForTimeout(700)
|
|
||||||
const opening = sampleDock(page, 1_000)
|
|
||||||
todos[sourceID] = activeTodos
|
|
||||||
events.push(todoEvent(sourceID, activeTodos))
|
|
||||||
await expect(dock).toBeVisible()
|
|
||||||
await expect(dock.locator('[data-state="in_progress"]')).toHaveCount(1)
|
|
||||||
expect((await opening).some((sample) => sample.opacity > 0.05 && sample.opacity < 0.95)).toBe(true)
|
|
||||||
|
|
||||||
await switchSession(page, otherID, otherTitle)
|
|
||||||
await expect(dock).toHaveCount(0)
|
|
||||||
|
|
||||||
await switchSession(page, sourceID, sourceTitle)
|
|
||||||
await expect(dock).toHaveCount(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
function session(id: string, title: string, created: number) {
|
|
||||||
return {
|
|
||||||
id,
|
|
||||||
slug: id,
|
|
||||||
projectID,
|
|
||||||
directory,
|
|
||||||
title,
|
|
||||||
version: "dev",
|
|
||||||
time: { created, updated: created },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function statusEvent(sessionID: string, type: "busy" | "idle"): EventPayload {
|
|
||||||
return {
|
|
||||||
directory,
|
|
||||||
payload: { type: "session.status", properties: { sessionID, status: { type } } },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function todoEvent(sessionID: string, next: typeof activeTodos): EventPayload {
|
|
||||||
return {
|
|
||||||
directory,
|
|
||||||
payload: { type: "todo.updated", properties: { sessionID, todos: next } },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function configurePage(page: Page) {
|
|
||||||
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
|
|
||||||
await page.addInitScript(
|
|
||||||
({ directory, dirBase64, server, sessionIDs }) => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
|
||||||
"opencode.global.dat:server",
|
|
||||||
JSON.stringify({
|
|
||||||
projects: { local: [{ worktree: directory, expanded: true }] },
|
|
||||||
lastProject: { local: directory },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
localStorage.setItem(
|
|
||||||
"opencode.window.browser.dat:tabs",
|
|
||||||
JSON.stringify(sessionIDs.map((sessionId) => ({ type: "session", server, dirBase64, sessionId }))),
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{ directory, dirBase64: base64Encode(directory), server, sessionIDs: [sourceID, otherID] },
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function sessionHref(sessionID: string) {
|
|
||||||
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
|
|
||||||
return `/server/${base64Encode(server)}/session/${sessionID}`
|
|
||||||
}
|
|
||||||
|
|
||||||
async function switchSession(page: Page, sessionID: string, title: string) {
|
|
||||||
const href = sessionHref(sessionID)
|
|
||||||
const tab = page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`).first()
|
|
||||||
await expect(tab).toBeVisible()
|
|
||||||
await tab.click()
|
|
||||||
await expectSessionTitle(page, title)
|
|
||||||
}
|
|
||||||
|
|
||||||
function sampleDock(page: Page, duration: number) {
|
|
||||||
return page.evaluate(async (duration) => {
|
|
||||||
const samples: { present: boolean; height: number; opacity: number }[] = []
|
|
||||||
const start = performance.now()
|
|
||||||
while (performance.now() - start < duration) {
|
|
||||||
const dock = document.querySelector<HTMLElement>('[data-component="session-todo-dock"]')
|
|
||||||
const clip = dock?.parentElement?.parentElement
|
|
||||||
const label = dock?.querySelector<HTMLElement>('[data-action="session-todo-toggle"] span[aria-label]')
|
|
||||||
samples.push({
|
|
||||||
present: !!dock,
|
|
||||||
height: clip?.getBoundingClientRect().height ?? 0,
|
|
||||||
opacity: label ? Number.parseFloat(getComputedStyle(label).opacity) : 0,
|
|
||||||
})
|
|
||||||
await new Promise(requestAnimationFrame)
|
|
||||||
}
|
|
||||||
return samples
|
|
||||||
}, duration)
|
|
||||||
}
|
|
||||||
@@ -27,7 +27,7 @@ test("navigates to a subagent child session missing from the session list", asyn
|
|||||||
await expect(titlebarRight.getByRole("button", { name: "Toggle review" })).toHaveCount(1)
|
await expect(titlebarRight.getByRole("button", { name: "Toggle review" })).toHaveCount(1)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("keeps the parent visible while child lineage resolves", async ({ page }) => {
|
test("keeps the parent visible while the child session resolves", async ({ page }) => {
|
||||||
await setup(page)
|
await setup(page)
|
||||||
const requested = Promise.withResolvers<void>()
|
const requested = Promise.withResolvers<void>()
|
||||||
const release = Promise.withResolvers<void>()
|
const release = Promise.withResolvers<void>()
|
||||||
@@ -59,7 +59,7 @@ test("shows the not found fallback when the viewed session is deleted", async ({
|
|||||||
|
|
||||||
events.push({
|
events.push({
|
||||||
directory,
|
directory,
|
||||||
payload: { type: "session.deleted", properties: { info: childSession() } },
|
payload: { type: "session.deleted", properties: { sessionID: childID } },
|
||||||
})
|
})
|
||||||
|
|
||||||
await expect(page.getByText("This session cannot be found")).toBeVisible()
|
await expect(page.getByText("This session cannot be found")).toBeVisible()
|
||||||
@@ -207,7 +207,6 @@ async function configurePage(page: Page) {
|
|||||||
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
|
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessionId }) => {
|
({ directory, server, sessionId }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ test("pressing mouse down on a tab navigates before mouse up", async ({ page })
|
|||||||
await mockServer(page)
|
await mockServer(page)
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ server, sessionA, sessionB }) => {
|
({ server, sessionA, sessionB }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.window.browser.dat:tabs",
|
"opencode.window.browser.dat:tabs",
|
||||||
JSON.stringify([
|
JSON.stringify([
|
||||||
@@ -46,7 +45,6 @@ test("keyboard navigation follows the visible tab order", async ({ page }) => {
|
|||||||
await mockServer(page)
|
await mockServer(page)
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ server, sessionA, unresolved, sessionC }) => {
|
({ server, sessionA, unresolved, sessionC }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.window.browser.dat:tabs",
|
"opencode.window.browser.dat:tabs",
|
||||||
JSON.stringify([
|
JSON.stringify([
|
||||||
|
|||||||
@@ -71,9 +71,6 @@ test.beforeEach(async ({ page }) => {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
await page.routeWebSocket(new RegExp(`/api/pty/${ptyID}/connect`), () => undefined)
|
await page.routeWebSocket(new RegExp(`/api/pty/${ptyID}/connect`), () => undefined)
|
||||||
await page.addInitScript(() => {
|
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test("routes typing to the composer unless the open terminal is focused", async ({ page }) => {
|
test("routes typing to the composer unless the open terminal is focused", async ({ page }) => {
|
||||||
|
|||||||
@@ -121,7 +121,6 @@ async function setup(page: Page) {
|
|||||||
|
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ directory, server, sessions }) => {
|
({ directory, server, sessions }) => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:server",
|
"opencode.global.dat:server",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
@@ -53,7 +53,6 @@ test("creates a session in a new project and selects its model", async ({ page }
|
|||||||
findFiles: () => ["NewProject"],
|
findFiles: () => ["NewProject"],
|
||||||
})
|
})
|
||||||
await page.addInitScript(() => {
|
await page.addInitScript(() => {
|
||||||
localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
|
|
||||||
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ projects: { local: [] } }))
|
localStorage.setItem("opencode.global.dat:server", JSON.stringify({ projects: { local: [] } }))
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"opencode.global.dat:model",
|
"opencode.global.dat:model",
|
||||||
|
|||||||
@@ -29,7 +29,6 @@ export interface MockServerConfig {
|
|||||||
onMessage?: (input: { sessionID: string; messageID: string }) => void
|
onMessage?: (input: { sessionID: string; messageID: string }) => void
|
||||||
events?: () => unknown[]
|
events?: () => unknown[]
|
||||||
eventRetry?: number
|
eventRetry?: number
|
||||||
todos?: (sessionID: string) => unknown[]
|
|
||||||
permissions?: unknown[] | (() => unknown[])
|
permissions?: unknown[] | (() => unknown[])
|
||||||
questions?: unknown[] | (() => unknown[])
|
questions?: unknown[] | (() => unknown[])
|
||||||
forms?: unknown[] | (() => unknown[])
|
forms?: unknown[] | (() => unknown[])
|
||||||
@@ -303,6 +302,16 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
|
|||||||
currentPermission,
|
currentPermission,
|
||||||
),
|
),
|
||||||
})
|
})
|
||||||
|
const sessionPermissions = path.match(/^\/api\/session\/([^/]+)\/permission$/)?.[1]
|
||||||
|
if (sessionPermissions)
|
||||||
|
return json(
|
||||||
|
route,
|
||||||
|
{
|
||||||
|
data: (typeof config.permissions === "function" ? config.permissions() : (config.permissions ?? []))
|
||||||
|
.map(currentPermission)
|
||||||
|
.filter((permission) => permission.sessionID === sessionPermissions),
|
||||||
|
},
|
||||||
|
)
|
||||||
if (path === "/api/question/request")
|
if (path === "/api/question/request")
|
||||||
return json(route, {
|
return json(route, {
|
||||||
location: location(config),
|
location: location(config),
|
||||||
@@ -466,8 +475,6 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
|
|||||||
return json(route, message)
|
return json(route, message)
|
||||||
}
|
}
|
||||||
|
|
||||||
const todoMatch = path.match(/^\/session\/([^/]+)\/todo$/)
|
|
||||||
if (todoMatch) return json(route, config.todos?.(todoMatch[1]!) ?? [])
|
|
||||||
if (/^\/session\/[^/]+\/(children|diff)$/.test(path)) return json(route, [])
|
if (/^\/session\/[^/]+\/(children|diff)$/.test(path)) return json(route, [])
|
||||||
|
|
||||||
const currentMessagesMatch = path.match(/^\/api\/session\/([^/]+)\/message$/)
|
const currentMessagesMatch = path.match(/^\/api\/session\/([^/]+)\/message$/)
|
||||||
|
|||||||
@@ -57,11 +57,11 @@ type BrowserTransport = Window & {
|
|||||||
|
|
||||||
export async function installSseTransport<T>(
|
export async function installSseTransport<T>(
|
||||||
page: Page,
|
page: Page,
|
||||||
options: { server: string; retry?: number },
|
options: { server: string; retry?: number; existingTools?: readonly string[] },
|
||||||
): Promise<SseTransport<T>> {
|
): Promise<SseTransport<T>> {
|
||||||
const server = new URL(options.server).origin
|
const server = new URL(options.server).origin
|
||||||
await page.addInitScript(
|
await page.addInitScript(
|
||||||
({ server, retry }) => {
|
({ server, retry, existingTools }) => {
|
||||||
type Connection = SseConnectionRecord & { controller: ReadableStreamDefaultController<Uint8Array> }
|
type Connection = SseConnectionRecord & { controller: ReadableStreamDefaultController<Uint8Array> }
|
||||||
type ProbeWindow = Window & {
|
type ProbeWindow = Window & {
|
||||||
__visualStabilityProbe?: { startedAt: number; markers: { at: number; label: string }[] }
|
__visualStabilityProbe?: { startedAt: number; markers: { at: number; label: string }[] }
|
||||||
@@ -72,6 +72,9 @@ export async function installSseTransport<T>(
|
|||||||
const encoder = new TextEncoder()
|
const encoder = new TextEncoder()
|
||||||
let nextConnectionID = 0
|
let nextConnectionID = 0
|
||||||
let nextDeliveryID = 0
|
let nextDeliveryID = 0
|
||||||
|
const textOrdinals = new Map<string, number>()
|
||||||
|
const reasoningOrdinals = new Map<string, number>()
|
||||||
|
const startedTools = new Set(existingTools)
|
||||||
|
|
||||||
const current = () => connections.findLast((connection) => connection.endedAt === undefined)
|
const current = () => connections.findLast((connection) => connection.endedAt === undefined)
|
||||||
const chunks = (bytes: Uint8Array, cuts?: readonly number[]) => {
|
const chunks = (bytes: Uint8Array, cuts?: readonly number[]) => {
|
||||||
@@ -93,20 +96,169 @@ export async function installSseTransport<T>(
|
|||||||
eventOptions.retry === undefined ? "" : `retry: ${eventOptions.retry}\n`,
|
eventOptions.retry === undefined ? "" : `retry: ${eventOptions.retry}\n`,
|
||||||
`data: ${JSON.stringify(payload)}\n\n`,
|
`data: ${JSON.stringify(payload)}\n\n`,
|
||||||
].join("")
|
].join("")
|
||||||
const currentEvent = (input: unknown) => {
|
const currentEvents = (input: unknown) => {
|
||||||
if (!input || typeof input !== "object" || !("payload" in input)) return input
|
if (!input || typeof input !== "object" || !("payload" in input)) return [input]
|
||||||
const envelope = input as { directory?: string; payload?: unknown }
|
const envelope = input as { directory?: string; payload?: unknown }
|
||||||
if (!envelope.payload || typeof envelope.payload !== "object") return input
|
if (!envelope.payload || typeof envelope.payload !== "object") return [input]
|
||||||
const payload = envelope.payload as { id?: string; type?: string; properties?: unknown }
|
const payload = envelope.payload as { id?: string; type?: string; properties?: unknown }
|
||||||
if (!payload.type) return input
|
if (!payload.type) return [input]
|
||||||
return {
|
const properties = (payload.properties ?? {}) as Record<string, unknown>
|
||||||
id: payload.id ?? `evt_mock_${Date.now()}`,
|
const base = {
|
||||||
created: Date.now(),
|
created: Date.now(),
|
||||||
type: payload.type,
|
location: envelope.directory && envelope.directory !== "global" ? { directory: envelope.directory } : undefined,
|
||||||
data: payload.properties ?? {},
|
|
||||||
location:
|
|
||||||
envelope.directory && envelope.directory !== "global" ? { directory: envelope.directory } : undefined,
|
|
||||||
}
|
}
|
||||||
|
const events = (items: { type: string; data: Record<string, unknown> }[]) =>
|
||||||
|
items.map((item, index) => ({
|
||||||
|
...base,
|
||||||
|
id: `${payload.id ?? `evt_mock_${Date.now()}`}${index ? `_${index}` : ""}`,
|
||||||
|
...item,
|
||||||
|
}))
|
||||||
|
if (payload.type === "session.status") {
|
||||||
|
const status = properties.status as { type?: string; attempt?: number; message?: string; next?: number }
|
||||||
|
if (status.type === "busy")
|
||||||
|
return events([{ type: "session.execution.started", data: { sessionID: properties.sessionID } }])
|
||||||
|
if (status.type === "retry")
|
||||||
|
return events([
|
||||||
|
{
|
||||||
|
type: "session.retry.scheduled",
|
||||||
|
data: {
|
||||||
|
sessionID: properties.sessionID,
|
||||||
|
assistantMessageID: "msg_1001_timeline_assistant",
|
||||||
|
attempt: status.attempt ?? 1,
|
||||||
|
at: status.next ?? Date.now(),
|
||||||
|
error: { type: "provider.error", message: status.message ?? "Retry scheduled" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
return events([{ type: "session.execution.succeeded", data: { sessionID: properties.sessionID } }])
|
||||||
|
}
|
||||||
|
if (payload.type === "message.updated") {
|
||||||
|
const info = properties.info as Record<string, unknown>
|
||||||
|
const time = info.time as { completed?: number } | undefined
|
||||||
|
if (info.role !== "assistant" || time?.completed === undefined) return []
|
||||||
|
const error = info.error as { name?: string; data?: { message?: string } } | undefined
|
||||||
|
if (error)
|
||||||
|
return events([
|
||||||
|
{
|
||||||
|
type: "session.step.failed",
|
||||||
|
data: {
|
||||||
|
sessionID: properties.sessionID,
|
||||||
|
assistantMessageID: info.id,
|
||||||
|
error: { type: error.name ?? "session.error", message: error.data?.message ?? "Session failed" },
|
||||||
|
cost: info.cost ?? 0,
|
||||||
|
tokens: info.tokens ?? { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
return events([
|
||||||
|
{
|
||||||
|
type: "session.step.ended",
|
||||||
|
data: {
|
||||||
|
sessionID: properties.sessionID,
|
||||||
|
assistantMessageID: info.id,
|
||||||
|
finish: "stop",
|
||||||
|
cost: info.cost ?? 0,
|
||||||
|
tokens: info.tokens ?? { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
}
|
||||||
|
if (payload.type === "message.part.updated") {
|
||||||
|
const part = properties.part as Record<string, unknown>
|
||||||
|
const sessionID = properties.sessionID
|
||||||
|
const assistantMessageID = part.messageID
|
||||||
|
if (part.type === "text") {
|
||||||
|
const existing = document.querySelector(`[data-timeline-part-id="${String(part.id)}"]`)
|
||||||
|
if (existing) {
|
||||||
|
const parts = Array.from(
|
||||||
|
document.querySelectorAll(`[data-message-id="${assistantMessageID}"] [data-component="text-part"]`),
|
||||||
|
)
|
||||||
|
return events([
|
||||||
|
{
|
||||||
|
type: "session.text.ended",
|
||||||
|
data: { sessionID, assistantMessageID, ordinal: parts.indexOf(existing), text: part.text },
|
||||||
|
},
|
||||||
|
])
|
||||||
|
}
|
||||||
|
const ordinal =
|
||||||
|
textOrdinals.get(String(assistantMessageID)) ??
|
||||||
|
document.querySelectorAll(`[data-message-id="${assistantMessageID}"] [data-component="text-part"]`).length
|
||||||
|
textOrdinals.set(String(assistantMessageID), ordinal + 1)
|
||||||
|
return events([
|
||||||
|
{ type: "session.text.started", data: { sessionID, assistantMessageID, ordinal } },
|
||||||
|
{ type: "session.text.ended", data: { sessionID, assistantMessageID, ordinal, text: part.text } },
|
||||||
|
])
|
||||||
|
}
|
||||||
|
if (part.type === "reasoning") {
|
||||||
|
const ordinal =
|
||||||
|
reasoningOrdinals.get(String(assistantMessageID)) ??
|
||||||
|
document.querySelectorAll(`[data-message-id="${assistantMessageID}"] [data-component="reasoning-part"]`)
|
||||||
|
.length
|
||||||
|
reasoningOrdinals.set(String(assistantMessageID), ordinal + 1)
|
||||||
|
return events([
|
||||||
|
{ type: "session.reasoning.started", data: { sessionID, assistantMessageID, ordinal } },
|
||||||
|
{ type: "session.reasoning.ended", data: { sessionID, assistantMessageID, ordinal, text: part.text } },
|
||||||
|
])
|
||||||
|
}
|
||||||
|
if (part.type === "tool") {
|
||||||
|
const state = part.state as Record<string, unknown>
|
||||||
|
const id = part.callID ?? part.id
|
||||||
|
const toolID = String(id)
|
||||||
|
const exists =
|
||||||
|
startedTools.has(toolID) ||
|
||||||
|
document.querySelector(`[data-timeline-part-id="${String(part.id)}"]`) !== null ||
|
||||||
|
Array.from(document.querySelectorAll("[data-timeline-part-ids]")).some((element) =>
|
||||||
|
element.getAttribute("data-timeline-part-ids")?.split(",").includes(String(part.id)),
|
||||||
|
)
|
||||||
|
startedTools.add(toolID)
|
||||||
|
const started = exists
|
||||||
|
? []
|
||||||
|
: [{ type: "session.tool.input.started", data: { sessionID, assistantMessageID, id, name: part.tool } }]
|
||||||
|
if (state.status === "pending") return events(started)
|
||||||
|
const called = {
|
||||||
|
type: "session.tool.called",
|
||||||
|
data: { sessionID, assistantMessageID, id, input: state.input ?? {}, executed: false },
|
||||||
|
}
|
||||||
|
if (state.status === "running")
|
||||||
|
return events([
|
||||||
|
...started,
|
||||||
|
called,
|
||||||
|
{ type: "session.tool.progress", data: { sessionID, assistantMessageID, id, metadata: state.metadata ?? {} } },
|
||||||
|
])
|
||||||
|
if (state.status === "error")
|
||||||
|
return events([
|
||||||
|
...started,
|
||||||
|
called,
|
||||||
|
{
|
||||||
|
type: "session.tool.failed",
|
||||||
|
data: {
|
||||||
|
sessionID,
|
||||||
|
assistantMessageID,
|
||||||
|
id,
|
||||||
|
error: { type: "tool.error", message: state.error ?? "Tool failed" },
|
||||||
|
metadata: state.metadata ?? {},
|
||||||
|
executed: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
return events([
|
||||||
|
...started,
|
||||||
|
called,
|
||||||
|
{
|
||||||
|
type: "session.tool.success",
|
||||||
|
data: {
|
||||||
|
sessionID,
|
||||||
|
assistantMessageID,
|
||||||
|
id,
|
||||||
|
content: [{ type: "text", text: state.output ?? "" }],
|
||||||
|
metadata: state.metadata ?? {},
|
||||||
|
executed: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return events([{ type: payload.type, data: properties }])
|
||||||
}
|
}
|
||||||
const acknowledge = (
|
const acknowledge = (
|
||||||
connection: Connection,
|
connection: Connection,
|
||||||
@@ -156,12 +308,15 @@ export async function installSseTransport<T>(
|
|||||||
return acknowledge(connection, input.bytes.length, output.length)
|
return acknowledge(connection, input.bytes.length, output.length)
|
||||||
}
|
}
|
||||||
const encoded = input.deliveries.map((delivery) => {
|
const encoded = input.deliveries.map((delivery) => {
|
||||||
const payload = connection.path === "/api/event" ? currentEvent(delivery.payload) : delivery.payload
|
const payloads = connection.path === "/api/event" ? currentEvents(delivery.payload) : [delivery.payload]
|
||||||
return { delivery, payload, bytes: encoder.encode(frame(payload, delivery.options)) }
|
return {
|
||||||
|
delivery,
|
||||||
|
bytes: encoder.encode(payloads.map((payload) => frame(payload, delivery.options)).join("")),
|
||||||
|
}
|
||||||
})
|
})
|
||||||
encoded.forEach((item) => marker(item.delivery.options?.marker))
|
encoded.forEach((item) => marker(item.delivery.options?.marker))
|
||||||
if (input.burst) {
|
if (input.burst) {
|
||||||
const bytes = encoder.encode(encoded.map((item) => frame(item.payload, item.delivery.options)).join(""))
|
const bytes = encoder.encode(encoded.map((item) => new TextDecoder().decode(item.bytes)).join(""))
|
||||||
connection.controller.enqueue(bytes)
|
connection.controller.enqueue(bytes)
|
||||||
return encoded.map((item) => acknowledge(connection, item.bytes.byteLength, 1, item.delivery.options?.id))
|
return encoded.map((item) => acknowledge(connection, item.bytes.byteLength, 1, item.delivery.options?.id))
|
||||||
}
|
}
|
||||||
@@ -221,7 +376,7 @@ export async function installSseTransport<T>(
|
|||||||
}
|
}
|
||||||
Object.defineProperty(window, "fetch", { configurable: true, writable: true, value: fetch })
|
Object.defineProperty(window, "fetch", { configurable: true, writable: true, value: fetch })
|
||||||
},
|
},
|
||||||
{ server, retry: options.retry },
|
{ server, retry: options.retry, existingTools: options.existingTools ?? [] },
|
||||||
)
|
)
|
||||||
|
|
||||||
const command = <Result>(input: BrowserCommand<T>) =>
|
const command = <Result>(input: BrowserCommand<T>) =>
|
||||||
|
|||||||
@@ -21,7 +21,6 @@
|
|||||||
<script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
|
<script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
data-new-layout
|
|
||||||
class="antialiased overscroll-none font-(family-name:--font-family-text) text-[13px] font-[440] overflow-hidden bg-v2-background-bg-deep"
|
class="antialiased overscroll-none font-(family-name:--font-family-text) text-[13px] font-[440] overflow-hidden bg-v2-background-bg-deep"
|
||||||
>
|
>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
@@ -74,7 +74,6 @@
|
|||||||
"@solidjs/router": "catalog:",
|
"@solidjs/router": "catalog:",
|
||||||
"@tanstack/solid-query": "5.91.4",
|
"@tanstack/solid-query": "5.91.4",
|
||||||
"@tanstack/solid-virtual": "catalog:",
|
"@tanstack/solid-virtual": "catalog:",
|
||||||
"@thisbeyond/solid-dnd": "0.7.5",
|
|
||||||
"diff": "catalog:",
|
"diff": "catalog:",
|
||||||
"effect": "catalog:",
|
"effect": "catalog:",
|
||||||
"fuzzysort": "catalog:",
|
"fuzzysort": "catalog:",
|
||||||
|
|||||||
+20
-26
@@ -35,9 +35,9 @@ import { PromptProvider } from "@/context/prompt"
|
|||||||
import { ServerConnection, ServersProvider, useServers } from "@/context/servers"
|
import { ServerConnection, ServersProvider, useServers } from "@/context/servers"
|
||||||
import { SettingsProvider } from "@/context/settings"
|
import { SettingsProvider } from "@/context/settings"
|
||||||
import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
|
import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
|
||||||
import { SDKProvider } from "@/context/sdk"
|
import { LocationProvider } from "@/context/location"
|
||||||
import { WslServersProvider } from "@/wsl/context"
|
import { WslServersProvider } from "@/wsl/context"
|
||||||
import { DirectoryDataProvider } from "@/pages/directory-layout"
|
import { SessionUIProvider } from "@/pages/directory-layout"
|
||||||
import Layout from "@/pages/layout"
|
import Layout from "@/pages/layout"
|
||||||
import { ErrorPage } from "./pages/error"
|
import { ErrorPage } from "./pages/error"
|
||||||
import { legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
|
import { legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
|
||||||
@@ -66,19 +66,16 @@ const DirectoryDraftRedirect = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function TargetServerRoute(props: ParentProps) {
|
function TargetServerRoute(props: ParentProps) {
|
||||||
const params = useParams<{ serverKey: string; id: string }>()
|
const params = useParams<{ serverKey: string }>()
|
||||||
const global = useGlobal()
|
const global = useGlobal()
|
||||||
const conn = createMemo(() => {
|
const conn = createMemo(() =>
|
||||||
const key = requireServerKey(params.serverKey)
|
global.servers.list().find((item) => ServerConnection.key(item) === requireServerKey(params.serverKey)),
|
||||||
return global.servers.list().find((item) => ServerConnection.key(item) === key)
|
)
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// Owns the server-identity remount. Session changes must not remount this subtree.
|
// Owns the server-identity remount. Session changes must not remount this subtree.
|
||||||
<Show when={requireServerKey(params.serverKey)} keyed>
|
<Show when={conn()} keyed>
|
||||||
<Show when={conn()} keyed>
|
{(conn) => <ServerProvider conn={conn}>{props.children}</ServerProvider>}
|
||||||
{(conn) => <ServerProvider conn={conn}>{props.children}</ServerProvider>}
|
|
||||||
</Show>
|
|
||||||
</Show>
|
</Show>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -87,14 +84,12 @@ function DraftRoute() {
|
|||||||
const [search] = useSearchParams<{ draftId?: string }>()
|
const [search] = useSearchParams<{ draftId?: string }>()
|
||||||
const tabs = useTabs()
|
const tabs = useTabs()
|
||||||
return (
|
return (
|
||||||
<Show when={tabs.ready()}>
|
<Show
|
||||||
<Show
|
when={tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)}
|
||||||
when={tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)}
|
keyed
|
||||||
keyed
|
fallback={tabs.ready() && <Navigate href="/" />}
|
||||||
fallback={<Navigate href="/" />}
|
>
|
||||||
>
|
{(draft) => <ResolvedDraftRoute draft={draft} />}
|
||||||
{(draft) => <ResolvedDraftRoute draft={draft} />}
|
|
||||||
</Show>
|
|
||||||
</Show>
|
</Show>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -109,13 +104,13 @@ function ResolvedDraftRoute(props: { draft: DraftTab }) {
|
|||||||
{(conn) => (
|
{(conn) => (
|
||||||
<ServerProvider conn={conn}>
|
<ServerProvider conn={conn}>
|
||||||
<ModelsProvider directory={props.draft.directory}>
|
<ModelsProvider directory={props.draft.directory}>
|
||||||
<SDKProvider directory={props.draft.directory}>
|
<LocationProvider directory={props.draft.directory}>
|
||||||
<DirectoryDataProvider directory={props.draft.directory} server={props.draft.server}>
|
<SessionUIProvider directory={props.draft.directory} server={props.draft.server}>
|
||||||
<DraftProviders>
|
<DraftProviders>
|
||||||
<NewSession draftId={props.draft.draftID} />
|
<NewSession draftId={props.draft.draftID} />
|
||||||
</DraftProviders>
|
</DraftProviders>
|
||||||
</DirectoryDataProvider>
|
</SessionUIProvider>
|
||||||
</SDKProvider>
|
</LocationProvider>
|
||||||
</ModelsProvider>
|
</ModelsProvider>
|
||||||
</ServerProvider>
|
</ServerProvider>
|
||||||
)}
|
)}
|
||||||
@@ -166,10 +161,9 @@ function QueryProvider(props: ParentProps) {
|
|||||||
return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>
|
return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>
|
||||||
}
|
}
|
||||||
|
|
||||||
function BodyDesignClass() {
|
function BodyTypography() {
|
||||||
createRenderEffect(() => {
|
createRenderEffect(() => {
|
||||||
if (typeof document === "undefined") return
|
if (typeof document === "undefined") return
|
||||||
document.body.toggleAttribute("data-new-layout", true)
|
|
||||||
document.body.classList.remove("text-12-regular")
|
document.body.classList.remove("text-12-regular")
|
||||||
document.body.classList.add("font-(family-name:--font-family-text)", "text-[13px]", "font-[440]")
|
document.body.classList.add("font-(family-name:--font-family-text)", "text-[13px]", "font-[440]")
|
||||||
})
|
})
|
||||||
@@ -273,7 +267,7 @@ export function AppInterface(props: {
|
|||||||
// providers beneath it.
|
// providers beneath it.
|
||||||
const Root = (rootProps: ParentProps) => (
|
const Root = (rootProps: ParentProps) => (
|
||||||
<TabsProvider>
|
<TabsProvider>
|
||||||
<BodyDesignClass />
|
<BodyTypography />
|
||||||
<CommandProvider>
|
<CommandProvider>
|
||||||
<DesktopCommands />
|
<DesktopCommands />
|
||||||
<HighlightsProvider>
|
<HighlightsProvider>
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
import { Button } from "@opencode-ai/ui/button"
|
import { Button } from "@opencode-ai/ui/button"
|
||||||
import { useDialog } from "@opencode-ai/ui/context/dialog"
|
import { useDialog } from "@opencode-ai/ui/context/dialog"
|
||||||
import { Dialog } from "@opencode-ai/ui/dialog"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
import { Icon } from "@opencode-ai/ui/icon"
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
import { List } from "@opencode-ai/ui/list"
|
||||||
import { List, type ListRef } from "@opencode-ai/ui/list"
|
|
||||||
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
|
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
|
||||||
import { Spinner } from "@opencode-ai/ui/spinner"
|
import { Spinner } from "@opencode-ai/ui/spinner"
|
||||||
import { Tag } from "@opencode-ai/ui/tag"
|
|
||||||
import { TextField } from "@opencode-ai/ui/text-field"
|
import { TextField } from "@opencode-ai/ui/text-field"
|
||||||
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
|
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
|
||||||
import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
|
import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
|
||||||
@@ -16,10 +13,8 @@ import { type Component, createMemo, createUniqueId, For, Match, onMount, Show,
|
|||||||
import { createStore } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
import { useParams } from "@solidjs/router"
|
import { useParams } from "@solidjs/router"
|
||||||
import { ExternalLink } from "@/components/external-link"
|
import { ExternalLink } from "@/components/external-link"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useSettings } from "@/context/settings"
|
import { useProviders } from "@/hooks/use-providers"
|
||||||
import { popularProviders, useProviders } from "@/hooks/use-providers"
|
|
||||||
import { useIntegrations } from "@/hooks/use-integrations"
|
import { useIntegrations } from "@/hooks/use-integrations"
|
||||||
import { CustomProviderForm } from "./dialog-custom-provider"
|
import { CustomProviderForm } from "./dialog-custom-provider"
|
||||||
import { decode64 } from "@/utils/base64"
|
import { decode64 } from "@/utils/base64"
|
||||||
@@ -47,8 +42,6 @@ export const DialogConnectProvider: Component<{
|
|||||||
const fallback = useProviderConnectController()
|
const fallback = useProviderConnectController()
|
||||||
const controller = props.controller ?? fallback
|
const controller = props.controller ?? fallback
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const settings = useSettings()
|
|
||||||
const newLayout = settings.general.newLayoutDesigns
|
|
||||||
const reset = controller.back
|
const reset = controller.back
|
||||||
const back = { current: reset }
|
const back = { current: reset }
|
||||||
let focusHost: HTMLDivElement | undefined
|
let focusHost: HTMLDivElement | undefined
|
||||||
@@ -62,7 +55,7 @@ export const DialogConnectProvider: Component<{
|
|||||||
return (
|
return (
|
||||||
<Switch>
|
<Switch>
|
||||||
<Match when={controller.selected() === CUSTOM_ID}>
|
<Match when={controller.selected() === CUSTOM_ID}>
|
||||||
<CustomProviderForm autofocus={!newLayout()} />
|
<CustomProviderForm autofocus={false} />
|
||||||
</Match>
|
</Match>
|
||||||
<Match when={controller.selected() && controller.selected() !== CUSTOM_ID ? controller.selected() : undefined}>
|
<Match when={controller.selected() && controller.selected() !== CUSTOM_ID ? controller.selected() : undefined}>
|
||||||
{(provider) => (
|
{(provider) => (
|
||||||
@@ -75,140 +68,42 @@ export const DialogConnectProvider: Component<{
|
|||||||
)}
|
)}
|
||||||
</Match>
|
</Match>
|
||||||
<Match when={true}>
|
<Match when={true}>
|
||||||
<ProviderPicker
|
<ProviderPicker directory={props.directory} onSelect={select} onPrepare={holdFocus} />
|
||||||
directory={props.directory}
|
|
||||||
onSelect={select}
|
|
||||||
onPrepare={newLayout() ? holdFocus : undefined}
|
|
||||||
/>
|
|
||||||
</Match>
|
</Match>
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Show
|
<DialogV2
|
||||||
when={newLayout()}
|
containerClass="!h-[min(calc(100vh_-_16px),512px)] !w-[min(calc(100vw_-_16px),640px)]"
|
||||||
fallback={
|
class="[font-family:var(--v2-font-family-sans)] [&_[data-slot=dialog-header]]:!px-5 [&_[data-slot=dialog-header-title]]:!text-[15px] [&_[data-slot=dialog-header-title]]:!tracking-[-0.13px]"
|
||||||
<Dialog
|
|
||||||
class="h-full"
|
|
||||||
transition
|
|
||||||
title={
|
|
||||||
<Show when={controller.selected()} fallback={language.t("command.provider.connect")}>
|
|
||||||
<IconButton
|
|
||||||
tabIndex={-1}
|
|
||||||
icon="arrow-left"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => back.current()}
|
|
||||||
aria-label={language.t("common.goBack")}
|
|
||||||
/>
|
|
||||||
</Show>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Content />
|
|
||||||
</Dialog>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<DialogV2
|
<DialogHeader closeLabel={language.t("common.close")}>
|
||||||
containerClass="!h-[min(calc(100vh_-_16px),512px)] !w-[min(calc(100vw_-_16px),640px)]"
|
<Show
|
||||||
class="[font-family:var(--v2-font-family-sans)] [&_[data-slot=dialog-header]]:!px-5 [&_[data-slot=dialog-header-title]]:!text-[15px] [&_[data-slot=dialog-header-title]]:!tracking-[-0.13px]"
|
when={controller.selected()}
|
||||||
>
|
fallback={<DialogTitle>{language.t("command.provider.connect")}</DialogTitle>}
|
||||||
<DialogHeader closeLabel={language.t("common.close")}>
|
>
|
||||||
<Show
|
<button
|
||||||
when={controller.selected()}
|
type="button"
|
||||||
fallback={<DialogTitle>{language.t("command.provider.connect")}</DialogTitle>}
|
class="flex size-5 items-center justify-center rounded-sm text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
|
||||||
|
onClick={() => back.current()}
|
||||||
|
aria-label={language.t("common.goBack")}
|
||||||
>
|
>
|
||||||
<button
|
<Icon name="arrow-left" size="small" />
|
||||||
type="button"
|
</button>
|
||||||
class="flex size-5 items-center justify-center rounded-sm text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
|
</Show>
|
||||||
onClick={() => back.current()}
|
</DialogHeader>
|
||||||
aria-label={language.t("common.goBack")}
|
<DialogBody class="min-h-0 flex-1 overflow-hidden px-2 pb-2">
|
||||||
>
|
<div ref={focusHost} tabIndex={-1} class="flex min-h-0 flex-1 flex-col outline-none">
|
||||||
<Icon name="arrow-left" size="small" />
|
<Content />
|
||||||
</button>
|
</div>
|
||||||
</Show>
|
</DialogBody>
|
||||||
</DialogHeader>
|
</DialogV2>
|
||||||
<DialogBody class="min-h-0 flex-1 overflow-hidden px-2 pb-2">
|
|
||||||
<div ref={focusHost} tabIndex={-1} class="flex min-h-0 flex-1 flex-col outline-none">
|
|
||||||
<Content />
|
|
||||||
</div>
|
|
||||||
</DialogBody>
|
|
||||||
</DialogV2>
|
|
||||||
</Show>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ProviderPicker(props: { directory?: string; onSelect: (provider: string) => void; onPrepare?: () => void }) {
|
function ProviderPicker(props: { directory?: string; onSelect: (provider: string) => void; onPrepare?: () => void }) {
|
||||||
const settings = useSettings()
|
|
||||||
if (settings.general.newLayoutDesigns())
|
|
||||||
return <ProviderPickerV2 directory={props.directory} onSelect={props.onSelect} onPrepare={props.onPrepare} />
|
|
||||||
const integrations = useIntegrations(() => props.directory)
|
|
||||||
const language = useLanguage()
|
|
||||||
const popularGroup = () => language.t("dialog.provider.group.popular")
|
|
||||||
const otherGroup = () => language.t("dialog.provider.group.other")
|
|
||||||
const customLabel = () => language.t("settings.providers.tag.custom")
|
|
||||||
const note = (id: string) => {
|
|
||||||
if (id === "anthropic") return language.t("dialog.provider.anthropic.note")
|
|
||||||
if (id === "openai") return language.t("dialog.provider.openai.note")
|
|
||||||
if (id.startsWith("github-copilot")) return language.t("dialog.provider.copilot.note")
|
|
||||||
if (id === "opencode-go") return language.t("dialog.provider.opencodeGo.tagline")
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
class="px-3"
|
|
||||||
search={{ placeholder: language.t("dialog.provider.search.placeholder"), autofocus: true }}
|
|
||||||
emptyMessage={language.t("dialog.provider.empty")}
|
|
||||||
activeIcon="plus-small"
|
|
||||||
key={(x) => x?.id}
|
|
||||||
items={() => {
|
|
||||||
language.locale()
|
|
||||||
return [{ id: CUSTOM_ID, name: customLabel() }, ...integrations.list()]
|
|
||||||
}}
|
|
||||||
filterKeys={["id", "name"]}
|
|
||||||
groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}
|
|
||||||
sortBy={(a, b) => {
|
|
||||||
if (a.id === CUSTOM_ID) return -1
|
|
||||||
if (b.id === CUSTOM_ID) return 1
|
|
||||||
if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
|
|
||||||
return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
|
|
||||||
return a.name.localeCompare(b.name)
|
|
||||||
}}
|
|
||||||
sortGroupsBy={(a, b) => {
|
|
||||||
const popular = popularGroup()
|
|
||||||
if (a.category === popular && b.category !== popular) return -1
|
|
||||||
if (b.category === popular && a.category !== popular) return 1
|
|
||||||
return 0
|
|
||||||
}}
|
|
||||||
onSelect={(x) => {
|
|
||||||
if (!x) return
|
|
||||||
props.onSelect(x.id)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(i) => (
|
|
||||||
<div class="px-1.25 w-full flex items-center gap-x-3">
|
|
||||||
<ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
|
|
||||||
<span>{i.name}</span>
|
|
||||||
<Show when={i.id === "opencode"}>
|
|
||||||
<div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
|
|
||||||
</Show>
|
|
||||||
<Show when={i.id === CUSTOM_ID}>
|
|
||||||
<Tag>{language.t("settings.providers.tag.custom")}</Tag>
|
|
||||||
</Show>
|
|
||||||
<Show when={i.id === "opencode"}>
|
|
||||||
<Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
|
|
||||||
</Show>
|
|
||||||
<Show when={note(i.id)}>{(value) => <div class="text-14-regular text-text-weak">{value()}</div>}</Show>
|
|
||||||
<Show when={i.id === "opencode-go"}>
|
|
||||||
<Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</List>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ProviderPickerV2(props: { directory?: string; onSelect: (provider: string) => void; onPrepare?: () => void }) {
|
|
||||||
const integrations = useIntegrations(() => props.directory)
|
const integrations = useIntegrations(() => props.directory)
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const [store, setStore] = createStore({
|
const [store, setStore] = createStore({
|
||||||
@@ -362,11 +257,8 @@ function ProviderConnection(props: {
|
|||||||
setBack: (handler: () => void) => void
|
setBack: (handler: () => void) => void
|
||||||
}) {
|
}) {
|
||||||
const dialog = useDialog()
|
const dialog = useDialog()
|
||||||
const serverSync = useServerSync()
|
|
||||||
const params = useParams()
|
const params = useParams()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const settings = useSettings()
|
|
||||||
const newLayout = settings.general.newLayoutDesigns
|
|
||||||
const providers = useProviders(() => props.directory)
|
const providers = useProviders(() => props.directory)
|
||||||
const directory = () => props.directory ?? decode64(params.dir)
|
const directory = () => props.directory ?? decode64(params.dir)
|
||||||
|
|
||||||
@@ -386,10 +278,7 @@ function ProviderConnection(props: {
|
|||||||
const provider = createMemo(() => ({
|
const provider = createMemo(() => ({
|
||||||
id: props.provider,
|
id: props.provider,
|
||||||
name:
|
name:
|
||||||
providers.all().get(props.provider)?.name ??
|
providers.all().get(props.provider)?.name ?? controller.integration()?.name ?? props.provider,
|
||||||
serverSync.data.provider.all.get(props.provider)?.name ??
|
|
||||||
controller.integration()?.name ??
|
|
||||||
props.provider,
|
|
||||||
}))
|
}))
|
||||||
const methodLabel = (value?: { type?: string; label?: string }) => {
|
const methodLabel = (value?: { type?: string; label?: string }) => {
|
||||||
if (!value) return ""
|
if (!value) return ""
|
||||||
@@ -534,15 +423,6 @@ function ProviderConnection(props: {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
let listRef: ListRef | undefined
|
|
||||||
function handleKey(e: KeyboardEvent) {
|
|
||||||
if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (e.key === "Escape") return
|
|
||||||
listRef?.onKeyDown(e)
|
|
||||||
}
|
|
||||||
|
|
||||||
function goBack() {
|
function goBack() {
|
||||||
if (controller.methods().length > 1 && controller.methodIndex() !== undefined) {
|
if (controller.methods().length > 1 && controller.methodIndex() !== undefined) {
|
||||||
controller.auth.reset()
|
controller.auth.reset()
|
||||||
@@ -554,66 +434,34 @@ function ProviderConnection(props: {
|
|||||||
props.setBack(goBack)
|
props.setBack(goBack)
|
||||||
|
|
||||||
function MethodSelection() {
|
function MethodSelection() {
|
||||||
if (newLayout())
|
|
||||||
return (
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
|
|
||||||
{language.t("provider.connect.selectMethod", { provider: provider().name })}
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<For each={controller.methods()}>
|
|
||||||
{(item, index) => {
|
|
||||||
const details = () => methodDetails(item)
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="group flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-[13px] leading-5 tracking-[-0.04px] hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
|
|
||||||
onClick={() => void controller.auth.select(index())}
|
|
||||||
>
|
|
||||||
<span class="flex h-2 w-4 shrink-0 items-center justify-center rounded-[1px] bg-v2-background-bg-base shadow-[var(--v2-elevation-button-neutral)]">
|
|
||||||
<span class="hidden h-0.5 w-2.5 bg-v2-icon-icon-base group-hover:block group-focus-visible:block" />
|
|
||||||
</span>
|
|
||||||
<span class="font-[530] text-v2-text-text-base">{details().label}</span>
|
|
||||||
<Show when={details().hint}>
|
|
||||||
{(hint) => <span class="font-[440] text-v2-text-text-muted">{hint()}</span>}
|
|
||||||
</Show>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div class="flex flex-col gap-2">
|
||||||
<div class="text-14-regular text-text-base">
|
<div class="px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
|
||||||
{language.t("provider.connect.selectMethod", { provider: provider().name })}
|
{language.t("provider.connect.selectMethod", { provider: provider().name })}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="flex flex-col">
|
||||||
<List
|
<For each={controller.methods()}>
|
||||||
class="px-3"
|
{(item, index) => {
|
||||||
ref={(ref) => {
|
const details = () => methodDetails(item)
|
||||||
listRef = ref
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="group flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-[13px] leading-5 tracking-[-0.04px] hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
|
||||||
|
onClick={() => void controller.auth.select(index())}
|
||||||
|
>
|
||||||
|
<span class="flex h-2 w-4 shrink-0 items-center justify-center rounded-[1px] bg-v2-background-bg-base shadow-[var(--v2-elevation-button-neutral)]">
|
||||||
|
<span class="hidden h-0.5 w-2.5 bg-v2-icon-icon-base group-hover:block group-focus-visible:block" />
|
||||||
|
</span>
|
||||||
|
<span class="font-[530] text-v2-text-text-base">{details().label}</span>
|
||||||
|
<Show when={details().hint}>
|
||||||
|
{(hint) => <span class="font-[440] text-v2-text-text-muted">{hint()}</span>}
|
||||||
|
</Show>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
}}
|
}}
|
||||||
items={controller.methods}
|
</For>
|
||||||
key={(m) => m?.label ?? m?.type}
|
|
||||||
onSelect={async (selected, index) => {
|
|
||||||
if (!selected) return
|
|
||||||
void controller.auth.select(index)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(i) => (
|
|
||||||
<div class="w-full flex items-center gap-x-2">
|
|
||||||
<div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
|
|
||||||
<div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
|
|
||||||
</div>
|
|
||||||
<span>{methodLabel(i)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</List>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -626,7 +474,6 @@ function ProviderConnection(props: {
|
|||||||
})
|
})
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (!newLayout()) return
|
|
||||||
apiKey?.focus({ preventScroll: true })
|
apiKey?.focus({ preventScroll: true })
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -646,97 +493,54 @@ function ProviderConnection(props: {
|
|||||||
await controller.auth.connectKey(apiKey)
|
await controller.auth.connectKey(apiKey)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newLayout())
|
|
||||||
return (
|
|
||||||
<div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
|
|
||||||
<Show
|
|
||||||
when={provider().id === "opencode"}
|
|
||||||
fallback={language.t("provider.connect.apiKey.description", { provider: provider().name })}
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-5">
|
|
||||||
<div>{language.t("provider.connect.opencodeZen.line1")}</div>
|
|
||||||
<div>{language.t("provider.connect.opencodeZen.line2")}</div>
|
|
||||||
<div>
|
|
||||||
{language.t("provider.connect.opencodeZen.visit.prefix")}
|
|
||||||
<ExternalLink
|
|
||||||
href="https://opencode.ai/zen"
|
|
||||||
class="text-v2-text-text-base focus-visible:rounded-xs focus-visible:outline-2 focus-visible:outline-v2-border-border-focus"
|
|
||||||
>
|
|
||||||
{language.t("provider.connect.opencodeZen.visit.link")}
|
|
||||||
</ExternalLink>
|
|
||||||
{language.t("provider.connect.opencodeZen.visit.suffix")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
|
|
||||||
<label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
|
|
||||||
{language.t("provider.connect.apiKey.label", { provider: provider().name })}
|
|
||||||
<TextInputV2
|
|
||||||
ref={apiKey}
|
|
||||||
class="!w-full"
|
|
||||||
name="apiKey"
|
|
||||||
data-input="provider-api-key"
|
|
||||||
placeholder={language.t("provider.connect.apiKey.placeholder")}
|
|
||||||
value={formStore.value}
|
|
||||||
invalid={formStore.error !== undefined}
|
|
||||||
aria-describedby={formStore.error ? errorID : undefined}
|
|
||||||
autocomplete="off"
|
|
||||||
spellcheck={false}
|
|
||||||
onInput={(event) => setFormStore("value", event.currentTarget.value)}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<Show when={formStore.error}>
|
|
||||||
{(error) => (
|
|
||||||
<div id={errorID} role="alert" class="-mt-4 text-xs text-v2-state-fg-danger">
|
|
||||||
{error()}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Show>
|
|
||||||
<ButtonV2 type="submit" variant="contrast" data-action="provider-connect-submit">
|
|
||||||
{language.t("common.continue")}
|
|
||||||
</ButtonV2>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
|
||||||
<Switch>
|
<Show
|
||||||
<Match when={provider().id === "opencode"}>
|
when={provider().id === "opencode"}
|
||||||
<div class="flex flex-col gap-4">
|
fallback={language.t("provider.connect.apiKey.description", { provider: provider().name })}
|
||||||
<div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line1")}</div>
|
>
|
||||||
<div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line2")}</div>
|
<div class="flex flex-col gap-5">
|
||||||
<div class="text-14-regular text-text-base">
|
<div>{language.t("provider.connect.opencodeZen.line1")}</div>
|
||||||
{language.t("provider.connect.opencodeZen.visit.prefix")}
|
<div>{language.t("provider.connect.opencodeZen.line2")}</div>
|
||||||
<ExternalLink href="https://opencode.ai/zen" tabIndex={-1}>
|
<div>
|
||||||
{language.t("provider.connect.opencodeZen.visit.link")}
|
{language.t("provider.connect.opencodeZen.visit.prefix")}
|
||||||
</ExternalLink>
|
<ExternalLink
|
||||||
{language.t("provider.connect.opencodeZen.visit.suffix")}
|
href="https://opencode.ai/zen"
|
||||||
|
class="text-v2-text-text-base focus-visible:rounded-xs focus-visible:outline-2 focus-visible:outline-v2-border-border-focus"
|
||||||
|
>
|
||||||
|
{language.t("provider.connect.opencodeZen.visit.link")}
|
||||||
|
</ExternalLink>
|
||||||
|
{language.t("provider.connect.opencodeZen.visit.suffix")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
|
||||||
|
<label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
|
||||||
|
{language.t("provider.connect.apiKey.label", { provider: provider().name })}
|
||||||
|
<TextInputV2
|
||||||
|
ref={apiKey}
|
||||||
|
class="!w-full"
|
||||||
|
name="apiKey"
|
||||||
|
data-input="provider-api-key"
|
||||||
|
placeholder={language.t("provider.connect.apiKey.placeholder")}
|
||||||
|
value={formStore.value}
|
||||||
|
invalid={formStore.error !== undefined}
|
||||||
|
aria-describedby={formStore.error ? errorID : undefined}
|
||||||
|
autocomplete="off"
|
||||||
|
spellcheck={false}
|
||||||
|
onInput={(event) => setFormStore("value", event.currentTarget.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<Show when={formStore.error}>
|
||||||
|
{(error) => (
|
||||||
|
<div id={errorID} role="alert" class="-mt-4 text-xs text-v2-state-fg-danger">
|
||||||
|
{error()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</Match>
|
</Show>
|
||||||
<Match when={true}>
|
<ButtonV2 type="submit" variant="contrast" data-action="provider-connect-submit">
|
||||||
<div class="text-14-regular text-text-base">
|
|
||||||
{language.t("provider.connect.apiKey.description", { provider: provider().name })}
|
|
||||||
</div>
|
|
||||||
</Match>
|
|
||||||
</Switch>
|
|
||||||
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
|
|
||||||
<TextField
|
|
||||||
autofocus={!newLayout()}
|
|
||||||
ref={apiKey}
|
|
||||||
type="text"
|
|
||||||
label={language.t("provider.connect.apiKey.label", { provider: provider().name })}
|
|
||||||
placeholder={language.t("provider.connect.apiKey.placeholder")}
|
|
||||||
name="apiKey"
|
|
||||||
value={formStore.value}
|
|
||||||
onChange={(v) => setFormStore("value", v)}
|
|
||||||
validationState={formStore.error ? "invalid" : undefined}
|
|
||||||
error={formStore.error}
|
|
||||||
/>
|
|
||||||
<Button class="w-auto" type="submit" size="large" variant="primary">
|
|
||||||
{language.t("common.continue")}
|
{language.t("common.continue")}
|
||||||
</Button>
|
</ButtonV2>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -751,7 +555,6 @@ function ProviderConnection(props: {
|
|||||||
})
|
})
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (!newLayout()) return
|
|
||||||
codeInput?.focus({ preventScroll: true })
|
codeInput?.focus({ preventScroll: true })
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -771,73 +574,41 @@ function ProviderConnection(props: {
|
|||||||
setFormStore("error", await controller.auth.completeCode(code))
|
setFormStore("error", await controller.auth.completeCode(code))
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newLayout())
|
|
||||||
return (
|
|
||||||
<div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
|
|
||||||
<div>
|
|
||||||
{language.t("provider.connect.oauth.code.visit.prefix")}
|
|
||||||
<ExternalLink href={controller.authorization()!.url} class="text-v2-text-text-base">
|
|
||||||
{language.t("provider.connect.oauth.code.visit.link")}
|
|
||||||
</ExternalLink>
|
|
||||||
{language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
|
|
||||||
</div>
|
|
||||||
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
|
|
||||||
<label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
|
|
||||||
{language.t("provider.connect.oauth.code.label", { method: controller.currentMethod()?.label ?? "" })}
|
|
||||||
<TextInputV2
|
|
||||||
ref={codeInput}
|
|
||||||
class="!w-full"
|
|
||||||
name="code"
|
|
||||||
placeholder={language.t("provider.connect.oauth.code.placeholder")}
|
|
||||||
value={formStore.value}
|
|
||||||
invalid={formStore.error !== undefined}
|
|
||||||
aria-describedby={formStore.error ? errorID : undefined}
|
|
||||||
autocomplete="off"
|
|
||||||
spellcheck={false}
|
|
||||||
onInput={(event) => setFormStore("value", event.currentTarget.value)}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<Show when={formStore.error}>
|
|
||||||
{(error) => (
|
|
||||||
<div id={errorID} role="alert" class="-mt-4 text-xs text-v2-state-fg-danger">
|
|
||||||
{error()}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Show>
|
|
||||||
<ButtonV2 type="submit" variant="contrast">
|
|
||||||
{language.t("common.continue")}
|
|
||||||
</ButtonV2>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
|
||||||
<div class="text-14-regular text-text-base">
|
<div>
|
||||||
{language.t("provider.connect.oauth.code.visit.prefix")}
|
{language.t("provider.connect.oauth.code.visit.prefix")}
|
||||||
<ExternalLink href={controller.authorization()!.url}>
|
<ExternalLink href={controller.authorization()!.url} class="text-v2-text-text-base">
|
||||||
{language.t("provider.connect.oauth.code.visit.link")}
|
{language.t("provider.connect.oauth.code.visit.link")}
|
||||||
</ExternalLink>
|
</ExternalLink>
|
||||||
{language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
|
{language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
|
||||||
</div>
|
</div>
|
||||||
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
|
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
|
||||||
<TextField
|
<label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
|
||||||
autofocus={!newLayout()}
|
{language.t("provider.connect.oauth.code.label", { method: controller.currentMethod()?.label ?? "" })}
|
||||||
ref={codeInput}
|
<TextInputV2
|
||||||
type="text"
|
ref={codeInput}
|
||||||
label={language.t("provider.connect.oauth.code.label", {
|
class="!w-full"
|
||||||
method: controller.currentMethod()?.label ?? "",
|
name="code"
|
||||||
})}
|
placeholder={language.t("provider.connect.oauth.code.placeholder")}
|
||||||
placeholder={language.t("provider.connect.oauth.code.placeholder")}
|
value={formStore.value}
|
||||||
name="code"
|
invalid={formStore.error !== undefined}
|
||||||
value={formStore.value}
|
aria-describedby={formStore.error ? errorID : undefined}
|
||||||
onChange={(v) => setFormStore("value", v)}
|
autocomplete="off"
|
||||||
validationState={formStore.error ? "invalid" : undefined}
|
spellcheck={false}
|
||||||
error={formStore.error}
|
onInput={(event) => setFormStore("value", event.currentTarget.value)}
|
||||||
/>
|
/>
|
||||||
<Button class="w-auto" type="submit" size="large" variant="primary">
|
</label>
|
||||||
|
<Show when={formStore.error}>
|
||||||
|
{(error) => (
|
||||||
|
<div id={errorID} role="alert" class="-mt-4 text-xs text-v2-state-fg-danger">
|
||||||
|
{error()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Show>
|
||||||
|
<ButtonV2 type="submit" variant="contrast">
|
||||||
{language.t("common.continue")}
|
{language.t("common.continue")}
|
||||||
</Button>
|
</ButtonV2>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -877,19 +648,10 @@ function ProviderConnection(props: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={newLayout() ? "flex min-h-0 flex-1 flex-col" : "flex flex-col gap-6 px-2.5 pb-3"}>
|
<div class="flex min-h-0 flex-1 flex-col">
|
||||||
<div class={newLayout() ? "flex h-10 shrink-0 items-start gap-2 px-3" : "flex items-center gap-4 px-2.5"}>
|
<div class="flex h-10 shrink-0 items-start gap-2 px-3">
|
||||||
<ProviderIcon
|
<ProviderIcon id={props.provider} class="mt-0.5 size-4 shrink-0 text-v2-icon-icon-base" />
|
||||||
id={props.provider}
|
<div class="text-[15px] font-[530] leading-5 tracking-[-0.13px] text-v2-text-text-base">
|
||||||
class={newLayout() ? "mt-0.5 size-4 shrink-0 text-v2-icon-icon-base" : "size-5 shrink-0 icon-strong-base"}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class={
|
|
||||||
newLayout()
|
|
||||||
? "text-[15px] font-[530] leading-5 tracking-[-0.13px] text-v2-text-text-base"
|
|
||||||
: "text-16-medium text-text-strong"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Switch>
|
<Switch>
|
||||||
<Match
|
<Match
|
||||||
when={props.provider === "anthropic" && controller.currentMethod()?.label?.toLowerCase().includes("max")}
|
when={props.provider === "anthropic" && controller.currentMethod()?.label?.toLowerCase().includes("max")}
|
||||||
@@ -900,12 +662,8 @@ function ProviderConnection(props: {
|
|||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class={newLayout() ? "flex min-h-0 flex-1 flex-col" : "flex flex-col gap-6 px-2.5 pb-10"}>
|
<div class="flex min-h-0 flex-1 flex-col">
|
||||||
<div
|
<div>
|
||||||
onKeyDown={handleKey}
|
|
||||||
tabIndex={newLayout() ? undefined : 0}
|
|
||||||
autofocus={!newLayout() && controller.methodIndex() === undefined ? true : undefined}
|
|
||||||
>
|
|
||||||
<Switch>
|
<Switch>
|
||||||
<Match when={controller.loading()}>
|
<Match when={controller.loading()}>
|
||||||
<div class="text-14-regular text-text-base">
|
<div class="text-14-regular text-text-base">
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { showToast } from "@/utils/toast"
|
|||||||
import { batch, For } from "solid-js"
|
import { batch, For } from "solid-js"
|
||||||
import { createStore, produce } from "solid-js/store"
|
import { createStore, produce } from "solid-js/store"
|
||||||
import { ExternalLink } from "@/components/external-link"
|
import { ExternalLink } from "@/components/external-link"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
import { useData } from "@/context/server"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
|
import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
|
||||||
|
|
||||||
@@ -41,7 +41,7 @@ export function DialogCustomProvider(props: Props) {
|
|||||||
|
|
||||||
export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
|
export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
|
||||||
const dialog = useDialog()
|
const dialog = useDialog()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
|
|
||||||
const [form, setForm] = createStore<FormState>({
|
const [form, setForm] = createStore<FormState>({
|
||||||
@@ -116,8 +116,9 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
|
|||||||
const output = validateCustomProvider({
|
const output = validateCustomProvider({
|
||||||
form,
|
form,
|
||||||
t: language.t,
|
t: language.t,
|
||||||
disabledProviders: serverSync.data.config.disabled_providers ?? [],
|
// TODO: Restore disabled-provider validation when V2 exposes config reads.
|
||||||
existingProviderIDs: new Set(serverSync.data.provider.all.keys()),
|
disabledProviders: [],
|
||||||
|
existingProviderIDs: new Set((data.location.provider.list() ?? []).map((provider) => provider.id)),
|
||||||
})
|
})
|
||||||
batch(() => {
|
batch(() => {
|
||||||
setForm("err", output.err)
|
setForm("err", output.err)
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import { For, Show, createSignal, startTransition } from "solid-js"
|
|||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
|
import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
|
||||||
import { ServerConnection } from "@/context/servers"
|
import { ServerConnection } from "@/context/servers"
|
||||||
import { SDKProvider } from "@/context/sdk"
|
import { LocationProvider } from "@/context/location"
|
||||||
import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
|
import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
|
||||||
import { createEditProjectModel } from "./edit-project"
|
import { createEditProjectModel } from "./edit-project"
|
||||||
import { ProjectSettingsExtensions } from "./project-settings-extensions"
|
import { ProjectSettingsExtensions } from "./project-settings-extensions"
|
||||||
@@ -22,9 +22,9 @@ import "./dialog-edit-project-v2.css"
|
|||||||
export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
|
export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
|
||||||
return (
|
return (
|
||||||
<SettingsServerDataScope server={props.server}>
|
<SettingsServerDataScope server={props.server}>
|
||||||
<SDKProvider directory={props.project.worktree}>
|
<LocationProvider directory={props.project.worktree}>
|
||||||
<ProjectSettingsDialog project={props.project} server={props.server} />
|
<ProjectSettingsDialog project={props.project} server={props.server} />
|
||||||
</SDKProvider>
|
</LocationProvider>
|
||||||
</SettingsServerDataScope>
|
</SettingsServerDataScope>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,19 @@
|
|||||||
import { Component, createMemo } from "solid-js"
|
import { Component, createMemo } from "solid-js"
|
||||||
import { useNavigate, useParams } from "@solidjs/router"
|
import { useNavigate, useParams } from "@solidjs/router"
|
||||||
import { useSync } from "@/context/sync"
|
import { useData } from "@/context/server"
|
||||||
import { useSDK } from "@/context/sdk"
|
|
||||||
import { usePrompt } from "@/context/prompt"
|
import { usePrompt } from "@/context/prompt"
|
||||||
import { useDialog } from "@opencode-ai/ui/context/dialog"
|
import { useDialog } from "@opencode-ai/ui/context/dialog"
|
||||||
import { Dialog } from "@opencode-ai/ui/dialog"
|
import { Dialog } from "@opencode-ai/ui/dialog"
|
||||||
import { List } from "@opencode-ai/ui/list"
|
import { List } from "@opencode-ai/ui/list"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
import { extractPromptFromParts } from "@/utils/prompt"
|
|
||||||
import type { TextPart as SDKTextPart } from "@/types"
|
|
||||||
import { base64Encode } from "@opencode-ai/core/util/encode"
|
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
|
import { sessionHref } from "@/utils/session-route"
|
||||||
|
import { ServerConnection } from "@/context/servers"
|
||||||
|
import { base64Encode } from "@opencode-ai/core/util/encode"
|
||||||
|
import { extractPromptFromParts } from "@/utils/prompt"
|
||||||
|
import { normalizeSessionMessages } from "@/utils/session-message"
|
||||||
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
|
|
||||||
interface ForkableMessage {
|
interface ForkableMessage {
|
||||||
id: string
|
id: string
|
||||||
@@ -25,8 +28,9 @@ function formatTime(date: Date): string {
|
|||||||
export const DialogFork: Component = () => {
|
export const DialogFork: Component = () => {
|
||||||
const params = useParams()
|
const params = useParams()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
const sdk = useSDK()
|
const serverSDK = useServerSDK()
|
||||||
|
const location = useWorkspaceLocation()
|
||||||
const prompt = usePrompt()
|
const prompt = usePrompt()
|
||||||
const dialog = useDialog()
|
const dialog = useDialog()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
@@ -35,19 +39,15 @@ export const DialogFork: Component = () => {
|
|||||||
const sessionID = params.id
|
const sessionID = params.id
|
||||||
if (!sessionID) return []
|
if (!sessionID) return []
|
||||||
|
|
||||||
const msgs = sync().data.message[sessionID] ?? []
|
const msgs = data.session.message.list(sessionID)
|
||||||
const result: ForkableMessage[] = []
|
const result: ForkableMessage[] = []
|
||||||
|
|
||||||
for (const message of msgs) {
|
for (const message of msgs) {
|
||||||
if (message.role !== "user") continue
|
if (message.type !== "user" || !message.text) continue
|
||||||
|
|
||||||
const parts = sync().data.part[message.id] ?? []
|
|
||||||
const textPart = parts.find((x): x is SDKTextPart => x.type === "text" && !x.synthetic && !x.ignored)
|
|
||||||
if (!textPart) continue
|
|
||||||
|
|
||||||
result.push({
|
result.push({
|
||||||
id: message.id,
|
id: message.id,
|
||||||
text: textPart.text.replace(/\n/g, " ").slice(0, 200),
|
text: message.text.replace(/\n/g, " ").slice(0, 200),
|
||||||
time: formatTime(new Date(message.time.created)),
|
time: formatTime(new Date(message.time.created)),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -60,20 +60,21 @@ export const DialogFork: Component = () => {
|
|||||||
|
|
||||||
const sessionID = params.id
|
const sessionID = params.id
|
||||||
if (!sessionID) return
|
if (!sessionID) return
|
||||||
|
const restored = extractPromptFromParts(
|
||||||
|
normalizeSessionMessages(sessionID, data.session.message.list(sessionID)).parts.get(item.id) ?? [],
|
||||||
|
{
|
||||||
|
directory: location().directory,
|
||||||
|
attachmentName: language.t("common.attachment"),
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
const parts = sync().data.part[item.id] ?? []
|
serverSDK.api.session
|
||||||
const restored = extractPromptFromParts(parts, {
|
.fork({ sessionID, boundary: { type: "before", messageID: item.id } })
|
||||||
directory: sdk().directory,
|
|
||||||
attachmentName: language.t("common.attachment"),
|
|
||||||
})
|
|
||||||
const dir = base64Encode(sdk().directory)
|
|
||||||
|
|
||||||
sdk()
|
|
||||||
.api.session.fork({ sessionID, boundary: { type: "before", messageID: item.id } })
|
|
||||||
.then((forked) => {
|
.then((forked) => {
|
||||||
|
data.session.remember(forked)
|
||||||
dialog.close()
|
dialog.close()
|
||||||
prompt.set(restored, undefined, { dir, id: forked.id })
|
prompt.set(restored, undefined, { dir: base64Encode(location().directory), id: forked.id })
|
||||||
navigate(`/${dir}/session/${forked.id}`)
|
navigate(sessionHref(ServerConnection.key(serverSDK.server), forked.id))
|
||||||
})
|
})
|
||||||
.catch((err: unknown) => {
|
.catch((err: unknown) => {
|
||||||
const message = err instanceof Error ? err.message : String(err)
|
const message = err instanceof Error ? err.message : String(err)
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Component, createMemo, Show } from "solid-js"
|
import { Component, createMemo, Show } from "solid-js"
|
||||||
import { useSync } from "@/context/sync"
|
import { useData } from "@/context/server"
|
||||||
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { Dialog } from "@opencode-ai/ui/dialog"
|
import { Dialog } from "@opencode-ai/ui/dialog"
|
||||||
import { List } from "@opencode-ai/ui/list"
|
import { List } from "@opencode-ai/ui/list"
|
||||||
import { Switch } from "@opencode-ai/ui/switch"
|
import { Switch } from "@opencode-ai/ui/switch"
|
||||||
@@ -14,12 +15,13 @@ const statusLabels = {
|
|||||||
} as const
|
} as const
|
||||||
|
|
||||||
export const DialogSelectMcp: Component = () => {
|
export const DialogSelectMcp: Component = () => {
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
|
const sdk = useWorkspaceLocation()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
|
|
||||||
const items = createMemo(() =>
|
const items = createMemo(() =>
|
||||||
Object.entries(sync().data.mcp ?? {})
|
(data.location.mcp.server.list({ directory: sdk().directory }) ?? [])
|
||||||
.map(([name, status]) => ({ name, status: status.status }))
|
.map((server) => ({ name: server.name, status: server.status.status }))
|
||||||
.sort((a, b) => a.name.localeCompare(b.name)),
|
.sort((a, b) => a.name.localeCompare(b.name)),
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -47,7 +49,8 @@ export const DialogSelectMcp: Component = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{(i) => {
|
{(i) => {
|
||||||
const mcpStatus = () => sync().data.mcp[i.name]
|
const mcpStatus = () =>
|
||||||
|
data.location.mcp.server.list({ directory: sdk().directory })?.find((server) => server.name === i.name)?.status
|
||||||
const status = () => mcpStatus()?.status
|
const status = () => mcpStatus()?.status
|
||||||
const statusLabel = () => {
|
const statusLabel = () => {
|
||||||
const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
|
const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
|
||||||
|
|||||||
@@ -1,13 +1,12 @@
|
|||||||
import { Icon } from "@opencode-ai/ui/icon"
|
import { Icon } from "@opencode-ai/ui/icon"
|
||||||
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
|
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
|
||||||
import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
|
import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
|
||||||
import { type Component, For, Show, createMemo, createResource, createSignal } from "solid-js"
|
import { type Component, For, Show, createEffect, createMemo, createResource, createSignal } from "solid-js"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useMcpToggle } from "@/context/mcp"
|
import { useMcpToggle } from "@/context/mcp"
|
||||||
import { useSDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
import { useData } from "@/context/server"
|
||||||
import { useSync } from "@/context/sync"
|
|
||||||
import { ExternalLink } from "./external-link"
|
import { ExternalLink } from "./external-link"
|
||||||
|
|
||||||
type SkillItem = {
|
type SkillItem = {
|
||||||
@@ -15,7 +14,6 @@ type SkillItem = {
|
|||||||
location: string
|
location: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const pluginName = (item: string | [string, Record<string, unknown>]) => (typeof item === "string" ? item : item[0])
|
|
||||||
const skillKey = (item: SkillItem) => `${item.name}\n${item.location}`
|
const skillKey = (item: SkillItem) => `${item.name}\n${item.location}`
|
||||||
|
|
||||||
const ExtensionCard: Component<{ children: unknown }> = (props) => (
|
const ExtensionCard: Component<{ children: unknown }> = (props) => (
|
||||||
@@ -23,9 +21,8 @@ const ExtensionCard: Component<{ children: unknown }> = (props) => (
|
|||||||
)
|
)
|
||||||
|
|
||||||
const ExtensionRow: Component<{
|
const ExtensionRow: Component<{
|
||||||
icon: "mcp" | "cube" | "post-skill" | "code"
|
icon: "mcp" | "cube" | "post-skill"
|
||||||
name: string
|
name: string
|
||||||
status?: string
|
|
||||||
children?: unknown
|
children?: unknown
|
||||||
}> = (props) => (
|
}> = (props) => (
|
||||||
<div class="project-settings-extension-row">
|
<div class="project-settings-extension-row">
|
||||||
@@ -33,14 +30,6 @@ const ExtensionRow: Component<{
|
|||||||
<Icon name={props.icon} class="project-settings-extension-row-icon" />
|
<Icon name={props.icon} class="project-settings-extension-row-icon" />
|
||||||
<span class="project-settings-extension-row-name">{props.name}</span>
|
<span class="project-settings-extension-row-name">{props.name}</span>
|
||||||
</div>
|
</div>
|
||||||
<Show when={props.status}>
|
|
||||||
{(status) => (
|
|
||||||
<span class="project-settings-extension-row-status">
|
|
||||||
<span class="project-settings-extension-row-status-dot" />
|
|
||||||
{status()}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Show>
|
|
||||||
{props.children as any}
|
{props.children as any}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -75,56 +64,55 @@ const SharedSection: Component<{
|
|||||||
export const ProjectSettingsExtensions: Component = () => {
|
export const ProjectSettingsExtensions: Component = () => {
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const directorySDK = useSDK()
|
const directorySDK = useWorkspaceLocation()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
const sync = useSync()
|
const toggleMcp = useMcpToggle(() => directorySDK().directory)
|
||||||
const toggleMcp = useMcpToggle()
|
|
||||||
|
createEffect(() => {
|
||||||
|
if (serverSDK.connection.status() !== "connected") return
|
||||||
|
const ref = { directory: directorySDK().directory }
|
||||||
|
void Promise.all([
|
||||||
|
data.location.mcp.server.sync(),
|
||||||
|
data.location.skill.sync(),
|
||||||
|
data.location.mcp.server.sync(ref),
|
||||||
|
data.location.skill.sync(ref),
|
||||||
|
]).catch(() => undefined)
|
||||||
|
})
|
||||||
|
|
||||||
const [serverMcp] = createResource(
|
|
||||||
serverSDK,
|
|
||||||
(sdk) =>
|
|
||||||
sdk.api.mcp
|
|
||||||
.list()
|
|
||||||
.then((result) => Object.fromEntries(result.data.map((server) => [server.name, server.status])))
|
|
||||||
.catch(() => ({})),
|
|
||||||
{ initialValue: {} },
|
|
||||||
)
|
|
||||||
const globalMcpNames = createMemo(() =>
|
const globalMcpNames = createMemo(() =>
|
||||||
[...new Set([...Object.keys(serverSync.data.config.mcp ?? {}), ...Object.keys(serverMcp.latest)])].sort(),
|
[...new Set((data.location.mcp.server.list() ?? []).map((server) => server.name))].sort(),
|
||||||
)
|
)
|
||||||
const projectMcpNames = createMemo(() => {
|
const projectMcpNames = createMemo(() => {
|
||||||
const shared = new Set(globalMcpNames())
|
const shared = new Set(globalMcpNames())
|
||||||
const configured = Object.keys(sync().data.config.mcp ?? {}).filter((name) => !shared.has(name))
|
return (data.location.mcp.server.list({ directory: directorySDK().directory }) ?? [])
|
||||||
if (configured.length > 0) return configured.sort()
|
.map((server) => server.name)
|
||||||
return Object.keys(sync().data.mcp ?? {})
|
|
||||||
.filter((name) => !shared.has(name))
|
.filter((name) => !shared.has(name))
|
||||||
.sort()
|
.sort()
|
||||||
})
|
})
|
||||||
const mcpEnabled = (name: string) => sync().data.mcp?.[name]?.status === "connected"
|
const mcpEnabled = (name: string) =>
|
||||||
|
data.location.mcp.server.list({ directory: directorySDK().directory })?.find((server) => server.name === name)?.status
|
||||||
|
.status === "connected"
|
||||||
|
|
||||||
const globalPlugins = createMemo(() => (serverSync.data.config.plugin ?? []).map(pluginName))
|
const [globalPluginList] = createResource(
|
||||||
|
() => serverSDK.connection.status() === "connected",
|
||||||
|
() => serverSDK.api.plugin.list().then((result) => result.data),
|
||||||
|
)
|
||||||
|
const [projectPluginList] = createResource(
|
||||||
|
() => (serverSDK.connection.status() === "connected" ? directorySDK().directory : undefined),
|
||||||
|
(directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
|
||||||
|
)
|
||||||
|
const globalPlugins = createMemo(() => (globalPluginList.latest ?? []).map((item) => item.id))
|
||||||
const projectPlugins = createMemo(() => {
|
const projectPlugins = createMemo(() => {
|
||||||
const shared = new Set(globalPlugins())
|
const shared = new Set(globalPlugins())
|
||||||
return (sync().data.config.plugin ?? []).map(pluginName).filter((name) => !shared.has(name))
|
return (projectPluginList.latest ?? []).map((item) => item.id).filter((name) => !shared.has(name))
|
||||||
})
|
})
|
||||||
|
|
||||||
const [serverSkills] = createResource(
|
const serverSkills = createMemo(() => data.location.skill.list() ?? [])
|
||||||
serverSDK,
|
|
||||||
(sdk): Promise<SkillItem[]> =>
|
|
||||||
sdk.api.skill.list().then((result) => result.data.map((item) => ({ name: item.name, location: item.location }))),
|
|
||||||
{ initialValue: [] },
|
|
||||||
)
|
|
||||||
const [directorySkills] = createResource(
|
|
||||||
directorySDK,
|
|
||||||
(sdk): Promise<SkillItem[]> =>
|
|
||||||
sdk.api.skill
|
|
||||||
.list({ location: { directory: sdk.directory } })
|
|
||||||
.then((result) => result.data.map((item) => ({ name: item.name, location: item.location }))),
|
|
||||||
{ initialValue: [] },
|
|
||||||
)
|
|
||||||
const projectSkills = createMemo(() => {
|
const projectSkills = createMemo(() => {
|
||||||
const shared = new Set(serverSkills.latest.map(skillKey))
|
const shared = new Set(serverSkills().map(skillKey))
|
||||||
return directorySkills.latest.filter((item) => !shared.has(skillKey(item)))
|
return (data.location.skill.list({ directory: directorySDK().directory }) ?? []).filter(
|
||||||
|
(item) => !shared.has(skillKey(item)),
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
const mcpRows = (items: string[]) => (
|
const mcpRows = (items: string[]) => (
|
||||||
@@ -165,7 +153,7 @@ export const ProjectSettingsExtensions: Component = () => {
|
|||||||
<TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
|
<TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
|
||||||
<TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
|
<TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
|
||||||
<TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
|
<TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
|
||||||
<TabsV2.Trigger value="lsps">{language.t("project.settings.extensions.tab.lsps")}</TabsV2.Trigger>
|
{/* TODO: Restore LSP status when V2 exposes it. */}
|
||||||
</TabsV2.List>
|
</TabsV2.List>
|
||||||
|
|
||||||
<TabsV2.Content value="mcps">
|
<TabsV2.Content value="mcps">
|
||||||
@@ -205,33 +193,10 @@ export const ProjectSettingsExtensions: Component = () => {
|
|||||||
<Show when={projectSkills().length > 0}>
|
<Show when={projectSkills().length > 0}>
|
||||||
<ExtensionCard>{skillRows(projectSkills())}</ExtensionCard>
|
<ExtensionCard>{skillRows(projectSkills())}</ExtensionCard>
|
||||||
</Show>
|
</Show>
|
||||||
<SharedSection count={serverSkills.latest.length}>{skillRows(serverSkills.latest)}</SharedSection>
|
<SharedSection count={serverSkills().length}>{skillRows(serverSkills())}</SharedSection>
|
||||||
</div>
|
</div>
|
||||||
</TabsV2.Content>
|
</TabsV2.Content>
|
||||||
|
|
||||||
<TabsV2.Content value="lsps">
|
|
||||||
<div class="project-settings-extension-section">
|
|
||||||
<div class="project-settings-extension-section-header">
|
|
||||||
<span>{language.t("project.settings.extensions.lsp.detected")}</span>
|
|
||||||
<span>{language.t("project.settings.extensions.lsp.description")}</span>
|
|
||||||
</div>
|
|
||||||
<Show when={sync().data.lsp.length > 0}>
|
|
||||||
<ExtensionCard>
|
|
||||||
<For each={sync().data.lsp}>
|
|
||||||
{(item) => (
|
|
||||||
<ExtensionRow
|
|
||||||
icon="code"
|
|
||||||
name={item.name || item.id}
|
|
||||||
status={
|
|
||||||
item.status === "error" ? language.t("project.settings.extensions.setupRequired") : undefined
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</ExtensionCard>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</TabsV2.Content>
|
|
||||||
</TabsV2>
|
</TabsV2>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -22,8 +22,8 @@ import { useLayout } from "@/context/layout"
|
|||||||
import { usePermission } from "@/context/permission"
|
import { usePermission } from "@/context/permission"
|
||||||
import { type ImageAttachmentPart, usePrompt } from "@/context/prompt"
|
import { type ImageAttachmentPart, usePrompt } from "@/context/prompt"
|
||||||
import { usePlatform } from "@/context/platform"
|
import { usePlatform } from "@/context/platform"
|
||||||
import { useSDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { useSync } from "@/context/sync"
|
import { useData } from "@/context/server"
|
||||||
import { createSessionTabs } from "@/pages/session/helpers"
|
import { createSessionTabs } from "@/pages/session/helpers"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
import { PromptInputV2, type PromptInputV2Suggestion } from "@opencode-ai/session-ui/v2/prompt-input"
|
import { PromptInputV2, type PromptInputV2Suggestion } from "@opencode-ai/session-ui/v2/prompt-input"
|
||||||
@@ -40,7 +40,7 @@ export type PromptInputV2ComposerProps = {
|
|||||||
accentSubmit?: boolean
|
accentSubmit?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export type PromptInputV2ControllerProps = Omit<PromptInputProps, "class" | "submission">
|
export type PromptInputV2ControllerProps = Omit<PromptInputProps, "class">
|
||||||
export type PromptInputV2ComposerController = PromptInputV2Interaction & {
|
export type PromptInputV2ComposerController = PromptInputV2Interaction & {
|
||||||
readonly model: PromptInputProps["controls"]["model"]
|
readonly model: PromptInputProps["controls"]["model"]
|
||||||
}
|
}
|
||||||
@@ -81,8 +81,8 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function usePromptInputV2Controller(props: PromptInputV2ControllerProps): PromptInputV2ComposerController {
|
export function usePromptInputV2Controller(props: PromptInputV2ControllerProps): PromptInputV2ComposerController {
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
const files = useFile()
|
const files = useFile()
|
||||||
const layout = useLayout()
|
const layout = useLayout()
|
||||||
const comments = useComments()
|
const comments = useComments()
|
||||||
@@ -113,8 +113,8 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
|
|||||||
return [...result, path]
|
return [...result, path]
|
||||||
}, [])
|
}, [])
|
||||||
})
|
})
|
||||||
const info = createMemo(() => (props.controls.session.id ? sync().session.get(props.controls.session.id) : undefined))
|
const info = createMemo(() => (props.controls.session.id ? data.session.get(props.controls.session.id) : undefined))
|
||||||
const working = createMemo(() => sync().data.session_working(props.controls.session.id ?? ""))
|
const working = createMemo(() => data.session.status(props.controls.session.id ?? "") === "running")
|
||||||
const attachments = createMemo(() =>
|
const attachments = createMemo(() =>
|
||||||
prompt.current().filter((part): part is ImageAttachmentPart => part.type === "image"),
|
prompt.current().filter((part): part is ImageAttachmentPart => part.type === "image"),
|
||||||
)
|
)
|
||||||
@@ -197,37 +197,39 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
|
|||||||
if (!id) return permission.isAutoAcceptingDirectory(sdk().directory)
|
if (!id) return permission.isAutoAcceptingDirectory(sdk().directory)
|
||||||
return permission.isAutoAccepting(id, sdk().directory)
|
return permission.isAutoAccepting(id, sdk().directory)
|
||||||
})
|
})
|
||||||
const submission = createPromptSubmit({
|
const submission =
|
||||||
prompt,
|
props.submission ??
|
||||||
info,
|
createPromptSubmit({
|
||||||
imageAttachments: attachments,
|
prompt,
|
||||||
commentCount,
|
info,
|
||||||
autoAccept: accepting,
|
imageAttachments: attachments,
|
||||||
mode,
|
commentCount,
|
||||||
working,
|
autoAccept: accepting,
|
||||||
editor: () => editor,
|
mode,
|
||||||
queueScroll: () => requestAnimationFrame(() => editor?.scrollIntoView({ block: "nearest" })),
|
working,
|
||||||
promptLength,
|
editor: () => editor,
|
||||||
addToHistory: (value, mode) => controller.addHistory(value, mode),
|
queueScroll: () => requestAnimationFrame(() => editor?.scrollIntoView({ block: "nearest" })),
|
||||||
resetHistoryNavigation: () => controller.resetHistory(),
|
promptLength,
|
||||||
setMode: (next) => controller.dispatch({ type: next === "shell" ? "mode.shell" : "mode.normal" }),
|
addToHistory: (value, mode) => controller.addHistory(value, mode),
|
||||||
setPopover: (popover) => {
|
resetHistoryNavigation: () => controller.resetHistory(),
|
||||||
if (!popover) controller.dispatch({ type: "popover.close" })
|
setMode: (next) => controller.dispatch({ type: next === "shell" ? "mode.shell" : "mode.normal" }),
|
||||||
},
|
setPopover: (popover) => {
|
||||||
newSessionWorktree: () => props.newSessionWorktree,
|
if (!popover) controller.dispatch({ type: "popover.close" })
|
||||||
onNewSessionWorktreeReset: props.onNewSessionWorktreeReset,
|
},
|
||||||
shouldQueue: props.shouldQueue,
|
newSessionWorktree: () => props.newSessionWorktree,
|
||||||
onQueue: props.onQueue,
|
onNewSessionWorktreeReset: props.onNewSessionWorktreeReset,
|
||||||
onAbort: props.onAbort,
|
shouldQueue: props.shouldQueue,
|
||||||
onSubmit: props.onSubmit,
|
onQueue: props.onQueue,
|
||||||
model: props.controls.model.selection,
|
onAbort: props.onAbort,
|
||||||
})
|
onSubmit: props.onSubmit,
|
||||||
|
model: props.controls.model.selection,
|
||||||
|
})
|
||||||
|
|
||||||
const referenceDescription = (reference: ReferenceInfo) =>
|
const referenceDescription = (reference: ReferenceInfo) =>
|
||||||
reference.source.type === "git" ? reference.source.repository : reference.source.path
|
reference.source.type === "git" ? reference.source.repository : reference.source.path
|
||||||
const references = createMemo(() =>
|
const references = createMemo(() =>
|
||||||
sync()
|
(data.location.reference.list({ directory: sdk().directory }) ?? [])
|
||||||
.data.reference.filter((reference) => !reference.hidden)
|
.filter((reference) => !reference.hidden)
|
||||||
.map((reference) => ({
|
.map((reference) => ({
|
||||||
id: `reference:${reference.name}`,
|
id: `reference:${reference.name}`,
|
||||||
kind: "reference" as const,
|
kind: "reference" as const,
|
||||||
@@ -246,7 +248,7 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
|
|||||||
})),
|
})),
|
||||||
)
|
)
|
||||||
const resources = createMemo(() =>
|
const resources = createMemo(() =>
|
||||||
Object.values(sync().data.mcp_resource).map((resource) => ({
|
(data.location.mcp.resource.list({ directory: sdk().directory }) ?? []).map((resource) => ({
|
||||||
id: `resource:${resource.server}:${resource.uri}`,
|
id: `resource:${resource.server}:${resource.uri}`,
|
||||||
kind: "resource" as const,
|
kind: "resource" as const,
|
||||||
label: `@${resource.name}`,
|
label: `@${resource.name}`,
|
||||||
@@ -292,7 +294,7 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
|
|||||||
})),
|
})),
|
||||||
])
|
])
|
||||||
const slashCommands = createMemo(() => [
|
const slashCommands = createMemo(() => [
|
||||||
...sync().data.command.map((item) => ({
|
...(data.location.command.list({ directory: sdk().directory }) ?? []).map((item) => ({
|
||||||
id: `custom.${item.name}`,
|
id: `custom.${item.name}`,
|
||||||
trigger: item.name,
|
trigger: item.name,
|
||||||
title: item.name,
|
title: item.name,
|
||||||
@@ -352,7 +354,7 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
|
|||||||
dialog.show(() => <ImagePreview src={attachment.blob.url} alt={attachment.filename} />),
|
dialog.show(() => <ImagePreview src={attachment.blob.url} alt={attachment.filename} />),
|
||||||
openContext(key) {
|
openContext(key) {
|
||||||
const item = controller.contextItem(key)
|
const item = controller.contextItem(key)
|
||||||
if (item) openComment(item, props, sync, layout, files, comments)
|
if (item) openComment(item, props, layout, files, comments)
|
||||||
},
|
},
|
||||||
onEditor(element) {
|
onEditor(element) {
|
||||||
editor = element as HTMLDivElement
|
editor = element as HTMLDivElement
|
||||||
@@ -555,7 +557,6 @@ function PromptInputV2ModelControl(props: {
|
|||||||
function openComment(
|
function openComment(
|
||||||
item: { path: string; commentID?: string; commentOrigin?: "review" | "file" },
|
item: { path: string; commentID?: string; commentOrigin?: "review" | "file" },
|
||||||
props: PromptInputV2ControllerProps,
|
props: PromptInputV2ControllerProps,
|
||||||
sync: ReturnType<typeof useSync>,
|
|
||||||
layout: ReturnType<typeof useLayout>,
|
layout: ReturnType<typeof useLayout>,
|
||||||
files: ReturnType<typeof useFile>,
|
files: ReturnType<typeof useFile>,
|
||||||
comments: ReturnType<typeof useComments>,
|
comments: ReturnType<typeof useComments>,
|
||||||
@@ -573,9 +574,7 @@ function openComment(
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const diffs = props.controls.session.id ? sync().data.session_diff[props.controls.session.id] : undefined
|
const review = item.commentOrigin === "review"
|
||||||
const review =
|
|
||||||
item.commentOrigin === "review" || (item.commentOrigin !== "file" && diffs?.some((diff) => diff.file === item.path))
|
|
||||||
if (!props.controls.session.reviewPanel.opened()) props.controls.session.reviewPanel.open()
|
if (!props.controls.session.reviewPanel.opened()) props.controls.session.reviewPanel.open()
|
||||||
if (review) {
|
if (review) {
|
||||||
layout.fileTree.setTab("changes")
|
layout.fileTree.setTab("changes")
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
import { createStore } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
import type { Todo } from "@/types"
|
|
||||||
import { createPromptState } from "@/context/prompt"
|
import { createPromptState } from "@/context/prompt"
|
||||||
import { SessionComposerRegion, createSessionComposerRegionController } from "@/pages/session/composer"
|
|
||||||
import { createPromptInputHistory, PromptInput } from "./prompt-input"
|
import { createPromptInputHistory, PromptInput } from "./prompt-input"
|
||||||
|
|
||||||
function createPromptInputStoryRuntime() {
|
function createPromptInputStoryRuntime() {
|
||||||
@@ -111,93 +109,6 @@ function PromptInputExample() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const todos: Todo[] = [
|
|
||||||
{ id: "todo-1", content: "Inspect the session composer animation", status: "completed" },
|
|
||||||
{ id: "todo-2", content: "Keep the dock settled on initial render", status: "in_progress" },
|
|
||||||
{ id: "todo-3", content: "Verify session navigation behavior", status: "pending" },
|
|
||||||
]
|
|
||||||
|
|
||||||
function PromptInputWithOpenDock() {
|
|
||||||
const input = createPromptInputStoryRuntime()
|
|
||||||
const [controls, setControls] = createStore({
|
|
||||||
agent: "build",
|
|
||||||
activeTab: undefined as string | undefined,
|
|
||||||
todoCollapsed: false,
|
|
||||||
})
|
|
||||||
const inputControls = {
|
|
||||||
agents: {
|
|
||||||
available: [],
|
|
||||||
options: ["build"],
|
|
||||||
get current() {
|
|
||||||
return controls.agent
|
|
||||||
},
|
|
||||||
loading: false,
|
|
||||||
visible: true,
|
|
||||||
select: (agent?: string) => setControls("agent", agent ?? "build"),
|
|
||||||
},
|
|
||||||
model: {
|
|
||||||
selection: {
|
|
||||||
current: () => ({ id: "claude-3-7-sonnet", name: "Claude 3.7 Sonnet", provider: { id: "anthropic" } }),
|
|
||||||
variant: { list: () => [], current: () => undefined, set: () => {} },
|
|
||||||
},
|
|
||||||
paid: true,
|
|
||||||
loading: false,
|
|
||||||
},
|
|
||||||
session: {
|
|
||||||
id: "story-session",
|
|
||||||
tabs: {
|
|
||||||
active: () => controls.activeTab,
|
|
||||||
all: () => [],
|
|
||||||
open: () => {},
|
|
||||||
setActive: (tab: string) => setControls("activeTab", tab),
|
|
||||||
},
|
|
||||||
reviewPanel: { opened: () => false, open: () => {} },
|
|
||||||
},
|
|
||||||
}
|
|
||||||
const state = {
|
|
||||||
blocked: () => false,
|
|
||||||
questionRequest: () => undefined,
|
|
||||||
permissionRequest: () => undefined,
|
|
||||||
permissionResponding: () => false,
|
|
||||||
decide: () => {},
|
|
||||||
todos: () => todos,
|
|
||||||
dock: () => true,
|
|
||||||
closing: () => false,
|
|
||||||
opening: () => false,
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<SessionComposerRegion
|
|
||||||
controller={createSessionComposerRegionController({
|
|
||||||
state,
|
|
||||||
sessionKey: () => "story-session",
|
|
||||||
sessionID: () => "story-session",
|
|
||||||
prompt: input.state,
|
|
||||||
ready: () => true,
|
|
||||||
centered: () => false,
|
|
||||||
todo: {
|
|
||||||
collapsed: () => controls.todoCollapsed,
|
|
||||||
onToggle: () => setControls("todoCollapsed", (collapsed) => !collapsed),
|
|
||||||
},
|
|
||||||
followup: () => undefined,
|
|
||||||
revert: () => undefined,
|
|
||||||
onResponseSubmit: () => {},
|
|
||||||
openParent: () => {},
|
|
||||||
setPromptRef: () => {},
|
|
||||||
setDockRef: () => {},
|
|
||||||
})}
|
|
||||||
promptInput={
|
|
||||||
<PromptInput
|
|
||||||
controls={inputControls}
|
|
||||||
{...input}
|
|
||||||
ref={() => {}}
|
|
||||||
newSessionWorktree=""
|
|
||||||
onNewSessionWorktreeReset={() => {}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "App/PromptInput",
|
title: "App/PromptInput",
|
||||||
id: "app-prompt-input",
|
id: "app-prompt-input",
|
||||||
@@ -212,12 +123,3 @@ export const Basic = {
|
|||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockAlreadyOpen = {
|
|
||||||
render: () => (
|
|
||||||
<div class="pt-10">
|
|
||||||
<h1 class="mb-4">Prompt Input with open Todo dock</h1>
|
|
||||||
<PromptInputWithOpenDock />
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
}
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,98 +0,0 @@
|
|||||||
import { Component, For, Show } from "solid-js"
|
|
||||||
import { Dynamic } from "solid-js/web"
|
|
||||||
import { FileIcon } from "@opencode-ai/ui/file-icon"
|
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
|
||||||
import { Tooltip } from "@opencode-ai/ui/tooltip"
|
|
||||||
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
|
|
||||||
import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/core/util/path"
|
|
||||||
import type { ContextItem } from "@/context/prompt"
|
|
||||||
|
|
||||||
type PromptContextItem = ContextItem & { key: string }
|
|
||||||
|
|
||||||
type ContextItemsProps = {
|
|
||||||
items: PromptContextItem[]
|
|
||||||
active: (item: PromptContextItem) => boolean
|
|
||||||
openComment: (item: PromptContextItem) => void
|
|
||||||
remove: (item: PromptContextItem) => void
|
|
||||||
newLayoutDesigns: boolean
|
|
||||||
t: (key: string) => string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const PromptContextItems: Component<ContextItemsProps> = (props) => {
|
|
||||||
return (
|
|
||||||
<Show when={props.items.length > 0}>
|
|
||||||
<div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
|
|
||||||
<For each={props.items}>
|
|
||||||
{(item) => {
|
|
||||||
const directory = getDirectory(item.path)
|
|
||||||
const filename = getFilename(item.path)
|
|
||||||
const label = getFilenameTruncated(item.path, 14)
|
|
||||||
const selected = props.active(item)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dynamic
|
|
||||||
component={props.newLayoutDesigns ? TooltipV2 : Tooltip}
|
|
||||||
value={
|
|
||||||
<span class="flex max-w-[300px]">
|
|
||||||
<span
|
|
||||||
classList={{
|
|
||||||
"truncate-start [unicode-bidi:plaintext] min-w-0": true,
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-text-invert-base": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{directory}
|
|
||||||
</span>
|
|
||||||
<span class="shrink-0">{filename}</span>
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
placement="top"
|
|
||||||
openDelay={800}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
classList={{
|
|
||||||
"group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
|
|
||||||
"hover:bg-surface-interactive-weak": !!item.commentID && !selected,
|
|
||||||
"bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover": selected,
|
|
||||||
"bg-background-stronger": !selected,
|
|
||||||
}}
|
|
||||||
onClick={() => props.openComment(item)}
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-1.5">
|
|
||||||
<FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
|
|
||||||
<div class="flex items-center text-[12px] min-w-0 font-medium leading-5">
|
|
||||||
<span class="text-text-strong whitespace-nowrap">{label}</span>
|
|
||||||
<Show when={item.selection}>
|
|
||||||
{(sel) => (
|
|
||||||
<span class="text-text-weak whitespace-nowrap shrink-0">
|
|
||||||
{sel().startLine === sel().endLine
|
|
||||||
? `:${sel().startLine}`
|
|
||||||
: `:${sel().startLine}-${sel().endLine}`}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
<IconButton
|
|
||||||
type="button"
|
|
||||||
icon="close-small"
|
|
||||||
variant="ghost"
|
|
||||||
class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
props.remove(item)
|
|
||||||
}}
|
|
||||||
aria-label={props.t("prompt.context.removeFile")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Show when={item.comment}>
|
|
||||||
{(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</Dynamic>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Component, Show } from "solid-js"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
|
||||||
|
|
||||||
type PromptDragOverlayProps = {
|
|
||||||
type: "image" | "@mention" | null
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const kindToIcon = {
|
|
||||||
image: "photo",
|
|
||||||
"@mention": "link",
|
|
||||||
} as const
|
|
||||||
|
|
||||||
export const PromptDragOverlay: Component<PromptDragOverlayProps> = (props) => {
|
|
||||||
return (
|
|
||||||
<Show when={props.type !== null}>
|
|
||||||
<div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised-stronger-non-alpha/90 pointer-events-none">
|
|
||||||
<div class="flex flex-col items-center gap-2 text-text-weak">
|
|
||||||
<Icon name={props.type ? kindToIcon[props.type] : kindToIcon.image} class="size-8" />
|
|
||||||
<span class="text-14-regular">{props.label}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
@keyframes prompt-attachments-fade-left {
|
|
||||||
from {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes prompt-attachments-fade-right {
|
|
||||||
from {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-slot="prompt-attachments"] {
|
|
||||||
timeline-scope: --prompt-attachments-scroll;
|
|
||||||
|
|
||||||
[data-slot^="prompt-attachments-fade-"] {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (animation-timeline: --prompt-attachments-scroll) and (timeline-scope: --prompt-attachments-scroll) {
|
|
||||||
[data-slot="prompt-attachments-scroll"] {
|
|
||||||
scroll-timeline: --prompt-attachments-scroll x;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-slot="prompt-attachments-fade-left"] {
|
|
||||||
animation: prompt-attachments-fade-left linear both;
|
|
||||||
animation-timeline: --prompt-attachments-scroll;
|
|
||||||
animation-range: 0 0.1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-slot="prompt-attachments-fade-right"] {
|
|
||||||
animation: prompt-attachments-fade-right linear both;
|
|
||||||
animation-timeline: --prompt-attachments-scroll;
|
|
||||||
animation-range: calc(100% - 1.1px) calc(100% - 1px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,169 +0,0 @@
|
|||||||
import { Component, For, Show } from "solid-js"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
|
||||||
import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
|
|
||||||
import { Tooltip } from "@opencode-ai/ui/tooltip"
|
|
||||||
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
|
|
||||||
import { AttachmentCardV2 } from "@opencode-ai/session-ui/v2/attachment-card-v2"
|
|
||||||
import { CommentCardV2 } from "@opencode-ai/session-ui/v2/comment-card-v2"
|
|
||||||
import { typeLabel } from "@opencode-ai/session-ui/message-file"
|
|
||||||
import type { ContextItem, ImageAttachmentPart } from "@/context/prompt"
|
|
||||||
import "./image-attachments.css"
|
|
||||||
|
|
||||||
type PromptCommentItem = ContextItem & { key: string }
|
|
||||||
|
|
||||||
type PromptImageAttachmentsProps = {
|
|
||||||
attachments: ImageAttachmentPart[]
|
|
||||||
onOpen: (attachment: ImageAttachmentPart) => void
|
|
||||||
onRemove: (id: string) => void
|
|
||||||
removeLabel: string
|
|
||||||
fileLabel: string
|
|
||||||
newLayoutDesigns: boolean
|
|
||||||
comments?: PromptCommentItem[]
|
|
||||||
commentActive?: (item: PromptCommentItem) => boolean
|
|
||||||
onOpenComment?: (item: PromptCommentItem) => void
|
|
||||||
onRemoveComment?: (item: PromptCommentItem) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const fallbackClass = "size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base"
|
|
||||||
const imageClass =
|
|
||||||
"size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
|
|
||||||
const imageClassV2 = "w-[58px] h-[46px] rounded-[6px] object-cover"
|
|
||||||
// inset box-shadows do not paint over <img> content, so the hairline is a separate overlay
|
|
||||||
const imageHairlineClassV2 =
|
|
||||||
"absolute inset-0 rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-base)] pointer-events-none"
|
|
||||||
const removeClass =
|
|
||||||
"absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
|
|
||||||
const removeClassV2 =
|
|
||||||
"absolute -top-1 -right-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
|
||||||
const nameClass = "absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md"
|
|
||||||
|
|
||||||
export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
|
|
||||||
return (
|
|
||||||
<Show when={props.attachments.length > 0 || (props.newLayoutDesigns && (props.comments?.length ?? 0) > 0)}>
|
|
||||||
<div data-slot="prompt-attachments" classList={{ relative: props.newLayoutDesigns }}>
|
|
||||||
<div
|
|
||||||
data-slot="prompt-attachments-scroll"
|
|
||||||
classList={{
|
|
||||||
"flex gap-2": true,
|
|
||||||
"flex-nowrap overflow-x-auto no-scrollbar px-2 pt-2 pb-1": props.newLayoutDesigns,
|
|
||||||
"flex-wrap px-3 pt-3": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Show when={props.newLayoutDesigns}>
|
|
||||||
<For each={props.comments ?? []}>
|
|
||||||
{(item) => (
|
|
||||||
<div class="relative group shrink-0">
|
|
||||||
<TooltipV2
|
|
||||||
value={item.comment}
|
|
||||||
placement="top"
|
|
||||||
openDelay={800}
|
|
||||||
contentClass="max-w-[300px] break-words"
|
|
||||||
>
|
|
||||||
<CommentCardV2
|
|
||||||
comment={item.comment ?? ""}
|
|
||||||
path={item.path}
|
|
||||||
selection={item.selection}
|
|
||||||
active={props.commentActive?.(item)}
|
|
||||||
onClick={() => props.onOpenComment?.(item)}
|
|
||||||
/>
|
|
||||||
</TooltipV2>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => props.onRemoveComment?.(item)}
|
|
||||||
class={removeClassV2}
|
|
||||||
aria-label={props.removeLabel}
|
|
||||||
>
|
|
||||||
<IconV2 name="outline-xmark" class="text-v2-icon-icon-contrast" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
<For each={props.attachments}>
|
|
||||||
{(attachment) => {
|
|
||||||
const image = attachment.mime.startsWith("image/")
|
|
||||||
const media = () => (
|
|
||||||
<Show
|
|
||||||
when={image}
|
|
||||||
fallback={
|
|
||||||
<Show
|
|
||||||
when={props.newLayoutDesigns}
|
|
||||||
fallback={
|
|
||||||
<div class={fallbackClass}>
|
|
||||||
<Icon name="folder" class="size-6 text-text-weak" />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<AttachmentCardV2 title={attachment.filename}>
|
|
||||||
{typeLabel(attachment.filename, attachment.mime, props.fileLabel)}
|
|
||||||
</AttachmentCardV2>
|
|
||||||
</Show>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={attachment.blob.url}
|
|
||||||
alt={attachment.filename}
|
|
||||||
class={props.newLayoutDesigns ? imageClassV2 : imageClass}
|
|
||||||
onClick={() => props.onOpen(attachment)}
|
|
||||||
/>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
const name = () => (
|
|
||||||
<div class={nameClass}>
|
|
||||||
<span class="text-10-regular text-white truncate block">{attachment.filename}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
const remove = () => (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => props.onRemove(attachment.id)}
|
|
||||||
class={props.newLayoutDesigns ? removeClassV2 : removeClass}
|
|
||||||
aria-label={props.removeLabel}
|
|
||||||
>
|
|
||||||
<Show when={props.newLayoutDesigns} fallback={<Icon name="close" class="size-3 text-text-weak" />}>
|
|
||||||
<IconV2 name="outline-xmark" class="text-v2-icon-icon-contrast" />
|
|
||||||
</Show>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
// v2 keeps the remove button outside the tooltip trigger so hovering it dismisses the tooltip
|
|
||||||
return (
|
|
||||||
<Show
|
|
||||||
when={props.newLayoutDesigns}
|
|
||||||
fallback={
|
|
||||||
<Tooltip value={attachment.filename} placement="top" contentClass="break-all">
|
|
||||||
<div class="relative group">
|
|
||||||
{media()}
|
|
||||||
{name()}
|
|
||||||
{remove()}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div class="relative group shrink-0">
|
|
||||||
<TooltipV2 value={attachment.filename} placement="top" contentClass="break-all">
|
|
||||||
{media()}
|
|
||||||
<Show when={image}>
|
|
||||||
<div class={imageHairlineClassV2} />
|
|
||||||
</Show>
|
|
||||||
</TooltipV2>
|
|
||||||
{remove()}
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
<Show when={props.newLayoutDesigns}>
|
|
||||||
<div
|
|
||||||
data-slot="prompt-attachments-fade-left"
|
|
||||||
class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-base),transparent)]"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
data-slot="prompt-attachments-fade-right"
|
|
||||||
class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-base),transparent)]"
|
|
||||||
/>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,376 +0,0 @@
|
|||||||
import { Component, For, Match, Show, Switch } from "solid-js"
|
|
||||||
import { FileIcon } from "@opencode-ai/ui/file-icon"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
|
||||||
import { Tag } from "@opencode-ai/ui/v2/badge-v2"
|
|
||||||
import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
|
|
||||||
import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
|
|
||||||
|
|
||||||
export type AtOption =
|
|
||||||
| { type: "agent"; name: string; display: string }
|
|
||||||
| {
|
|
||||||
type: "resource"
|
|
||||||
name: string
|
|
||||||
uri: string
|
|
||||||
client: string
|
|
||||||
display: string
|
|
||||||
description?: string
|
|
||||||
mime?: string
|
|
||||||
}
|
|
||||||
| { type: "reference"; name: string; path: string; display: string; description: string }
|
|
||||||
| { type: "file"; path: string; display: string; recent?: boolean }
|
|
||||||
|
|
||||||
export interface SlashCommand {
|
|
||||||
id: string
|
|
||||||
trigger: string
|
|
||||||
title: string
|
|
||||||
description?: string
|
|
||||||
keybind?: string
|
|
||||||
type: "builtin" | "custom"
|
|
||||||
source?: "command" | "mcp" | "skill"
|
|
||||||
}
|
|
||||||
|
|
||||||
type PromptPopoverProps = {
|
|
||||||
popover: "at" | "slash" | null
|
|
||||||
setSlashPopoverRef: (el: HTMLDivElement) => void
|
|
||||||
atFlat: AtOption[]
|
|
||||||
atActive?: string
|
|
||||||
atKey: (item: AtOption) => string
|
|
||||||
setAtActive: (id: string) => void
|
|
||||||
onAtSelect: (item: AtOption) => void
|
|
||||||
slashFlat: SlashCommand[]
|
|
||||||
slashActive?: string
|
|
||||||
setSlashActive: (id: string) => void
|
|
||||||
onSlashSelect: (item: SlashCommand) => void
|
|
||||||
slashMenu: boolean
|
|
||||||
slashMenuQuery: string
|
|
||||||
onSlashMenuInput: (value: string) => void
|
|
||||||
onSlashMenuKeyDown: (event: KeyboardEvent) => void
|
|
||||||
commandKeybind: (id: string) => string | undefined
|
|
||||||
commandKeybindParts: (id: string) => string[]
|
|
||||||
newLayoutDesigns: boolean
|
|
||||||
t: (key: string) => string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const PromptPopover: Component<PromptPopoverProps> = (props) => {
|
|
||||||
return (
|
|
||||||
<Show when={props.popover}>
|
|
||||||
<div
|
|
||||||
ref={(el) => {
|
|
||||||
if (props.popover === "slash") props.setSlashPopoverRef(el)
|
|
||||||
}}
|
|
||||||
class="absolute inset-x-0 -top-2 -translate-y-full origin-bottom-left max-h-80 min-h-10
|
|
||||||
overflow-auto no-scrollbar flex flex-col p-2"
|
|
||||||
classList={{
|
|
||||||
"z-[70] rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]": props.newLayoutDesigns,
|
|
||||||
"rounded-[12px] bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]":
|
|
||||||
!props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
onMouseDown={(e) => e.preventDefault()}
|
|
||||||
>
|
|
||||||
<Switch>
|
|
||||||
<Match when={props.popover === "at"}>
|
|
||||||
<Show
|
|
||||||
when={props.atFlat.length > 0}
|
|
||||||
fallback={
|
|
||||||
<div
|
|
||||||
class="px-2 py-1"
|
|
||||||
classList={{
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-text-weak": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props.t("prompt.popover.emptyResults")}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<For each={props.atFlat.slice(0, 10)}>
|
|
||||||
{(item) => {
|
|
||||||
const key = props.atKey(item)
|
|
||||||
|
|
||||||
if (item.type === "agent") {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
class="w-full flex items-center gap-x-2 px-2 py-0.5"
|
|
||||||
classList={{
|
|
||||||
"rounded-[4px]": props.newLayoutDesigns,
|
|
||||||
"rounded-md": !props.newLayoutDesigns,
|
|
||||||
"bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.atActive === key,
|
|
||||||
"bg-surface-raised-base-hover": !props.newLayoutDesigns && props.atActive === key,
|
|
||||||
}}
|
|
||||||
onClick={() => props.onAtSelect(item)}
|
|
||||||
onPointerMove={() => props.setAtActive(key)}
|
|
||||||
>
|
|
||||||
<Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
|
|
||||||
<span
|
|
||||||
class="whitespace-nowrap"
|
|
||||||
classList={{
|
|
||||||
"text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
|
|
||||||
props.newLayoutDesigns,
|
|
||||||
"text-v2-text-text-base": props.newLayoutDesigns,
|
|
||||||
"text-14-regular": !props.newLayoutDesigns,
|
|
||||||
"text-text-strong": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
@{item.name}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.type === "resource") {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
class="w-full flex items-center gap-x-2 px-2 py-0.5"
|
|
||||||
classList={{
|
|
||||||
"rounded-[4px]": props.newLayoutDesigns,
|
|
||||||
"rounded-md": !props.newLayoutDesigns,
|
|
||||||
"bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.atActive === key,
|
|
||||||
"bg-surface-raised-base-hover": !props.newLayoutDesigns && props.atActive === key,
|
|
||||||
}}
|
|
||||||
onClick={() => props.onAtSelect(item)}
|
|
||||||
onPointerMove={() => props.setAtActive(key)}
|
|
||||||
>
|
|
||||||
<FileIcon node={{ path: item.uri, type: "file" }} class="shrink-0 size-4" />
|
|
||||||
<div
|
|
||||||
class="flex items-center min-w-0"
|
|
||||||
classList={{
|
|
||||||
"text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
|
|
||||||
props.newLayoutDesigns,
|
|
||||||
"text-14-regular": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="text-text-strong whitespace-nowrap"
|
|
||||||
classList={{ "text-v2-text-text-base": props.newLayoutDesigns }}
|
|
||||||
>
|
|
||||||
@{item.name}
|
|
||||||
</span>
|
|
||||||
<Show when={item.description}>
|
|
||||||
{(description) => (
|
|
||||||
<span
|
|
||||||
class="whitespace-nowrap truncate min-w-0 ml-2"
|
|
||||||
classList={{
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-text-weak": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{description()}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.type === "reference") {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
class="w-full flex items-center gap-x-2 px-2 py-0.5"
|
|
||||||
classList={{
|
|
||||||
"rounded-[4px]": props.newLayoutDesigns,
|
|
||||||
"rounded-md": !props.newLayoutDesigns,
|
|
||||||
"bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.atActive === key,
|
|
||||||
"bg-surface-raised-base-hover": !props.newLayoutDesigns && props.atActive === key,
|
|
||||||
}}
|
|
||||||
onClick={() => props.onAtSelect(item)}
|
|
||||||
onPointerMove={() => props.setAtActive(key)}
|
|
||||||
>
|
|
||||||
<FileIcon node={{ path: item.path, type: "directory" }} class="shrink-0 size-4" />
|
|
||||||
<div
|
|
||||||
class="flex items-center min-w-0"
|
|
||||||
classList={{
|
|
||||||
"text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
|
|
||||||
props.newLayoutDesigns,
|
|
||||||
"text-14-regular": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="text-text-strong whitespace-nowrap"
|
|
||||||
classList={{ "text-v2-text-text-base": props.newLayoutDesigns }}
|
|
||||||
>
|
|
||||||
@{item.name}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="whitespace-nowrap truncate min-w-0 ml-2"
|
|
||||||
classList={{
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-text-weak": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.description}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const isDirectory = item.path.endsWith("/")
|
|
||||||
const directory = isDirectory ? item.path : getDirectory(item.path)
|
|
||||||
const filename = isDirectory ? "" : getFilename(item.path)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
class="w-full flex items-center gap-x-2 px-2 py-0.5"
|
|
||||||
classList={{
|
|
||||||
"rounded-[4px]": props.newLayoutDesigns,
|
|
||||||
"rounded-md": !props.newLayoutDesigns,
|
|
||||||
"bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.atActive === key,
|
|
||||||
"bg-surface-raised-base-hover": !props.newLayoutDesigns && props.atActive === key,
|
|
||||||
}}
|
|
||||||
onClick={() => props.onAtSelect(item)}
|
|
||||||
onPointerMove={() => props.setAtActive(key)}
|
|
||||||
>
|
|
||||||
<FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
|
|
||||||
<div
|
|
||||||
class="flex items-center min-w-0"
|
|
||||||
classList={{
|
|
||||||
"text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
|
|
||||||
props.newLayoutDesigns,
|
|
||||||
"text-14-regular": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="whitespace-nowrap truncate min-w-0"
|
|
||||||
classList={{
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-text-weak": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{directory}
|
|
||||||
</span>
|
|
||||||
<Show when={!isDirectory}>
|
|
||||||
<span
|
|
||||||
class="whitespace-nowrap"
|
|
||||||
classList={{
|
|
||||||
"text-v2-text-text-base": props.newLayoutDesigns,
|
|
||||||
"text-text-strong": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{filename}
|
|
||||||
</span>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</Match>
|
|
||||||
<Match when={props.popover === "slash"}>
|
|
||||||
<Show when={props.slashMenu}>
|
|
||||||
<div class="px-2 py-1">
|
|
||||||
<input
|
|
||||||
ref={(el) => requestAnimationFrame(() => el.focus())}
|
|
||||||
value={props.slashMenuQuery}
|
|
||||||
onInput={(event) => props.onSlashMenuInput(event.currentTarget.value)}
|
|
||||||
onKeyDown={props.onSlashMenuKeyDown}
|
|
||||||
onMouseDown={(event) => event.stopPropagation()}
|
|
||||||
aria-label={props.t("prompt.menu.commands")}
|
|
||||||
placeholder="/"
|
|
||||||
class="w-full bg-transparent outline-none text-[13px] leading-5 text-v2-text-text-base placeholder:text-v2-text-text-faint"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
<Show
|
|
||||||
when={props.slashFlat.length > 0}
|
|
||||||
fallback={
|
|
||||||
<div
|
|
||||||
class="px-2 py-1"
|
|
||||||
classList={{
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-text-weak": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props.t("prompt.popover.emptyCommands")}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<For each={props.slashFlat}>
|
|
||||||
{(cmd) => {
|
|
||||||
const keybind = () => props.commandKeybind(cmd.id)
|
|
||||||
const keybindParts = () => props.commandKeybindParts(cmd.id)
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
data-slash-id={cmd.id}
|
|
||||||
classList={{
|
|
||||||
"w-full flex items-center justify-between gap-4 px-2 py-1": true,
|
|
||||||
"rounded-[4px] scroll-my-2": props.newLayoutDesigns,
|
|
||||||
"rounded-md": !props.newLayoutDesigns,
|
|
||||||
"bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.slashActive === cmd.id,
|
|
||||||
"bg-surface-raised-base-hover": !props.newLayoutDesigns && props.slashActive === cmd.id,
|
|
||||||
}}
|
|
||||||
onClick={() => props.onSlashSelect(cmd)}
|
|
||||||
onPointerMove={() => props.setSlashActive(cmd.id)}
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
|
||||||
<span
|
|
||||||
class="whitespace-nowrap"
|
|
||||||
classList={{
|
|
||||||
"text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
|
|
||||||
props.newLayoutDesigns,
|
|
||||||
"text-v2-text-text-base": props.newLayoutDesigns,
|
|
||||||
"text-14-regular": !props.newLayoutDesigns,
|
|
||||||
"text-text-strong": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
/{cmd.trigger}
|
|
||||||
</span>
|
|
||||||
<Show when={cmd.description}>
|
|
||||||
<span
|
|
||||||
class="truncate"
|
|
||||||
classList={{
|
|
||||||
"text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
|
|
||||||
props.newLayoutDesigns,
|
|
||||||
"text-v2-text-text-muted": props.newLayoutDesigns,
|
|
||||||
"text-14-regular": !props.newLayoutDesigns,
|
|
||||||
"text-text-weak": !props.newLayoutDesigns,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{cmd.description}
|
|
||||||
</span>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 shrink-0">
|
|
||||||
<Show when={cmd.type === "custom" && cmd.source !== "command"}>
|
|
||||||
<Show
|
|
||||||
when={props.newLayoutDesigns}
|
|
||||||
fallback={
|
|
||||||
<span class="text-11-regular px-1.5 py-0.5 rounded bg-surface-base text-text-subtle">
|
|
||||||
{cmd.source === "skill"
|
|
||||||
? props.t("prompt.slash.badge.skill")
|
|
||||||
: cmd.source === "mcp"
|
|
||||||
? props.t("prompt.slash.badge.mcp")
|
|
||||||
: props.t("prompt.slash.badge.custom")}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Tag>
|
|
||||||
{cmd.source === "skill"
|
|
||||||
? props.t("prompt.slash.badge.skill")
|
|
||||||
: cmd.source === "mcp"
|
|
||||||
? props.t("prompt.slash.badge.mcp")
|
|
||||||
: props.t("prompt.slash.badge.custom")}
|
|
||||||
</Tag>
|
|
||||||
</Show>
|
|
||||||
</Show>
|
|
||||||
<Show when={props.newLayoutDesigns ? keybindParts().length > 0 : keybind()}>
|
|
||||||
<Show
|
|
||||||
when={props.newLayoutDesigns}
|
|
||||||
fallback={<span class="text-12-regular text-text-subtle">{keybind()}</span>}
|
|
||||||
>
|
|
||||||
<KeybindV2 keys={keybindParts()} variant="neutral" />
|
|
||||||
</Show>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</Match>
|
|
||||||
</Switch>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -11,18 +11,6 @@ type SessionCreateInput = {
|
|||||||
model?: { id: string; providerID: string; variant?: string }
|
model?: { id: string; providerID: string; variant?: string }
|
||||||
location?: { directory: string }
|
location?: { directory: string }
|
||||||
}
|
}
|
||||||
const admitted: Array<{
|
|
||||||
directory?: string
|
|
||||||
sessionID: string
|
|
||||||
messageID: string
|
|
||||||
text: string
|
|
||||||
displayText: string
|
|
||||||
agent: string
|
|
||||||
model: { providerID: string; modelID: string; variant?: string }
|
|
||||||
comments: unknown[]
|
|
||||||
}> = []
|
|
||||||
const confirmed: unknown[] = []
|
|
||||||
const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
|
|
||||||
const sentShell: Array<{ sessionID: string; id?: string; command: string }> = []
|
const sentShell: Array<{ sessionID: string; id?: string; command: string }> = []
|
||||||
const sentShellDirectories: string[] = []
|
const sentShellDirectories: string[] = []
|
||||||
const promotedDrafts: Array<{ draftID: string; server: string; sessionId: string }> = []
|
const promotedDrafts: Array<{ draftID: string; server: string; sessionId: string }> = []
|
||||||
@@ -36,12 +24,9 @@ const switchedModels: Array<{
|
|||||||
}> = []
|
}> = []
|
||||||
const sessionRequestOrder: string[] = []
|
const sessionRequestOrder: string[] = []
|
||||||
const updatedDrafts: Array<{ draftID: string; worktree?: string }> = []
|
const updatedDrafts: Array<{ draftID: string; worktree?: string }> = []
|
||||||
const syncedServers: string[] = []
|
|
||||||
const admittedServers: string[] = []
|
|
||||||
const promptCaptures: Array<{ scope?: unknown; target?: unknown }> = []
|
const promptCaptures: Array<{ scope?: unknown; target?: unknown }> = []
|
||||||
let serverSessionSyncs = 0
|
let serverSessionSyncs = 0
|
||||||
let restoredPrompts = 0
|
let restoredPrompts = 0
|
||||||
let clearEchoCalls = 0
|
|
||||||
|
|
||||||
let params: { id?: string } = {}
|
let params: { id?: string } = {}
|
||||||
let search: { draftId?: string } = {}
|
let search: { draftId?: string } = {}
|
||||||
@@ -52,11 +37,8 @@ let createWorktreeGate: Promise<void> | undefined
|
|||||||
let worktreeFailure: Error | undefined
|
let worktreeFailure: Error | undefined
|
||||||
let locationFailure: Error | undefined
|
let locationFailure: Error | undefined
|
||||||
let promptFailure: Error | undefined
|
let promptFailure: Error | undefined
|
||||||
let clearEchoResult = true
|
|
||||||
let worktreeCreates = 0
|
let worktreeCreates = 0
|
||||||
let activeSDK = "server-a"
|
let activeSDK = "server-a"
|
||||||
let activeServerSync = "server-a"
|
|
||||||
let activeDirectorySync = "server-a"
|
|
||||||
let commands: Array<{ name: string }> = []
|
let commands: Array<{ name: string }> = []
|
||||||
let worktreeDirectory = "/repo/new-0"
|
let worktreeDirectory = "/repo/new-0"
|
||||||
let worktreeID = 0
|
let worktreeID = 0
|
||||||
@@ -233,83 +215,34 @@ beforeAll(async () => {
|
|||||||
usePrompt: () => prompt,
|
usePrompt: () => prompt,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
mock.module("@/context/sdk", () => ({
|
mock.module("@/context/location", () => ({
|
||||||
useSDK: () => {
|
useWorkspaceLocation: () => {
|
||||||
return () => ({
|
return () => ({
|
||||||
scope: activeSDK === "server-a" ? ServerScope.local : "server-b",
|
|
||||||
directory: activeSDK === "server-a" ? "/repo/main" : "/repo/other",
|
directory: activeSDK === "server-a" ? "/repo/main" : "/repo/other",
|
||||||
api: rootClient.api,
|
|
||||||
url: "http://localhost:4096",
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
mock.module("@/context/sync", () => ({
|
mock.module("@/context/server-sdk", () => ({
|
||||||
useSync: () => () => {
|
useServerSDK: () => ({
|
||||||
const server = activeDirectorySync
|
scope: activeSDK === "server-a" ? ServerScope.local : "server-b",
|
||||||
return {
|
api: rootClient.api,
|
||||||
data: { command: commands, project: "project" },
|
}),
|
||||||
session: {
|
|
||||||
inbox: {
|
|
||||||
echo: (value: {
|
|
||||||
directory?: string
|
|
||||||
sessionID: string
|
|
||||||
messageID: string
|
|
||||||
text: string
|
|
||||||
displayText: string
|
|
||||||
agent: string
|
|
||||||
model: { providerID: string; modelID: string; variant?: string }
|
|
||||||
comments: unknown[]
|
|
||||||
}) => {
|
|
||||||
admittedServers.push(server)
|
|
||||||
admitted.push(value)
|
|
||||||
},
|
|
||||||
confirm: (value: unknown) => {
|
|
||||||
confirmed.push(value)
|
|
||||||
},
|
|
||||||
clearEcho: () => {
|
|
||||||
clearEchoCalls++
|
|
||||||
return clearEchoResult
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
set: () => undefined,
|
|
||||||
project: { worktree: server === "server-a" ? "/repo/main" : "/repo/other" },
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
mock.module("@/context/server-sync", () => ({
|
mock.module("@/context/server", () => ({
|
||||||
useServerSync: () => {
|
useData: () => ({
|
||||||
const server = activeServerSync
|
session: {
|
||||||
return {
|
remember: () => undefined,
|
||||||
session: {
|
setStatus: () => undefined,
|
||||||
remember: () => undefined,
|
},
|
||||||
set: () => undefined,
|
location: {
|
||||||
sync: async () => {
|
info: () => ({ project: { id: "project", directory: "/repo/main" } }),
|
||||||
serverSessionSyncs++
|
command: {
|
||||||
},
|
list: () => commands,
|
||||||
},
|
},
|
||||||
child: (directory: string) => {
|
},
|
||||||
syncedServers.push(server)
|
}),
|
||||||
storedSessions[directory] ??= []
|
|
||||||
return [
|
|
||||||
{ session: storedSessions[directory] },
|
|
||||||
(...args: unknown[]) => {
|
|
||||||
if (args[0] !== "session") return
|
|
||||||
const next = args[1]
|
|
||||||
if (typeof next === "function") {
|
|
||||||
storedSessions[directory] = next(storedSessions[directory]) as Array<{ id: string; title?: string }>
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (Array.isArray(next)) {
|
|
||||||
storedSessions[directory] = next as Array<{ id: string; title?: string }>
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
mock.module("@/context/platform", () => ({
|
mock.module("@/context/platform", () => ({
|
||||||
@@ -330,8 +263,6 @@ beforeAll(async () => {
|
|||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
createdSessions.length = 0
|
createdSessions.length = 0
|
||||||
admitted.length = 0
|
|
||||||
confirmed.length = 0
|
|
||||||
promotedDrafts.length = 0
|
promotedDrafts.length = 0
|
||||||
updatedDrafts.length = 0
|
updatedDrafts.length = 0
|
||||||
sentCommands.length = 0
|
sentCommands.length = 0
|
||||||
@@ -340,11 +271,8 @@ beforeEach(() => {
|
|||||||
switchedAgents.length = 0
|
switchedAgents.length = 0
|
||||||
switchedModels.length = 0
|
switchedModels.length = 0
|
||||||
sessionRequestOrder.length = 0
|
sessionRequestOrder.length = 0
|
||||||
syncedServers.length = 0
|
|
||||||
admittedServers.length = 0
|
|
||||||
promptCaptures.length = 0
|
promptCaptures.length = 0
|
||||||
restoredPrompts = 0
|
restoredPrompts = 0
|
||||||
clearEchoCalls = 0
|
|
||||||
params = {}
|
params = {}
|
||||||
search = {}
|
search = {}
|
||||||
sentShell.length = 0
|
sentShell.length = 0
|
||||||
@@ -352,8 +280,6 @@ beforeEach(() => {
|
|||||||
selected = "/repo/worktree-a"
|
selected = "/repo/worktree-a"
|
||||||
variant = undefined
|
variant = undefined
|
||||||
activeSDK = "server-a"
|
activeSDK = "server-a"
|
||||||
activeServerSync = "server-a"
|
|
||||||
activeDirectorySync = "server-a"
|
|
||||||
commands = []
|
commands = []
|
||||||
promptValue = [{ type: "text", content: "ls", start: 0, end: 2 }]
|
promptValue = [{ type: "text", content: "ls", start: 0, end: 2 }]
|
||||||
worktreeDirectory = `/repo/new-${++worktreeID}`
|
worktreeDirectory = `/repo/new-${++worktreeID}`
|
||||||
@@ -363,11 +289,9 @@ beforeEach(() => {
|
|||||||
worktreeFailure = undefined
|
worktreeFailure = undefined
|
||||||
locationFailure = undefined
|
locationFailure = undefined
|
||||||
promptFailure = undefined
|
promptFailure = undefined
|
||||||
clearEchoResult = true
|
|
||||||
worktreeCreates = 0
|
worktreeCreates = 0
|
||||||
for (const key of Object.keys(draftServers)) delete draftServers[key]
|
for (const key of Object.keys(draftServers)) delete draftServers[key]
|
||||||
for (const key of Object.keys(sessionDirectories)) delete sessionDirectories[key]
|
for (const key of Object.keys(sessionDirectories)) delete sessionDirectories[key]
|
||||||
for (const key of Object.keys(storedSessions)) delete storedSessions[key]
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const event = { preventDefault: () => undefined } as unknown as Event
|
const event = { preventDefault: () => undefined } as unknown as Event
|
||||||
@@ -442,8 +366,6 @@ describe("prompt submit worktree selection", () => {
|
|||||||
|
|
||||||
const result = submit.handleSubmit(event)
|
const result = submit.handleSubmit(event)
|
||||||
activeSDK = "server-b"
|
activeSDK = "server-b"
|
||||||
activeServerSync = "server-b"
|
|
||||||
activeDirectorySync = "server-b"
|
|
||||||
search.draftId = "draft-2"
|
search.draftId = "draft-2"
|
||||||
release()
|
release()
|
||||||
await result
|
await result
|
||||||
@@ -451,8 +373,6 @@ describe("prompt submit worktree selection", () => {
|
|||||||
|
|
||||||
expect(updatedDrafts).toEqual([{ draftID: "draft-1", worktree: undefined }])
|
expect(updatedDrafts).toEqual([{ draftID: "draft-1", worktree: undefined }])
|
||||||
expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "project-server-a", sessionId: "session-1" }])
|
expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "project-server-a", sessionId: "session-1" }])
|
||||||
expect(syncedServers.every((server) => server === "server-a")).toBe(true)
|
|
||||||
expect(admittedServers).toEqual(["server-a"])
|
|
||||||
expect(promptCaptures.at(-1)?.target).toEqual({ server: "project-server-a", scope: ServerScope.local })
|
expect(promptCaptures.at(-1)?.target).toEqual({ server: "project-server-a", scope: ServerScope.local })
|
||||||
expect(submitted).toBe(0)
|
expect(submitted).toBe(0)
|
||||||
})
|
})
|
||||||
@@ -472,15 +392,6 @@ describe("prompt submit worktree selection", () => {
|
|||||||
await submit.handleSubmit(event)
|
await submit.handleSubmit(event)
|
||||||
await Bun.sleep(0)
|
await Bun.sleep(0)
|
||||||
|
|
||||||
expect(admitted).toHaveLength(1)
|
|
||||||
expect(admitted[0]).toMatchObject({
|
|
||||||
sessionID: "session-1",
|
|
||||||
text: "ls",
|
|
||||||
agent: "agent",
|
|
||||||
model: { providerID: "provider", modelID: "model", variant: "high" },
|
|
||||||
})
|
|
||||||
expect(admitted[0]?.messageID).toStartWith("msg_")
|
|
||||||
expect(confirmed).toMatchObject([{ id: admitted[0]?.messageID, sessionID: "session-1" }])
|
|
||||||
expect(sentPrompts).toEqual(["/repo/main"])
|
expect(sentPrompts).toEqual(["/repo/main"])
|
||||||
expect(switchedAgents).toEqual([{ sessionID: "session-1", agent: "agent" }])
|
expect(switchedAgents).toEqual([{ sessionID: "session-1", agent: "agent" }])
|
||||||
expect(switchedModels).toEqual([
|
expect(switchedModels).toEqual([
|
||||||
@@ -499,10 +410,9 @@ describe("prompt submit worktree selection", () => {
|
|||||||
expect((promptInputs[0] as { id?: string }).id).toStartWith("msg_")
|
expect((promptInputs[0] as { id?: string }).id).toStartWith("msg_")
|
||||||
})
|
})
|
||||||
|
|
||||||
test("keeps a confirmed echo when the prompt response is lost", async () => {
|
test("restores the prompt when sending fails", async () => {
|
||||||
params = { id: "session-1" }
|
params = { id: "session-1" }
|
||||||
promptFailure = new Error("connection lost")
|
promptFailure = new Error("connection lost")
|
||||||
clearEchoResult = false
|
|
||||||
const submit = makeSubmit({
|
const submit = makeSubmit({
|
||||||
info: () => ({ id: "session-1", agent: "agent", model: { id: "model", providerID: "provider" } }),
|
info: () => ({ id: "session-1", agent: "agent", model: { id: "model", providerID: "provider" } }),
|
||||||
})
|
})
|
||||||
@@ -510,9 +420,7 @@ describe("prompt submit worktree selection", () => {
|
|||||||
await submit.handleSubmit(event)
|
await submit.handleSubmit(event)
|
||||||
await settle()
|
await settle()
|
||||||
|
|
||||||
expect(admitted).toHaveLength(1)
|
expect(restoredPrompts).toBe(1)
|
||||||
expect(clearEchoCalls).toBe(1)
|
|
||||||
expect(restoredPrompts).toBe(0)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test("submits slash commands through the current session API", async () => {
|
test("submits slash commands through the current session API", async () => {
|
||||||
@@ -534,14 +442,11 @@ describe("prompt submit worktree selection", () => {
|
|||||||
id: expect.stringMatching(/^msg_/),
|
id: expect.stringMatching(/^msg_/),
|
||||||
command: "review",
|
command: "review",
|
||||||
arguments: "staged changes",
|
arguments: "staged changes",
|
||||||
|
agent: "agent",
|
||||||
|
model: { id: "model", providerID: "provider", variant: "high" },
|
||||||
files: [],
|
files: [],
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
expect(switchedAgents).toEqual([{ sessionID: "session-1", agent: "agent" }])
|
|
||||||
expect(switchedModels).toEqual([
|
|
||||||
{ sessionID: "session-1", model: { id: "model", providerID: "provider", variant: "high" } },
|
|
||||||
])
|
|
||||||
expect(sessionRequestOrder).toEqual(["agent", "model"])
|
|
||||||
expect(serverSessionSyncs).toBe(0)
|
expect(serverSessionSyncs).toBe(0)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,17 +1,16 @@
|
|||||||
import type { SessionInfo } from "@opencode-ai/client/promise"
|
import type { Data } from "@opencode-ai/client/solid"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
import { base64Encode } from "@opencode-ai/core/util/encode"
|
import { base64Encode } from "@opencode-ai/core/util/encode"
|
||||||
import { Binary } from "@opencode-ai/core/util/binary"
|
|
||||||
import { useNavigate, useParams, useSearchParams } from "@solidjs/router"
|
import { useNavigate, useParams, useSearchParams } from "@solidjs/router"
|
||||||
import { startTransition, type Accessor } from "solid-js"
|
import { startTransition, type Accessor } from "solid-js"
|
||||||
import { useTabs } from "@/context/tabs"
|
import { useTabs } from "@/context/tabs"
|
||||||
import { useServerSync, type ServerSync } from "@/context/server-sync"
|
import { useData } from "@/context/server"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useLocal, type ModelSelection } from "@/context/local"
|
import { useLocal, type ModelSelection } from "@/context/local"
|
||||||
import { usePermission } from "@/context/permission"
|
import { usePermission } from "@/context/permission"
|
||||||
import { type ContextItem, type ImageAttachmentPart, type Prompt, type usePrompt } from "@/context/prompt"
|
import { type ContextItem, type ImageAttachmentPart, type Prompt, type usePrompt } from "@/context/prompt"
|
||||||
import { useSDK, type DirectorySDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { useSync, type DirectorySync } from "@/context/sync"
|
import { useServerSDK, type ServerSDK } from "@/context/server-sdk"
|
||||||
import { Identifier } from "@/utils/id"
|
import { Identifier } from "@/utils/id"
|
||||||
import { getDirectory } from "@opencode-ai/core/util/path"
|
import { getDirectory } from "@opencode-ai/core/util/path"
|
||||||
import { buildPromptRequest } from "./build-prompt-request"
|
import { buildPromptRequest } from "./build-prompt-request"
|
||||||
@@ -35,9 +34,8 @@ export type FollowupDraft = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type FollowupSendInput = {
|
type FollowupSendInput = {
|
||||||
api: DirectorySDK["api"]["session"]
|
api: ServerSDK["api"]["session"]
|
||||||
serverSync: ServerSync
|
data: Data
|
||||||
sync: DirectorySync
|
|
||||||
session: Accessor<{ agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined>
|
session: Accessor<{ agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined>
|
||||||
draft: FollowupDraft
|
draft: FollowupDraft
|
||||||
messageID?: string
|
messageID?: string
|
||||||
@@ -53,47 +51,31 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
|
|||||||
const images = draftImages(input.draft.prompt)
|
const images = draftImages(input.draft.prompt)
|
||||||
const setBusy = () => {
|
const setBusy = () => {
|
||||||
if (!input.optimisticBusy) return
|
if (!input.optimisticBusy) return
|
||||||
input.serverSync.session.set("session_status", input.draft.sessionID, { type: "busy" })
|
input.data.session.setStatus(input.draft.sessionID, "running")
|
||||||
}
|
}
|
||||||
|
|
||||||
const setIdle = () => {
|
const setIdle = () => {
|
||||||
if (!input.optimisticBusy) return
|
if (!input.optimisticBusy) return
|
||||||
input.serverSync.session.set("session_status", input.draft.sessionID, { type: "idle" })
|
input.data.session.setStatus(input.draft.sessionID, "idle")
|
||||||
}
|
|
||||||
|
|
||||||
const select = async () => {
|
|
||||||
const session = input.session()
|
|
||||||
if (session?.agent !== input.draft.agent) {
|
|
||||||
await input.api.switchAgent({ sessionID: input.draft.sessionID, agent: input.draft.agent })
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
session?.model?.providerID === input.draft.model.providerID &&
|
|
||||||
session.model.id === input.draft.model.modelID &&
|
|
||||||
(session.model.variant ?? "default") === (input.draft.variant ?? "default")
|
|
||||||
)
|
|
||||||
return
|
|
||||||
await input.api.switchModel({
|
|
||||||
sessionID: input.draft.sessionID,
|
|
||||||
model: {
|
|
||||||
id: input.draft.model.modelID,
|
|
||||||
providerID: input.draft.model.providerID,
|
|
||||||
variant: input.draft.variant,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const [head, ...tail] = text.split(" ")
|
const [head, ...tail] = text.split(" ")
|
||||||
const cmd = head?.startsWith("/") ? head.slice(1) : undefined
|
const cmd = head?.startsWith("/") ? head.slice(1) : undefined
|
||||||
if (cmd && input.sync.data.command.find((item) => item.name === cmd)) {
|
if (cmd && input.data.location.command.list({ directory: input.draft.sessionDirectory })?.some((item) => item.name === cmd)) {
|
||||||
setBusy()
|
setBusy()
|
||||||
try {
|
try {
|
||||||
await select()
|
|
||||||
const messageID = Identifier.ascending("message")
|
const messageID = Identifier.ascending("message")
|
||||||
await input.api.command({
|
await input.api.command({
|
||||||
sessionID: input.draft.sessionID,
|
sessionID: input.draft.sessionID,
|
||||||
id: messageID,
|
id: messageID,
|
||||||
command: cmd,
|
command: cmd,
|
||||||
arguments: tail.join(" "),
|
arguments: tail.join(" "),
|
||||||
|
agent: input.draft.agent,
|
||||||
|
model: {
|
||||||
|
id: input.draft.model.modelID,
|
||||||
|
providerID: input.draft.model.providerID,
|
||||||
|
variant: input.draft.variant,
|
||||||
|
},
|
||||||
files: await Promise.all(
|
files: await Promise.all(
|
||||||
images.map(async (attachment) => ({
|
images.map(async (attachment) => ({
|
||||||
uri: await blobDataUrl(attachment.blob, attachment.mime),
|
uri: await blobDataUrl(attachment.blob, attachment.mime),
|
||||||
@@ -124,34 +106,36 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
|
|||||||
})
|
})
|
||||||
|
|
||||||
setBusy()
|
setBusy()
|
||||||
input.sync.session.inbox.echo({
|
|
||||||
directory: input.draft.sessionDirectory,
|
|
||||||
sessionID: input.draft.sessionID,
|
|
||||||
messageID,
|
|
||||||
agent: input.draft.agent,
|
|
||||||
model: { ...input.draft.model, variant: input.draft.variant },
|
|
||||||
...request,
|
|
||||||
})
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await select()
|
const session = input.session()
|
||||||
|
if (session?.agent !== input.draft.agent) {
|
||||||
|
await input.api.switchAgent({ sessionID: input.draft.sessionID, agent: input.draft.agent })
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
session?.model?.providerID !== input.draft.model.providerID ||
|
||||||
|
session.model.id !== input.draft.model.modelID ||
|
||||||
|
(session.model.variant ?? "default") !== (input.draft.variant ?? "default")
|
||||||
|
) {
|
||||||
|
await input.api.switchModel({
|
||||||
|
sessionID: input.draft.sessionID,
|
||||||
|
model: {
|
||||||
|
id: input.draft.model.modelID,
|
||||||
|
providerID: input.draft.model.providerID,
|
||||||
|
variant: input.draft.variant,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const admitted = await input.api.prompt({
|
await input.api.prompt({
|
||||||
sessionID: input.draft.sessionID,
|
sessionID: input.draft.sessionID,
|
||||||
id: messageID,
|
id: messageID,
|
||||||
text: request.text,
|
text: request.text,
|
||||||
files: request.files.map((file) => ({ uri: file.uri, name: file.name, mention: file.mention })),
|
files: request.files.map((file) => ({ uri: file.uri, name: file.name, mention: file.mention })),
|
||||||
agents: request.agents,
|
agents: request.agents,
|
||||||
})
|
})
|
||||||
input.sync.session.inbox.confirm(admitted)
|
|
||||||
return true
|
return true
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const failed = input.sync.session.inbox.clearEcho({
|
|
||||||
directory: input.draft.sessionDirectory,
|
|
||||||
sessionID: input.draft.sessionID,
|
|
||||||
messageID,
|
|
||||||
})
|
|
||||||
if (!failed) return true
|
|
||||||
setIdle()
|
setIdle()
|
||||||
throw err
|
throw err
|
||||||
}
|
}
|
||||||
@@ -185,9 +169,9 @@ type PromptSubmitInput = {
|
|||||||
|
|
||||||
export function createPromptSubmit(input: PromptSubmitInput) {
|
export function createPromptSubmit(input: PromptSubmitInput) {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
const sync = useSync()
|
const serverSDK = useServerSDK()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
const local = useLocal()
|
const local = useLocal()
|
||||||
const permission = usePermission()
|
const permission = usePermission()
|
||||||
const prompt = input.prompt
|
const prompt = input.prompt
|
||||||
@@ -208,12 +192,9 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
const abort = async () => {
|
const abort = async () => {
|
||||||
const sessionID = params.id
|
const sessionID = params.id
|
||||||
if (!sessionID) return Promise.resolve()
|
if (!sessionID) return Promise.resolve()
|
||||||
serverSync.session.set("todo", sessionID, [])
|
|
||||||
|
|
||||||
input.onAbort?.()
|
input.onAbort?.()
|
||||||
|
|
||||||
return sdk()
|
return serverSDK.api.session.interrupt({ sessionID })
|
||||||
.api.session.interrupt({ sessionID })
|
|
||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -240,21 +221,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const seed = (target: ServerSync, dir: string, info: SessionInfo) => {
|
|
||||||
target.session.remember(info)
|
|
||||||
const [, setStore] = target.child(dir)
|
|
||||||
setStore("session", (list: SessionInfo[]) => {
|
|
||||||
const result = Binary.search(list, info.id, (item) => item.id)
|
|
||||||
const next = [...list]
|
|
||||||
if (result.found) {
|
|
||||||
next[result.index] = info
|
|
||||||
return next
|
|
||||||
}
|
|
||||||
next.splice(result.index, 0, info)
|
|
||||||
return next
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async (event: Event) => {
|
const handleSubmit = async (event: Event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
||||||
@@ -287,9 +253,9 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const submissionSDK = sdk()
|
const submissionSDK = sdk()
|
||||||
const submissionSync = sync()
|
const submissionServerSDK = serverSDK
|
||||||
const submissionServerSync = serverSync
|
const submissionData = data
|
||||||
const submissionScope = submissionSDK.scope
|
const submissionScope = submissionServerSDK.scope
|
||||||
const projectDirectory = submissionSDK.directory
|
const projectDirectory = submissionSDK.directory
|
||||||
const sessionID = params.id
|
const sessionID = params.id
|
||||||
const isNewSession = !sessionID
|
const isNewSession = !sessionID
|
||||||
@@ -317,14 +283,16 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
let sessionDirectory = projectDirectory
|
let sessionDirectory = projectDirectory
|
||||||
if (isNewSession) {
|
if (isNewSession) {
|
||||||
if (worktreeSelection === "create") {
|
if (worktreeSelection === "create") {
|
||||||
const createdWorktree = await submissionSDK.api.worktree
|
const createdWorktree = await submissionServerSDK.api.worktree
|
||||||
.create({
|
.create({
|
||||||
projectID: submissionSync.data.project,
|
projectID: submissionData.location.info({ directory: projectDirectory })?.project.id ?? "",
|
||||||
strategy: "git",
|
strategy: "git",
|
||||||
directory: getDirectory(submissionSync.project?.worktree ?? projectDirectory),
|
directory: getDirectory(
|
||||||
|
submissionData.location.info({ directory: projectDirectory })?.project.directory ?? projectDirectory,
|
||||||
|
),
|
||||||
})
|
})
|
||||||
.then(async (created) => {
|
.then(async (created) => {
|
||||||
await submissionSDK.api.location.get({ location: { directory: created.directory } })
|
await submissionServerSDK.api.location.get({ location: { directory: created.directory } })
|
||||||
return created
|
return created
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@@ -341,15 +309,11 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
if (worktreeSelection !== "main" && worktreeSelection !== "create") {
|
if (worktreeSelection !== "main" && worktreeSelection !== "create") {
|
||||||
sessionDirectory = worktreeSelection
|
sessionDirectory = worktreeSelection
|
||||||
}
|
}
|
||||||
|
|
||||||
if (sessionDirectory !== projectDirectory) {
|
|
||||||
submissionServerSync.child(sessionDirectory)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let session = currentSession
|
let session = currentSession
|
||||||
if (!session && isNewSession) {
|
if (!session && isNewSession) {
|
||||||
const created = await submissionSDK.api.session
|
const created = await submissionServerSDK.api.session
|
||||||
.create({
|
.create({
|
||||||
agent: currentAgent.name,
|
agent: currentAgent.name,
|
||||||
model: { id: currentModel.id, providerID: currentModel.provider.id, variant },
|
model: { id: currentModel.id, providerID: currentModel.provider.id, variant },
|
||||||
@@ -363,7 +327,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
return undefined
|
return undefined
|
||||||
})
|
})
|
||||||
if (created) {
|
if (created) {
|
||||||
seed(submissionServerSync, sessionDirectory, created)
|
submissionData.session.remember(created)
|
||||||
session = created
|
session = created
|
||||||
await startTransition(() => {
|
await startTransition(() => {
|
||||||
if (!session) return
|
if (!session) return
|
||||||
@@ -444,7 +408,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
if (mode === "shell") {
|
if (mode === "shell") {
|
||||||
clearInput()
|
clearInput()
|
||||||
const eventID = Event.ID.create()
|
const eventID = Event.ID.create()
|
||||||
void submissionSDK.api.session
|
void submissionServerSDK.api.session
|
||||||
.shell({
|
.shell({
|
||||||
sessionID: session.id,
|
sessionID: session.id,
|
||||||
id: eventID,
|
id: eventID,
|
||||||
@@ -463,28 +427,21 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
if (text.startsWith("/")) {
|
if (text.startsWith("/")) {
|
||||||
const [cmdName, ...args] = text.split(" ")
|
const [cmdName, ...args] = text.split(" ")
|
||||||
const commandName = cmdName.slice(1)
|
const commandName = cmdName.slice(1)
|
||||||
const customCommand = submissionSync.data.command.find((c) => c.name === commandName)
|
const customCommand = submissionData.location.command
|
||||||
|
.list({ directory: sessionDirectory })
|
||||||
|
?.find((command) => command.name === commandName)
|
||||||
if (customCommand) {
|
if (customCommand) {
|
||||||
clearInput()
|
clearInput()
|
||||||
const messageID = Identifier.ascending("message")
|
const messageID = Identifier.ascending("message")
|
||||||
submissionServerSync.session.set("session_status", session.id, { type: "busy" })
|
submissionData.session.setStatus(session.id, "running")
|
||||||
void (async () => {
|
void submissionServerSDK.api.session
|
||||||
if (session.agent !== agent)
|
.command({
|
||||||
await submissionSDK.api.session.switchAgent({ sessionID: session.id, agent })
|
|
||||||
if (
|
|
||||||
session.model?.providerID !== model.providerID ||
|
|
||||||
session.model.id !== model.modelID ||
|
|
||||||
(session.model.variant ?? "default") !== (variant ?? "default")
|
|
||||||
)
|
|
||||||
await submissionSDK.api.session.switchModel({
|
|
||||||
sessionID: session.id,
|
|
||||||
model: { id: model.modelID, providerID: model.providerID, variant },
|
|
||||||
})
|
|
||||||
await submissionSDK.api.session.command({
|
|
||||||
sessionID: session.id,
|
sessionID: session.id,
|
||||||
id: messageID,
|
id: messageID,
|
||||||
command: commandName,
|
command: commandName,
|
||||||
arguments: args.join(" "),
|
arguments: args.join(" "),
|
||||||
|
agent,
|
||||||
|
model: { id: model.modelID, providerID: model.providerID, variant },
|
||||||
files: await Promise.all(
|
files: await Promise.all(
|
||||||
images.map(async (attachment) => ({
|
images.map(async (attachment) => ({
|
||||||
uri: await blobDataUrl(attachment.blob, attachment.mime),
|
uri: await blobDataUrl(attachment.blob, attachment.mime),
|
||||||
@@ -492,14 +449,14 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
})),
|
})),
|
||||||
),
|
),
|
||||||
})
|
})
|
||||||
})().catch((err) => {
|
.catch((err) => {
|
||||||
submissionServerSync.session.set("session_status", session.id, { type: "idle" })
|
submissionData.session.setStatus(session.id, "idle")
|
||||||
showToast({
|
showToast({
|
||||||
title: language.t("prompt.toast.commandSendFailed.title"),
|
title: language.t("prompt.toast.commandSendFailed.title"),
|
||||||
description: formatServerError(err, language.t, language.t("common.requestFailed")),
|
description: formatServerError(err, language.t, language.t("common.requestFailed")),
|
||||||
|
})
|
||||||
|
restoreInput()
|
||||||
})
|
})
|
||||||
restoreInput()
|
|
||||||
})
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -511,16 +468,15 @@ export function createPromptSubmit(input: PromptSubmitInput) {
|
|||||||
clearInput()
|
clearInput()
|
||||||
|
|
||||||
void sendFollowupDraft({
|
void sendFollowupDraft({
|
||||||
api: submissionSDK.api.session,
|
api: submissionServerSDK.api.session,
|
||||||
sync: submissionSync,
|
data: submissionData,
|
||||||
serverSync: submissionServerSync,
|
|
||||||
session: () => session,
|
session: () => session,
|
||||||
draft,
|
draft,
|
||||||
messageID,
|
messageID,
|
||||||
optimisticBusy: sessionDirectory === projectDirectory,
|
optimisticBusy: sessionDirectory === projectDirectory,
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
if (sessionDirectory === projectDirectory) {
|
if (sessionDirectory === projectDirectory) {
|
||||||
submissionSync.set("session_status", session.id, { type: "idle" })
|
submissionData.session.setStatus(session.id, "idle")
|
||||||
}
|
}
|
||||||
showToast({
|
showToast({
|
||||||
title: language.t("prompt.toast.promptSendFailed.title"),
|
title: language.t("prompt.toast.promptSendFailed.title"),
|
||||||
|
|||||||
@@ -1,46 +0,0 @@
|
|||||||
import { createComputed, on, type Accessor } from "solid-js"
|
|
||||||
import { createStore, type SetStoreFunction } from "solid-js/store"
|
|
||||||
import type { PromptHistoryEntry } from "./history"
|
|
||||||
|
|
||||||
export type PromptInputTransientState = {
|
|
||||||
popover: "at" | "slash" | null
|
|
||||||
slashMenu: boolean
|
|
||||||
slashMenuQuery: string
|
|
||||||
historyIndex: number
|
|
||||||
savedPrompt: PromptHistoryEntry | null
|
|
||||||
placeholder: number
|
|
||||||
draggingType: "image" | "@mention" | null
|
|
||||||
mode: "normal" | "shell"
|
|
||||||
applyingHistory: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetPromptInputTransientState(setStore: SetStoreFunction<PromptInputTransientState>) {
|
|
||||||
setStore({
|
|
||||||
popover: null,
|
|
||||||
slashMenu: false,
|
|
||||||
slashMenuQuery: "",
|
|
||||||
historyIndex: -1,
|
|
||||||
savedPrompt: null,
|
|
||||||
draggingType: null,
|
|
||||||
mode: "normal",
|
|
||||||
applyingHistory: false,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createPromptInputTransientState(identity: Accessor<unknown>, placeholder: number) {
|
|
||||||
const [store, setStore] = createStore<PromptInputTransientState>({
|
|
||||||
popover: null,
|
|
||||||
slashMenu: false,
|
|
||||||
slashMenuQuery: "",
|
|
||||||
historyIndex: -1,
|
|
||||||
savedPrompt: null,
|
|
||||||
placeholder,
|
|
||||||
draggingType: null,
|
|
||||||
mode: "normal",
|
|
||||||
applyingHistory: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
createComputed(on(identity, () => resetPromptInputTransientState(setStore), { defer: true }))
|
|
||||||
|
|
||||||
return [store, setStore] as const
|
|
||||||
}
|
|
||||||
@@ -1,9 +1,7 @@
|
|||||||
import type { FormAnswer, IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
|
import type { FormAnswer, IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
|
||||||
import { useQueryClient } from "@tanstack/solid-query"
|
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
import { useData } from "@/context/server"
|
||||||
import { pathKey } from "@/utils/path-key"
|
|
||||||
import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
|
import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
|
||||||
import { createStore, produce } from "solid-js/store"
|
import { createStore, produce } from "solid-js/store"
|
||||||
|
|
||||||
@@ -18,8 +16,7 @@ export function createProviderConnectionController(options: {
|
|||||||
}) {
|
}) {
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const location = () => {
|
const location = () => {
|
||||||
const directory = options.directory()
|
const directory = options.directory()
|
||||||
return directory ? { directory } : undefined
|
return directory ? { directory } : undefined
|
||||||
@@ -118,12 +115,15 @@ export function createProviderConnectionController(options: {
|
|||||||
}
|
}
|
||||||
const finish = async () => {
|
const finish = async () => {
|
||||||
cancelPolling()
|
cancelPolling()
|
||||||
const directory = options.directory()
|
const ref = location()
|
||||||
const key = directory ? pathKey(directory) : null
|
data.location.integration.invalidate(ref)
|
||||||
|
data.location.provider.invalidate(ref)
|
||||||
|
data.location.model.invalidate(ref)
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
queryClient.refetchQueries(serverSync.queryOptions.providers(key)).catch(() => undefined),
|
data.location.integration.sync(ref),
|
||||||
queryClient.refetchQueries(serverSync.queryOptions.integrations(key)).catch(() => undefined),
|
data.location.provider.sync(ref),
|
||||||
])
|
data.location.model.sync(ref),
|
||||||
|
]).catch(() => undefined)
|
||||||
if (polling.disposed) return
|
if (polling.disposed) return
|
||||||
options.onComplete()
|
options.onComplete()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,25 +1,21 @@
|
|||||||
import { Match, Show, Switch, createMemo, type ComponentProps, type JSX } from "solid-js"
|
import { Show, createMemo, type ComponentProps, type JSX } from "solid-js"
|
||||||
import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
|
import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
|
||||||
import { ProgressCircleV2 } from "@opencode-ai/ui/v2/progress-circle-v2"
|
import { ProgressCircleV2 } from "@opencode-ai/ui/v2/progress-circle-v2"
|
||||||
import { Button } from "@opencode-ai/ui/button"
|
|
||||||
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
|
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
|
||||||
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
|
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
|
||||||
import { createMediaQuery } from "@solid-primitives/media"
|
import { createMediaQuery } from "@solid-primitives/media"
|
||||||
|
|
||||||
import { useFile } from "@/context/file"
|
import { useFile } from "@/context/file"
|
||||||
import { useLayout } from "@/context/layout"
|
import { useLayout } from "@/context/layout"
|
||||||
import { useSync } from "@/context/sync"
|
import { useData } from "@/context/server"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useProviders } from "@/hooks/use-providers"
|
import { useProviders } from "@/hooks/use-providers"
|
||||||
import { useSDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { getSessionContext } from "@/components/session/session-context-metrics"
|
|
||||||
import { useSessionLayout } from "@/pages/session/session-layout"
|
import { useSessionLayout } from "@/pages/session/session-layout"
|
||||||
import { createSessionTabs } from "@/pages/session/helpers"
|
import { createSessionTabs } from "@/pages/session/helpers"
|
||||||
import { useSettings } from "@/context/settings"
|
|
||||||
|
|
||||||
interface SessionContextUsageProps {
|
interface SessionContextUsageProps {
|
||||||
variant?: "button" | "indicator"
|
variant?: "button" | "indicator"
|
||||||
buttonAppearance?: "default" | "v2"
|
|
||||||
placement?: ComponentProps<typeof TooltipV2>["placement"]
|
placement?: ComponentProps<typeof TooltipV2>["placement"]
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -43,26 +39,24 @@ function openSessionContext(args: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function SessionContextUsage(props: SessionContextUsageProps) {
|
export function SessionContextUsage(props: SessionContextUsageProps) {
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
const file = useFile()
|
const file = useFile()
|
||||||
const layout = useLayout()
|
const layout = useLayout()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
const settings = useSettings()
|
|
||||||
const providers = useProviders(() => sdk().directory)
|
const providers = useProviders(() => sdk().directory)
|
||||||
const { params, tabs, view } = useSessionLayout()
|
const { params, tabs, view } = useSessionLayout()
|
||||||
const isDesktop = createMediaQuery("(min-width: 768px)")
|
const isDesktop = createMediaQuery("(min-width: 768px)")
|
||||||
|
|
||||||
const variant = createMemo(() => props.variant ?? "button")
|
const variant = createMemo(() => props.variant ?? "button")
|
||||||
const buttonAppearance = createMemo(() => props.buttonAppearance ?? "default")
|
|
||||||
const tabState = createSessionTabs({
|
const tabState = createSessionTabs({
|
||||||
tabs,
|
tabs,
|
||||||
pathFromTab: file.pathFromTab,
|
pathFromTab: file.pathFromTab,
|
||||||
normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
|
normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
|
||||||
fileBrowser: () => settings.general.newLayoutDesigns() && isDesktop() && !!params.id,
|
fileBrowser: () => isDesktop() && !!params.id,
|
||||||
})
|
})
|
||||||
const messages = createMemo(() => (params.id ? (sync().data.message[params.id] ?? []) : []))
|
const messages = createMemo(() => (params.id ? data.session.message.list(params.id) : []))
|
||||||
const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))
|
const info = createMemo(() => (params.id ? data.session.get(params.id) : undefined))
|
||||||
|
|
||||||
const usd = createMemo(
|
const usd = createMemo(
|
||||||
() =>
|
() =>
|
||||||
@@ -72,7 +66,21 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
const context = createMemo(() => getSessionContext(messages(), [...providers.all().values()]))
|
const context = createMemo(() => {
|
||||||
|
const message = messages().findLast((item) => item.type === "assistant" && !!item.tokens)
|
||||||
|
if (message?.type !== "assistant" || !message.tokens) return
|
||||||
|
const model = providers.all().get(message.model.providerID)?.models[message.model.id]
|
||||||
|
const total =
|
||||||
|
message.tokens.input +
|
||||||
|
message.tokens.output +
|
||||||
|
message.tokens.reasoning +
|
||||||
|
message.tokens.cache.read +
|
||||||
|
message.tokens.cache.write
|
||||||
|
return {
|
||||||
|
total,
|
||||||
|
usage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
|
||||||
|
}
|
||||||
|
})
|
||||||
const cost = createMemo(() => {
|
const cost = createMemo(() => {
|
||||||
return usd().format(info()?.cost ?? 0)
|
return usd().format(info()?.cost ?? 0)
|
||||||
})
|
})
|
||||||
@@ -138,9 +146,9 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
|
|||||||
return (
|
return (
|
||||||
<Show when={params.id}>
|
<Show when={params.id}>
|
||||||
<TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
|
<TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
|
||||||
<Switch>
|
<Show
|
||||||
<Match when={variant() === "indicator"}>{circle()}</Match>
|
when={variant() === "indicator"}
|
||||||
<Match when={buttonAppearance() === "v2"}>
|
fallback={
|
||||||
<IconButtonV2
|
<IconButtonV2
|
||||||
type="button"
|
type="button"
|
||||||
variant="ghost-muted"
|
variant="ghost-muted"
|
||||||
@@ -149,19 +157,10 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
|
|||||||
onClick={openContext}
|
onClick={openContext}
|
||||||
aria-label={language.t("context.usage.view")}
|
aria-label={language.t("context.usage.view")}
|
||||||
/>
|
/>
|
||||||
</Match>
|
}
|
||||||
<Match when={true}>
|
>
|
||||||
<Button
|
{circle()}
|
||||||
type="button"
|
</Show>
|
||||||
variant="ghost"
|
|
||||||
class="size-6"
|
|
||||||
onClick={openContext}
|
|
||||||
aria-label={language.t("context.usage.view")}
|
|
||||||
>
|
|
||||||
{circle()}
|
|
||||||
</Button>
|
|
||||||
</Match>
|
|
||||||
</Switch>
|
|
||||||
</TooltipV2>
|
</TooltipV2>
|
||||||
</Show>
|
</Show>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { createSignal, For, Show, type ComponentProps, type JSX } from "solid-js
|
|||||||
import type { Project } from "@/types"
|
import type { Project } from "@/types"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
import { useData } from "@/context/server"
|
||||||
import { useSettingsDialog } from "@/components/settings-dialog"
|
import { useSettingsDialog } from "@/components/settings-dialog"
|
||||||
import { pathKey } from "@/utils/path-key"
|
import { pathKey } from "@/utils/path-key"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
@@ -26,11 +26,11 @@ export function SessionWorkspaceMenu(props: {
|
|||||||
}) {
|
}) {
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
const openWorkspaces = useSettingsDialog("workspaces")
|
const openWorkspaces = useSettingsDialog("workspaces")
|
||||||
const [store, setStore] = createStore({ selected: undefined as string | undefined })
|
const [store, setStore] = createStore({ selected: undefined as string | undefined })
|
||||||
const [directories, setDirectories] = createSignal(workspaceDirectories(props.project))
|
const [directories, setDirectories] = createSignal(workspaceDirectories(props.project))
|
||||||
const blocked = () => props.eligible === false || serverSync.session.data.session_working(props.sessionID)
|
const blocked = () => props.eligible === false || data.session.status(props.sessionID) === "running"
|
||||||
const currentWorkspace = () => directories().find((workspace) => containsDirectory(workspace, props.directory))
|
const currentWorkspace = () => directories().find((workspace) => containsDirectory(workspace, props.directory))
|
||||||
const workspaces = () =>
|
const workspaces = () =>
|
||||||
directories().filter((workspace) => pathKey(workspace) !== pathKey(currentWorkspace() ?? props.directory))
|
directories().filter((workspace) => pathKey(workspace) !== pathKey(currentWorkspace() ?? props.directory))
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
export { SessionHeader } from "./session-header"
|
export { SessionHeader } from "./session-header"
|
||||||
export { SessionContextTab } from "./session-context-tab"
|
export { SessionContextTab } from "./session-context-tab"
|
||||||
export { SortableTab, FileVisual } from "./session-sortable-tab"
|
export { FileVisual } from "./session-sortable-tab"
|
||||||
export { SortableTabV2 } from "./session-sortable-tab-v2"
|
export { SortableTabV2 } from "./session-sortable-tab-v2"
|
||||||
export { SortableTerminalTab } from "./session-sortable-terminal-tab"
|
|
||||||
export { NewSessionView } from "./session-new-view"
|
export { NewSessionView } from "./session-new-view"
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
|
import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
|
||||||
import type { JSX } from "solid-js"
|
import type { JSX } from "solid-js"
|
||||||
import { useSync } from "@/context/sync"
|
import { useData } from "@/context/server"
|
||||||
import { checksum } from "@opencode-ai/core/util/encode"
|
import { checksum } from "@opencode-ai/core/util/encode"
|
||||||
import { findLast } from "@opencode-ai/core/util/array"
|
|
||||||
import { same } from "@/utils/same"
|
import { same } from "@/utils/same"
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
import { Icon } from "@opencode-ai/ui/icon"
|
||||||
import { Button } from "@opencode-ai/ui/button"
|
import { Button } from "@opencode-ai/ui/button"
|
||||||
@@ -11,25 +10,16 @@ import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
|
|||||||
import { File } from "@opencode-ai/session-ui/file"
|
import { File } from "@opencode-ai/session-ui/file"
|
||||||
import { Markdown } from "@opencode-ai/session-ui/markdown"
|
import { Markdown } from "@opencode-ai/session-ui/markdown"
|
||||||
import { ScrollView } from "@opencode-ai/ui/scroll-view"
|
import { ScrollView } from "@opencode-ai/ui/scroll-view"
|
||||||
import type { Message, Part, UserMessage } from "@/types"
|
import type { SessionMessageInfo } from "@opencode-ai/client/promise"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
import { downloadSessionExport, fetchSessionExport, sessionExportFilename } from "@/utils/session-export"
|
import { downloadSessionExport, fetchSessionExport, sessionExportFilename } from "@/utils/session-export"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useProviders } from "@/hooks/use-providers"
|
import { useProviders } from "@/hooks/use-providers"
|
||||||
import { useSDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useSessionLayout } from "@/pages/session/session-layout"
|
import { useSessionLayout } from "@/pages/session/session-layout"
|
||||||
import { getSessionContext } from "./session-context-metrics"
|
|
||||||
import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
|
|
||||||
import { createSessionContextFormatter } from "./session-context-format"
|
import { createSessionContextFormatter } from "./session-context-format"
|
||||||
|
|
||||||
const BREAKDOWN_COLOR: Record<SessionContextBreakdownKey, string> = {
|
|
||||||
system: "var(--syntax-info)",
|
|
||||||
user: "var(--syntax-success)",
|
|
||||||
assistant: "var(--syntax-property)",
|
|
||||||
tool: "var(--syntax-warning)",
|
|
||||||
other: "var(--syntax-comment)",
|
|
||||||
}
|
|
||||||
|
|
||||||
function Stat(props: { label: string; value: JSX.Element }) {
|
function Stat(props: { label: string; value: JSX.Element }) {
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
@@ -39,12 +29,11 @@ function Stat(props: { label: string; value: JSX.Element }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function RawMessageContent(props: { message: Message; getParts: (id: string) => Part[]; onRendered: () => void }) {
|
function RawMessageContent(props: { message: SessionMessageInfo; onRendered: () => void }) {
|
||||||
const file = createMemo(() => {
|
const file = createMemo(() => {
|
||||||
const parts = props.getParts(props.message.id)
|
const contents = JSON.stringify(props.message, null, 2)
|
||||||
const contents = JSON.stringify({ message: props.message, parts }, null, 2)
|
|
||||||
return {
|
return {
|
||||||
name: `${props.message.role}-${props.message.id}.json`,
|
name: `${props.message.type}-${props.message.id}.json`,
|
||||||
contents,
|
contents,
|
||||||
cacheKey: checksum(contents),
|
cacheKey: checksum(contents),
|
||||||
}
|
}
|
||||||
@@ -62,8 +51,7 @@ function RawMessageContent(props: { message: Message; getParts: (id: string) =>
|
|||||||
}
|
}
|
||||||
|
|
||||||
function RawMessage(props: {
|
function RawMessage(props: {
|
||||||
message: Message
|
message: SessionMessageInfo
|
||||||
getParts: (id: string) => Part[]
|
|
||||||
onRendered: () => void
|
onRendered: () => void
|
||||||
time: (value: number | undefined) => string
|
time: (value: number | undefined) => string
|
||||||
}) {
|
}) {
|
||||||
@@ -73,7 +61,7 @@ function RawMessage(props: {
|
|||||||
<Accordion.Trigger>
|
<Accordion.Trigger>
|
||||||
<div class="flex items-center justify-between gap-2 w-full">
|
<div class="flex items-center justify-between gap-2 w-full">
|
||||||
<div class="min-w-0 truncate">
|
<div class="min-w-0 truncate">
|
||||||
{props.message.role} <span class="text-text-base">• {props.message.id}</span>
|
{props.message.type} <span class="text-text-base">• {props.message.id}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<div class="shrink-0 text-12-regular text-text-weak">{props.time(props.message.time.created)}</div>
|
<div class="shrink-0 text-12-regular text-text-weak">{props.time(props.message.time.created)}</div>
|
||||||
@@ -84,52 +72,35 @@ function RawMessage(props: {
|
|||||||
</StickyAccordionHeader>
|
</StickyAccordionHeader>
|
||||||
<Accordion.Content class="bg-background-base">
|
<Accordion.Content class="bg-background-base">
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
<RawMessageContent message={props.message} getParts={props.getParts} onRendered={props.onRendered} />
|
<RawMessageContent message={props.message} onRendered={props.onRendered} />
|
||||||
</div>
|
</div>
|
||||||
</Accordion.Content>
|
</Accordion.Content>
|
||||||
</Accordion.Item>
|
</Accordion.Item>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const emptyMessages: Message[] = []
|
const emptyMessages: SessionMessageInfo[] = []
|
||||||
const emptyUserMessages: UserMessage[] = []
|
|
||||||
|
|
||||||
export function SessionContextTab() {
|
export function SessionContextTab() {
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
|
const serverSDK = useServerSDK()
|
||||||
const providers = useProviders(() => sdk().directory)
|
const providers = useProviders(() => sdk().directory)
|
||||||
const { params, view } = useSessionLayout()
|
const { params, view } = useSessionLayout()
|
||||||
|
|
||||||
const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))
|
const info = createMemo(() => (params.id ? data.session.get(params.id) : undefined))
|
||||||
|
|
||||||
const messages = createMemo(
|
const messages = createMemo(
|
||||||
() => {
|
() => {
|
||||||
const id = params.id
|
const id = params.id
|
||||||
if (!id) return emptyMessages
|
if (!id) return emptyMessages
|
||||||
return (sync().data.message[id] ?? []) as Message[]
|
return data.session.message.list(id)
|
||||||
},
|
},
|
||||||
emptyMessages,
|
emptyMessages,
|
||||||
{ equals: same },
|
{ equals: same },
|
||||||
)
|
)
|
||||||
|
|
||||||
const userMessages = createMemo(
|
|
||||||
() => messages().filter((m) => m.role === "user") as UserMessage[],
|
|
||||||
emptyUserMessages,
|
|
||||||
{ equals: same },
|
|
||||||
)
|
|
||||||
|
|
||||||
const visibleUserMessages = createMemo(
|
|
||||||
() => {
|
|
||||||
const revert = info()?.revert?.messageID
|
|
||||||
if (!revert) return userMessages()
|
|
||||||
const boundary = userMessages().findIndex((message) => message.id === revert)
|
|
||||||
return boundary < 0 ? userMessages() : userMessages().slice(0, boundary)
|
|
||||||
},
|
|
||||||
emptyUserMessages,
|
|
||||||
{ equals: same },
|
|
||||||
)
|
|
||||||
|
|
||||||
const usd = createMemo(
|
const usd = createMemo(
|
||||||
() =>
|
() =>
|
||||||
new Intl.NumberFormat(language.intl(), {
|
new Intl.NumberFormat(language.intl(), {
|
||||||
@@ -138,7 +109,28 @@ export function SessionContextTab() {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
const ctx = createMemo(() => getSessionContext(messages(), [...providers.all().values()]))
|
const ctx = createMemo(() => {
|
||||||
|
const message = messages().findLast((item) => item.type === "assistant" && !!item.tokens)
|
||||||
|
if (message?.type !== "assistant" || !message.tokens) return
|
||||||
|
const provider = providers.all().get(message.model.providerID)
|
||||||
|
const model = provider?.models[message.model.id]
|
||||||
|
const total =
|
||||||
|
message.tokens.input +
|
||||||
|
message.tokens.output +
|
||||||
|
message.tokens.reasoning +
|
||||||
|
message.tokens.cache.read +
|
||||||
|
message.tokens.cache.write
|
||||||
|
return {
|
||||||
|
message,
|
||||||
|
tokens: message.tokens,
|
||||||
|
providerLabel: provider?.name ?? message.model.providerID,
|
||||||
|
modelLabel: model?.name ?? message.model.id,
|
||||||
|
limit: model?.limit.context,
|
||||||
|
input: message.tokens.input,
|
||||||
|
total,
|
||||||
|
usage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
|
||||||
|
}
|
||||||
|
})
|
||||||
const formatter = createMemo(() => createSessionContextFormatter(language.intl()))
|
const formatter = createMemo(() => createSessionContextFormatter(language.intl()))
|
||||||
|
|
||||||
const cost = createMemo(() => {
|
const cost = createMemo(() => {
|
||||||
@@ -147,8 +139,8 @@ export function SessionContextTab() {
|
|||||||
|
|
||||||
const counts = createMemo(() => {
|
const counts = createMemo(() => {
|
||||||
const all = messages()
|
const all = messages()
|
||||||
const user = all.reduce((count, x) => count + (x.role === "user" ? 1 : 0), 0)
|
const user = all.reduce((count, message) => count + (message.type === "user" ? 1 : 0), 0)
|
||||||
const assistant = all.reduce((count, x) => count + (x.role === "assistant" ? 1 : 0), 0)
|
const assistant = all.reduce((count, message) => count + (message.type === "assistant" ? 1 : 0), 0)
|
||||||
return {
|
return {
|
||||||
all: all.length,
|
all: all.length,
|
||||||
user,
|
user,
|
||||||
@@ -157,8 +149,7 @@ export function SessionContextTab() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const systemPrompt = createMemo(() => {
|
const systemPrompt = createMemo(() => {
|
||||||
const msg = findLast(visibleUserMessages(), (m) => !!m.system)
|
const system = messages().findLast((message) => message.type === "system")?.text
|
||||||
const system = msg?.system
|
|
||||||
if (!system) return
|
if (!system) return
|
||||||
const trimmed = system.trim()
|
const trimmed = system.trim()
|
||||||
if (!trimmed) return
|
if (!trimmed) return
|
||||||
@@ -177,30 +168,6 @@ export function SessionContextTab() {
|
|||||||
return c.modelLabel
|
return c.modelLabel
|
||||||
})
|
})
|
||||||
|
|
||||||
const breakdown = createMemo(
|
|
||||||
on(
|
|
||||||
() => [ctx()?.message.id, ctx()?.input, messages().length, systemPrompt()],
|
|
||||||
() => {
|
|
||||||
const c = ctx()
|
|
||||||
if (!c?.input) return []
|
|
||||||
return estimateSessionContextBreakdown({
|
|
||||||
messages: messages(),
|
|
||||||
parts: sync().data.part as Record<string, Part[] | undefined>,
|
|
||||||
input: c.input,
|
|
||||||
systemPrompt: systemPrompt(),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
),
|
|
||||||
)
|
|
||||||
|
|
||||||
const breakdownLabel = (key: SessionContextBreakdownKey) => {
|
|
||||||
if (key === "system") return language.t("context.breakdown.system")
|
|
||||||
if (key === "user") return language.t("context.breakdown.user")
|
|
||||||
if (key === "assistant") return language.t("context.breakdown.assistant")
|
|
||||||
if (key === "tool") return language.t("context.breakdown.tool")
|
|
||||||
return language.t("context.breakdown.other")
|
|
||||||
}
|
|
||||||
|
|
||||||
const stats = [
|
const stats = [
|
||||||
{ label: "context.stats.session", value: () => info()?.title ?? params.id ?? "—" },
|
{ label: "context.stats.session", value: () => info()?.title ?? params.id ?? "—" },
|
||||||
{ label: "context.stats.messages", value: () => counts().all.toLocaleString(language.intl()) },
|
{ label: "context.stats.messages", value: () => counts().all.toLocaleString(language.intl()) },
|
||||||
@@ -210,12 +177,12 @@ export function SessionContextTab() {
|
|||||||
{ label: "context.stats.totalTokens", value: () => formatter().number(ctx()?.total) },
|
{ label: "context.stats.totalTokens", value: () => formatter().number(ctx()?.total) },
|
||||||
{ label: "context.stats.usage", value: () => formatter().percent(ctx()?.usage) },
|
{ label: "context.stats.usage", value: () => formatter().percent(ctx()?.usage) },
|
||||||
{ label: "context.stats.inputTokens", value: () => formatter().number(ctx()?.input) },
|
{ label: "context.stats.inputTokens", value: () => formatter().number(ctx()?.input) },
|
||||||
{ label: "context.stats.outputTokens", value: () => formatter().number(ctx()?.message.tokens.output) },
|
{ label: "context.stats.outputTokens", value: () => formatter().number(ctx()?.tokens.output) },
|
||||||
{ label: "context.stats.reasoningTokens", value: () => formatter().number(ctx()?.message.tokens.reasoning) },
|
{ label: "context.stats.reasoningTokens", value: () => formatter().number(ctx()?.tokens.reasoning) },
|
||||||
{
|
{
|
||||||
label: "context.stats.cacheTokens",
|
label: "context.stats.cacheTokens",
|
||||||
value: () =>
|
value: () =>
|
||||||
`${formatter().number(ctx()?.message.tokens.cache.read)} / ${formatter().number(ctx()?.message.tokens.cache.write)}`,
|
`${formatter().number(ctx()?.tokens.cache.read)} / ${formatter().number(ctx()?.tokens.cache.write)}`,
|
||||||
},
|
},
|
||||||
{ label: "context.stats.userMessages", value: () => counts().user.toLocaleString(language.intl()) },
|
{ label: "context.stats.userMessages", value: () => counts().user.toLocaleString(language.intl()) },
|
||||||
{ label: "context.stats.assistantMessages", value: () => counts().assistant.toLocaleString(language.intl()) },
|
{ label: "context.stats.assistantMessages", value: () => counts().assistant.toLocaleString(language.intl()) },
|
||||||
@@ -230,7 +197,7 @@ export function SessionContextTab() {
|
|||||||
try {
|
try {
|
||||||
const data = await fetchSessionExport({
|
const data = await fetchSessionExport({
|
||||||
sessionID,
|
sessionID,
|
||||||
api: sdk().api,
|
api: serverSDK.api,
|
||||||
})
|
})
|
||||||
const filename = sessionExportFilename(data.info)
|
const filename = sessionExportFilename(data.info)
|
||||||
downloadSessionExport(filename, data)
|
downloadSessionExport(filename, data)
|
||||||
@@ -252,8 +219,6 @@ export function SessionContextTab() {
|
|||||||
let scroll: HTMLDivElement | undefined
|
let scroll: HTMLDivElement | undefined
|
||||||
let frame: number | undefined
|
let frame: number | undefined
|
||||||
let pending: { x: number; y: number } | undefined
|
let pending: { x: number; y: number } | undefined
|
||||||
const getParts = (id: string) => (sync().data.part[id] ?? []) as Part[]
|
|
||||||
|
|
||||||
const restoreScroll = () => {
|
const restoreScroll = () => {
|
||||||
const el = scroll
|
const el = scroll
|
||||||
if (!el) return
|
if (!el) return
|
||||||
@@ -314,37 +279,6 @@ export function SessionContextTab() {
|
|||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={breakdown().length > 0}>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="text-12-regular text-text-weak">{language.t("context.breakdown.title")}</div>
|
|
||||||
<div class="h-2 w-full rounded-full bg-surface-base overflow-hidden flex">
|
|
||||||
<For each={breakdown()}>
|
|
||||||
{(segment) => (
|
|
||||||
<div
|
|
||||||
class="h-full"
|
|
||||||
style={{
|
|
||||||
width: `${segment.width}%`,
|
|
||||||
"background-color": BREAKDOWN_COLOR[segment.key],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap gap-x-3 gap-y-1">
|
|
||||||
<For each={breakdown()}>
|
|
||||||
{(segment) => (
|
|
||||||
<div class="flex items-center gap-1 text-11-regular text-text-weak">
|
|
||||||
<div class="size-2 rounded-sm" style={{ "background-color": BREAKDOWN_COLOR[segment.key] }} />
|
|
||||||
<div>{breakdownLabel(segment.key)}</div>
|
|
||||||
<div class="text-text-weaker">{segment.percent.toLocaleString(language.intl())}%</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
<div class="hidden text-11-regular text-text-weaker">{language.t("context.breakdown.note")}</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={systemPrompt()}>
|
<Show when={systemPrompt()}>
|
||||||
{(prompt) => (
|
{(prompt) => (
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
@@ -372,7 +306,7 @@ export function SessionContextTab() {
|
|||||||
<Accordion multiple>
|
<Accordion multiple>
|
||||||
<For each={messages()}>
|
<For each={messages()}>
|
||||||
{(message) => (
|
{(message) => (
|
||||||
<RawMessage message={message} getParts={getParts} onRendered={restoreScroll} time={formatter().time} />
|
<RawMessage message={message} onRendered={restoreScroll} time={formatter().time} />
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import { Show, createMemo } from "solid-js"
|
import { Show, createMemo } from "solid-js"
|
||||||
import { DateTime } from "luxon"
|
import { DateTime } from "luxon"
|
||||||
import { useSync } from "@/context/sync"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { useSDK } from "@/context/sdk"
|
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
|
import { useData } from "@/context/server"
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
import { Icon } from "@opencode-ai/ui/icon"
|
||||||
import { Mark } from "@opencode-ai/ui/logo"
|
import { Mark } from "@opencode-ai/ui/logo"
|
||||||
import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
|
import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
|
||||||
@@ -16,28 +16,32 @@ interface NewSessionViewProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function NewSessionView(props: NewSessionViewProps) {
|
export function NewSessionView(props: NewSessionViewProps) {
|
||||||
const sync = useSync()
|
const sdk = useWorkspaceLocation()
|
||||||
const sdk = useSDK()
|
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
|
const data = useData()
|
||||||
|
|
||||||
const sandboxes = createMemo(() => sync().project?.sandboxes ?? [])
|
const project = createMemo(() => {
|
||||||
|
const projectID = data.location.info({ directory: sdk().directory })?.project.id
|
||||||
|
return projectID ? data.project.get(projectID) : undefined
|
||||||
|
})
|
||||||
|
const sandboxes = createMemo(() => project()?.sandboxes ?? [])
|
||||||
const options = createMemo(() => [MAIN_WORKTREE, ...sandboxes(), CREATE_WORKTREE])
|
const options = createMemo(() => [MAIN_WORKTREE, ...sandboxes(), CREATE_WORKTREE])
|
||||||
const current = createMemo(() => {
|
const current = createMemo(() => {
|
||||||
const selection = props.worktree
|
const selection = props.worktree
|
||||||
if (options().includes(selection)) return selection
|
if (options().includes(selection)) return selection
|
||||||
return MAIN_WORKTREE
|
return MAIN_WORKTREE
|
||||||
})
|
})
|
||||||
const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
|
const projectRoot = createMemo(() => project()?.canonical ?? sdk().directory)
|
||||||
const isWorktree = createMemo(() => {
|
const isWorktree = createMemo(() => {
|
||||||
const project = sync().project
|
const current = project()
|
||||||
if (!project) return false
|
if (!current) return false
|
||||||
return sdk().directory !== project.worktree
|
return sdk().directory !== current.canonical
|
||||||
})
|
})
|
||||||
|
|
||||||
const label = (value: string) => {
|
const label = (value: string) => {
|
||||||
if (value === MAIN_WORKTREE) {
|
if (value === MAIN_WORKTREE) {
|
||||||
if (isWorktree()) return language.t("session.new.worktree.main")
|
if (isWorktree()) return language.t("session.new.worktree.main")
|
||||||
const branch = sync().data.vcs?.branch
|
const branch = data.location.vcs.info({ directory: sdk().directory })?.branch.current
|
||||||
if (branch) return language.t("session.new.worktree.mainWithBranch", { branch })
|
if (branch) return language.t("session.new.worktree.mainWithBranch", { branch })
|
||||||
return language.t("session.new.worktree.main")
|
return language.t("session.new.worktree.main")
|
||||||
}
|
}
|
||||||
@@ -69,7 +73,7 @@ export function NewSessionView(props: NewSessionViewProps) {
|
|||||||
{label(current())}
|
{label(current())}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Show when={sync().project}>
|
<Show when={project()}>
|
||||||
{(project) => (
|
{(project) => (
|
||||||
<div class="flex items-start justify-center gap-3 min-h-5">
|
<div class="flex items-start justify-center gap-3 min-h-5">
|
||||||
<div class="text-12-medium text-text-weak leading-5 min-w-0 max-w-160 break-words text-center">
|
<div class="text-12-medium text-text-weak leading-5 min-w-0 max-w-160 break-words text-center">
|
||||||
|
|||||||
@@ -1,14 +1,7 @@
|
|||||||
import { createMemo, Show } from "solid-js"
|
import { Show } from "solid-js"
|
||||||
import type { JSX } from "solid-js"
|
import type { JSX } from "solid-js"
|
||||||
import { createSortable } from "@thisbeyond/solid-dnd"
|
|
||||||
import { FileIcon } from "@opencode-ai/ui/file-icon"
|
import { FileIcon } from "@opencode-ai/ui/file-icon"
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
|
||||||
import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
|
|
||||||
import { Tabs } from "@opencode-ai/ui/tabs"
|
|
||||||
import { getFilename } from "@opencode-ai/core/util/path"
|
import { getFilename } from "@opencode-ai/core/util/path"
|
||||||
import { useFile } from "@/context/file"
|
|
||||||
import { useLanguage } from "@/context/language"
|
|
||||||
import { useCommand } from "@/context/command"
|
|
||||||
|
|
||||||
export function FileVisual(props: { path: string; active?: boolean; temporary?: boolean }): JSX.Element {
|
export function FileVisual(props: { path: string; active?: boolean; temporary?: boolean }): JSX.Element {
|
||||||
return (
|
return (
|
||||||
@@ -28,51 +21,3 @@ export function FileVisual(props: { path: string; active?: boolean; temporary?:
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SortableTab(props: {
|
|
||||||
tab: string
|
|
||||||
temporary?: boolean
|
|
||||||
onTabClose: (tab: string) => void
|
|
||||||
onTabDoubleClick?: (tab: string) => void
|
|
||||||
}): JSX.Element {
|
|
||||||
const file = useFile()
|
|
||||||
const language = useLanguage()
|
|
||||||
const command = useCommand()
|
|
||||||
const sortable = createSortable(props.tab)
|
|
||||||
const path = createMemo(() => file.pathFromTab(props.tab))
|
|
||||||
const content = createMemo(() => {
|
|
||||||
const value = path()
|
|
||||||
if (!value) return
|
|
||||||
return <FileVisual path={value} temporary={props.temporary} />
|
|
||||||
})
|
|
||||||
return (
|
|
||||||
<div use:sortable class="h-full flex items-center" classList={{ "opacity-0": sortable.isActiveDraggable }}>
|
|
||||||
<div class="relative">
|
|
||||||
<Tabs.Trigger
|
|
||||||
value={props.tab}
|
|
||||||
closeButton={
|
|
||||||
<TooltipKeybind
|
|
||||||
title={language.t("common.closeTab")}
|
|
||||||
keybind={command.keybind("tab.close")}
|
|
||||||
placement="bottom"
|
|
||||||
gutter={10}
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
icon="close-small"
|
|
||||||
variant="ghost"
|
|
||||||
class="h-5 w-5"
|
|
||||||
onClick={() => props.onTabClose(props.tab)}
|
|
||||||
aria-label={language.t("common.closeTab")}
|
|
||||||
/>
|
|
||||||
</TooltipKeybind>
|
|
||||||
}
|
|
||||||
hideCloseButton
|
|
||||||
onMiddleClick={() => props.onTabClose(props.tab)}
|
|
||||||
onDblClick={() => props.onTabDoubleClick?.(props.tab)}
|
|
||||||
>
|
|
||||||
<Show when={content()}>{(value) => value()}</Show>
|
|
||||||
</Tabs.Trigger>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -4,20 +4,13 @@ import { createStore } from "solid-js/store"
|
|||||||
import { useSortable } from "@dnd-kit/solid/sortable"
|
import { useSortable } from "@dnd-kit/solid/sortable"
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
import { IconButton } from "@opencode-ai/ui/icon-button"
|
||||||
import { Tabs } from "@opencode-ai/ui/tabs"
|
import { Tabs } from "@opencode-ai/ui/tabs"
|
||||||
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
|
||||||
import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
|
import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
|
||||||
import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
|
import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
|
||||||
import { useTerminal, type LocalPTY } from "@/context/terminal"
|
import { useTerminal, type LocalPTY } from "@/context/terminal"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { focusTerminalById } from "@/pages/session/helpers"
|
import { focusTerminalById } from "@/pages/session/helpers"
|
||||||
|
|
||||||
export function SortableTerminalTabV2(props: {
|
export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number; onClose?: () => void }): JSX.Element {
|
||||||
terminal: LocalPTY
|
|
||||||
index: number
|
|
||||||
newLayout: boolean
|
|
||||||
onClose?: () => void
|
|
||||||
}): JSX.Element {
|
|
||||||
const terminal = useTerminal()
|
const terminal = useTerminal()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const sortable = useSortable({
|
const sortable = useSortable({
|
||||||
@@ -31,8 +24,6 @@ export function SortableTerminalTabV2(props: {
|
|||||||
const [store, setStore] = createStore({
|
const [store, setStore] = createStore({
|
||||||
editing: false,
|
editing: false,
|
||||||
title: props.terminal.title,
|
title: props.terminal.title,
|
||||||
menuOpen: false,
|
|
||||||
menuPosition: { x: 0, y: 0 },
|
|
||||||
blurEnabled: false,
|
blurEnabled: false,
|
||||||
})
|
})
|
||||||
let input: HTMLInputElement | undefined
|
let input: HTMLInputElement | undefined
|
||||||
@@ -106,12 +97,6 @@ export function SortableTerminalTabV2(props: {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const menu = (e: MouseEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
setStore("menuPosition", { x: e.clientX, y: e.clientY })
|
|
||||||
setStore("menuOpen", true)
|
|
||||||
}
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
if (!store.editing) return
|
if (!store.editing) return
|
||||||
if (!input) return
|
if (!input) return
|
||||||
@@ -130,155 +115,75 @@ export function SortableTerminalTabV2(props: {
|
|||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div ref={sortable.ref} class="h-full flex items-center outline-none focus:outline-none focus-visible:outline-none">
|
||||||
ref={sortable.ref}
|
<MenuV2.Context>
|
||||||
class="outline-none focus:outline-none focus-visible:outline-none"
|
<MenuV2.Context.Trigger class="relative" as="div">
|
||||||
classList={{
|
<Tabs.Trigger
|
||||||
"h-full flex items-center": props.newLayout,
|
value={props.terminal.id}
|
||||||
"h-full": !props.newLayout,
|
onMouseDown={(e) => {
|
||||||
}}
|
// Switch on mousedown to shave the press-release delay off tab switches.
|
||||||
>
|
if (e.button !== 0) return
|
||||||
<Show
|
if (store.editing) return
|
||||||
when={props.newLayout}
|
focus()
|
||||||
fallback={
|
}}
|
||||||
<div class="relative h-full">
|
onClick={(e) => {
|
||||||
<Tabs.Trigger
|
// Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
|
||||||
value={props.terminal.id}
|
if (e.detail > 0) return
|
||||||
onClick={focus}
|
focus()
|
||||||
onMouseDown={(e) => e.preventDefault()}
|
}}
|
||||||
onContextMenu={menu}
|
closeButton={
|
||||||
class="!shadow-none"
|
<IconButton
|
||||||
classes={{
|
icon="close-small"
|
||||||
button: "border-0 outline-none focus:outline-none focus-visible:outline-none !shadow-none !ring-0",
|
variant="ghost"
|
||||||
}}
|
class="h-5 w-5"
|
||||||
closeButton={
|
onClick={(e) => {
|
||||||
<IconButton
|
e.stopPropagation()
|
||||||
icon="close"
|
close()
|
||||||
variant="ghost"
|
}}
|
||||||
onClick={(e) => {
|
aria-label={language.t("terminal.close")}
|
||||||
e.stopPropagation()
|
/>
|
||||||
close()
|
}
|
||||||
}}
|
hideCloseButton
|
||||||
aria-label={language.t("terminal.close")}
|
onMiddleClick={close}
|
||||||
/>
|
>
|
||||||
}
|
<span
|
||||||
|
class="truncate"
|
||||||
|
data-slot="terminal-tab-title"
|
||||||
|
onDblClick={edit}
|
||||||
|
classList={{ invisible: store.editing }}
|
||||||
>
|
>
|
||||||
<span onDblClick={edit} classList={{ invisible: store.editing }}>
|
{label()}
|
||||||
{label()}
|
</span>
|
||||||
</span>
|
</Tabs.Trigger>
|
||||||
</Tabs.Trigger>
|
<Show when={store.editing}>
|
||||||
<Show when={store.editing}>
|
<div class="absolute inset-0 flex items-center bg-v2-background-bg-layer-01 z-10 pointer-events-auto rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-muted)] px-2">
|
||||||
<div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
|
<input
|
||||||
<input
|
ref={input}
|
||||||
ref={input}
|
type="text"
|
||||||
type="text"
|
value={store.title}
|
||||||
value={store.title}
|
onInput={(e) => setStore("title", e.currentTarget.value)}
|
||||||
onInput={(e) => setStore("title", e.currentTarget.value)}
|
onBlur={save}
|
||||||
onBlur={save}
|
onKeyDown={keydown}
|
||||||
onKeyDown={keydown}
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
class="bg-transparent border-none outline-none min-w-0 flex-1 p-0 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-base [font-weight:440] [font-variation-settings:'slnt'_0] [font-variant-numeric:tabular-nums]"
|
||||||
class="bg-transparent border-none outline-none text-sm min-w-0 flex-1"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</Show>
|
||||||
</Show>
|
</MenuV2.Context.Trigger>
|
||||||
<DropdownMenu open={store.menuOpen} onOpenChange={(open) => setStore("menuOpen", open)}>
|
<MenuV2.Context.Portal>
|
||||||
<DropdownMenu.Portal>
|
<MenuV2.Context.Content
|
||||||
<DropdownMenu.Content
|
onCloseAutoFocus={(e) => {
|
||||||
class="fixed"
|
if (!editRequested) return
|
||||||
style={{
|
e.preventDefault()
|
||||||
left: `${store.menuPosition.x}px`,
|
editRequested = false
|
||||||
top: `${store.menuPosition.y}px`,
|
requestAnimationFrame(() => edit())
|
||||||
}}
|
}}
|
||||||
onCloseAutoFocus={(e) => {
|
>
|
||||||
if (!editRequested) return
|
<MenuV2.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</MenuV2.Item>
|
||||||
e.preventDefault()
|
<MenuV2.Item onSelect={close}>{language.t("common.close")}</MenuV2.Item>
|
||||||
editRequested = false
|
</MenuV2.Context.Content>
|
||||||
requestAnimationFrame(() => edit())
|
</MenuV2.Context.Portal>
|
||||||
}}
|
</MenuV2.Context>
|
||||||
>
|
|
||||||
<DropdownMenu.Item onSelect={() => (editRequested = true)}>
|
|
||||||
<Icon name="edit" class="w-4 h-4 mr-2" />
|
|
||||||
{language.t("common.rename")}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item onSelect={close}>
|
|
||||||
<Icon name="close" class="w-4 h-4 mr-2" />
|
|
||||||
{language.t("common.close")}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Portal>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<MenuV2.Context>
|
|
||||||
<MenuV2.Context.Trigger class="relative" as="div">
|
|
||||||
<Tabs.Trigger
|
|
||||||
value={props.terminal.id}
|
|
||||||
onMouseDown={(e) => {
|
|
||||||
// Switch on mousedown to shave the press-release delay off tab switches.
|
|
||||||
if (e.button !== 0) return
|
|
||||||
if (store.editing) return
|
|
||||||
focus()
|
|
||||||
}}
|
|
||||||
onClick={(e) => {
|
|
||||||
// Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
|
|
||||||
if (e.detail > 0) return
|
|
||||||
focus()
|
|
||||||
}}
|
|
||||||
closeButton={
|
|
||||||
<IconButton
|
|
||||||
icon="close-small"
|
|
||||||
variant="ghost"
|
|
||||||
class="h-5 w-5"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
close()
|
|
||||||
}}
|
|
||||||
aria-label={language.t("terminal.close")}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
hideCloseButton
|
|
||||||
onMiddleClick={close}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="truncate"
|
|
||||||
data-slot="terminal-tab-title"
|
|
||||||
onDblClick={edit}
|
|
||||||
classList={{ invisible: store.editing }}
|
|
||||||
>
|
|
||||||
{label()}
|
|
||||||
</span>
|
|
||||||
</Tabs.Trigger>
|
|
||||||
<Show when={store.editing}>
|
|
||||||
<div class="absolute inset-0 flex items-center bg-v2-background-bg-layer-01 z-10 pointer-events-auto rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-muted)] px-2">
|
|
||||||
<input
|
|
||||||
ref={input}
|
|
||||||
type="text"
|
|
||||||
value={store.title}
|
|
||||||
onInput={(e) => setStore("title", e.currentTarget.value)}
|
|
||||||
onBlur={save}
|
|
||||||
onKeyDown={keydown}
|
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
|
||||||
class="bg-transparent border-none outline-none min-w-0 flex-1 p-0 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-base [font-weight:440] [font-variation-settings:'slnt'_0] [font-variant-numeric:tabular-nums]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</MenuV2.Context.Trigger>
|
|
||||||
<MenuV2.Context.Portal>
|
|
||||||
<MenuV2.Context.Content
|
|
||||||
onCloseAutoFocus={(e) => {
|
|
||||||
if (!editRequested) return
|
|
||||||
e.preventDefault()
|
|
||||||
editRequested = false
|
|
||||||
requestAnimationFrame(() => edit())
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuV2.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</MenuV2.Item>
|
|
||||||
<MenuV2.Item onSelect={close}>{language.t("common.close")}</MenuV2.Item>
|
|
||||||
</MenuV2.Context.Content>
|
|
||||||
</MenuV2.Context.Portal>
|
|
||||||
</MenuV2.Context>
|
|
||||||
</Show>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,193 +0,0 @@
|
|||||||
import type { JSX } from "solid-js"
|
|
||||||
import { Show, createEffect, onCleanup } from "solid-js"
|
|
||||||
import { createStore } from "solid-js/store"
|
|
||||||
import { createSortable } from "@thisbeyond/solid-dnd"
|
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
|
||||||
import { Tabs } from "@opencode-ai/ui/tabs"
|
|
||||||
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
|
||||||
import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
|
|
||||||
import { useTerminal, type LocalPTY } from "@/context/terminal"
|
|
||||||
import { useLanguage } from "@/context/language"
|
|
||||||
import { focusTerminalById } from "@/pages/session/helpers"
|
|
||||||
|
|
||||||
export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () => void }): JSX.Element {
|
|
||||||
const terminal = useTerminal()
|
|
||||||
const language = useLanguage()
|
|
||||||
const sortable = createSortable(props.terminal.id)
|
|
||||||
const [store, setStore] = createStore({
|
|
||||||
editing: false,
|
|
||||||
title: props.terminal.title,
|
|
||||||
menuOpen: false,
|
|
||||||
menuPosition: { x: 0, y: 0 },
|
|
||||||
blurEnabled: false,
|
|
||||||
})
|
|
||||||
let input: HTMLInputElement | undefined
|
|
||||||
let blurFrame: number | undefined
|
|
||||||
let editRequested = false
|
|
||||||
|
|
||||||
const isDefaultTitle = () => {
|
|
||||||
const number = props.terminal.titleNumber
|
|
||||||
if (!Number.isFinite(number) || number <= 0) return false
|
|
||||||
return isDefaultTerminalTitle(props.terminal.title, number)
|
|
||||||
}
|
|
||||||
|
|
||||||
const label = () => {
|
|
||||||
language.locale()
|
|
||||||
if (props.terminal.title && !isDefaultTitle()) return props.terminal.title
|
|
||||||
|
|
||||||
const number = props.terminal.titleNumber
|
|
||||||
if (Number.isFinite(number) && number > 0) return language.t("terminal.title.numbered", { number })
|
|
||||||
if (props.terminal.title) return props.terminal.title
|
|
||||||
return language.t("terminal.title")
|
|
||||||
}
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
const count = terminal.all().length
|
|
||||||
void terminal.close(props.terminal.id)
|
|
||||||
if (count === 1) {
|
|
||||||
props.onClose?.()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const focus = () => {
|
|
||||||
if (store.editing) return
|
|
||||||
if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
|
|
||||||
focusTerminalById(props.terminal.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
const edit = (e?: Event) => {
|
|
||||||
if (e) {
|
|
||||||
e.stopPropagation()
|
|
||||||
e.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
setStore("blurEnabled", false)
|
|
||||||
setStore("title", props.terminal.title)
|
|
||||||
setStore("editing", true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
if (!store.blurEnabled) return
|
|
||||||
|
|
||||||
const value = store.title.trim()
|
|
||||||
if (value && value !== props.terminal.title) {
|
|
||||||
terminal.update({ id: props.terminal.id, title: value })
|
|
||||||
}
|
|
||||||
setStore("editing", false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const keydown = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
e.preventDefault()
|
|
||||||
save()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (e.key === "Escape") {
|
|
||||||
e.preventDefault()
|
|
||||||
setStore("editing", false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const menu = (e: MouseEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
setStore("menuPosition", { x: e.clientX, y: e.clientY })
|
|
||||||
setStore("menuOpen", true)
|
|
||||||
}
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
if (!store.editing) return
|
|
||||||
if (!input) return
|
|
||||||
input.focus()
|
|
||||||
input.select()
|
|
||||||
if (blurFrame !== undefined) cancelAnimationFrame(blurFrame)
|
|
||||||
blurFrame = requestAnimationFrame(() => {
|
|
||||||
blurFrame = undefined
|
|
||||||
setStore("blurEnabled", true)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
onCleanup(() => {
|
|
||||||
if (blurFrame === undefined) return
|
|
||||||
cancelAnimationFrame(blurFrame)
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
use:sortable
|
|
||||||
class="outline-none focus:outline-none focus-visible:outline-none"
|
|
||||||
classList={{
|
|
||||||
"h-full": true,
|
|
||||||
"opacity-0": sortable.isActiveDraggable,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="relative h-full">
|
|
||||||
<Tabs.Trigger
|
|
||||||
value={props.terminal.id}
|
|
||||||
onClick={focus}
|
|
||||||
onMouseDown={(e) => e.preventDefault()}
|
|
||||||
onContextMenu={menu}
|
|
||||||
class="!shadow-none"
|
|
||||||
classes={{
|
|
||||||
button: "border-0 outline-none focus:outline-none focus-visible:outline-none !shadow-none !ring-0",
|
|
||||||
}}
|
|
||||||
closeButton={
|
|
||||||
<IconButton
|
|
||||||
icon="close"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
close()
|
|
||||||
}}
|
|
||||||
aria-label={language.t("terminal.close")}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span onDblClick={edit} classList={{ invisible: store.editing }}>
|
|
||||||
{label()}
|
|
||||||
</span>
|
|
||||||
</Tabs.Trigger>
|
|
||||||
<Show when={store.editing}>
|
|
||||||
<div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
|
|
||||||
<input
|
|
||||||
ref={input}
|
|
||||||
type="text"
|
|
||||||
value={store.title}
|
|
||||||
onInput={(e) => setStore("title", e.currentTarget.value)}
|
|
||||||
onBlur={save}
|
|
||||||
onKeyDown={keydown}
|
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
|
||||||
class="bg-transparent border-none outline-none text-sm min-w-0 flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
<DropdownMenu open={store.menuOpen} onOpenChange={(open) => setStore("menuOpen", open)}>
|
|
||||||
<DropdownMenu.Portal>
|
|
||||||
<DropdownMenu.Content
|
|
||||||
class="fixed"
|
|
||||||
style={{
|
|
||||||
left: `${store.menuPosition.x}px`,
|
|
||||||
top: `${store.menuPosition.y}px`,
|
|
||||||
}}
|
|
||||||
onCloseAutoFocus={(e) => {
|
|
||||||
if (!editRequested) return
|
|
||||||
e.preventDefault()
|
|
||||||
editRequested = false
|
|
||||||
requestAnimationFrame(() => edit())
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DropdownMenu.Item onSelect={() => (editRequested = true)}>
|
|
||||||
<Icon name="edit" class="w-4 h-4 mr-2" />
|
|
||||||
{language.t("common.rename")}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item onSelect={close}>
|
|
||||||
<Icon name="close" class="w-4 h-4 mr-2" />
|
|
||||||
{language.t("common.close")}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Portal>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -63,7 +63,7 @@ export const DialogSettings: Component<{
|
|||||||
const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
|
const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
|
||||||
return draft?.type === "draft" ? draft.directory : undefined
|
return draft?.type === "draft" ? draft.directory : undefined
|
||||||
}
|
}
|
||||||
if (route.type === "session") return serverCtx()?.sync.session.get(route.sessionId)?.location.directory
|
if (route.type === "session") return serverCtx()?.data.session.get(route.sessionId)?.location.directory
|
||||||
return undefined
|
return undefined
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
import { Component, For, createMemo, createResource } from "solid-js"
|
import { Component, For, createEffect, createMemo, createResource } from "solid-js"
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
import { Icon } from "@opencode-ai/ui/icon"
|
||||||
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
|
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
|
||||||
import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
|
import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
|
import { useData } from "@/context/server"
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
import { useMcpToggle } from "@/context/mcp"
|
||||||
import { ExternalLink } from "../external-link"
|
import { ExternalLink } from "../external-link"
|
||||||
import { InlineServerSelect } from "./parts/server-select"
|
import { InlineServerSelect } from "./parts/server-select"
|
||||||
import "./settings-v2.css"
|
import "./settings-v2.css"
|
||||||
@@ -21,35 +22,35 @@ interface PluginRowItem {
|
|||||||
export const SettingsExtensionsV2: Component = () => {
|
export const SettingsExtensionsV2: Component = () => {
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const serverSdk = useServerSDK()
|
const serverSdk = useServerSDK()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
|
const [mcpList, { refetch: refetchMcp }] = createResource(
|
||||||
|
() => serverSdk.connection.status() === "connected",
|
||||||
|
() => serverSdk.api.mcp.list().then((result) => result.data),
|
||||||
|
)
|
||||||
|
const toggleMcp = useMcpToggle(() => undefined, refetchMcp)
|
||||||
const mcps = createMemo<McpRowItem[]>(() => {
|
const mcps = createMemo<McpRowItem[]>(() => {
|
||||||
const configMcp = serverSync.data.config.mcp ?? {}
|
return (mcpList.latest ?? []).map((server) => ({
|
||||||
return Object.entries(configMcp).map(([name, config]) => ({
|
name: server.name,
|
||||||
name,
|
enabled: server.status.status === "connected",
|
||||||
enabled: typeof config !== "object" || config === null || !("enabled" in config) || config.enabled !== false,
|
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleMcpToggle = (item: McpRowItem, checked: boolean) => {
|
const handleMcpToggle = (item: McpRowItem, checked: boolean) => {
|
||||||
const before = serverSync.data.config.mcp ?? {}
|
if (item.enabled === checked || toggleMcp.isPending) return
|
||||||
const config = before[item.name]
|
toggleMcp.mutate(item.name)
|
||||||
if (typeof config !== "object" || config === null) return
|
|
||||||
const next = { ...before, [item.name]: { ...config, enabled: checked } }
|
|
||||||
serverSync.set("config", "mcp", next)
|
|
||||||
void serverSync.updateConfig({ mcp: next }).catch(() => serverSync.set("config", "mcp", before))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const plugins = createMemo<PluginRowItem[]>(() => {
|
const [pluginList] = createResource(
|
||||||
const raw = serverSync.data.config.plugin ?? []
|
() => serverSdk.connection.status() === "connected",
|
||||||
return raw.map((item) => {
|
() => serverSdk.api.plugin.list().then((result) => result.data),
|
||||||
const name = typeof item === "string" ? item : item[0]
|
)
|
||||||
return { name }
|
const plugins = createMemo<PluginRowItem[]>(() => (pluginList.latest ?? []).map((item) => ({ name: item.id })))
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const [skills] = createResource(serverSdk, (sdk) => sdk.api.skill.list().then((result) => result.data), {
|
createEffect(() => {
|
||||||
initialValue: [],
|
if (serverSdk.connection.status() !== "connected") return
|
||||||
|
void data.location.skill.sync().catch(() => undefined)
|
||||||
})
|
})
|
||||||
|
const skills = () => data.location.skill.list() ?? []
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { createMemo, createResource, onMount, type Accessor } from "solid-js"
|
|||||||
import type { ColorScheme } from "@opencode-ai/ui/theme/context"
|
import type { ColorScheme } from "@opencode-ai/ui/theme/context"
|
||||||
import { useTheme } from "@opencode-ai/ui/theme/context"
|
import { useTheme } from "@opencode-ai/ui/theme/context"
|
||||||
import { usePermission } from "@/context/permission"
|
import { usePermission } from "@/context/permission"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
|
||||||
import {
|
import {
|
||||||
monoDefault,
|
monoDefault,
|
||||||
monoFontFamily,
|
monoFontFamily,
|
||||||
@@ -34,7 +33,7 @@ export function createPermissionScopeController(
|
|||||||
const s = server()
|
const s = server()
|
||||||
const id = sessionID()
|
const id = sessionID()
|
||||||
if (!s || !id) return undefined
|
if (!s || !id) return undefined
|
||||||
return serverCtx()?.sync.session.lineage.peek(id)?.session.location.directory
|
return serverCtx()?.data.session.get(id)?.location.directory
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import { useIntegrations } from "@/hooks/use-integrations"
|
|||||||
import { createMemo, type Component, For, Show } from "solid-js"
|
import { createMemo, type Component, For, Show } from "solid-js"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
|
||||||
import { DialogConnectProvider, useProviderConnectController } from "../dialog-connect-provider"
|
import { DialogConnectProvider, useProviderConnectController } from "../dialog-connect-provider"
|
||||||
import { DialogCustomProvider } from "../dialog-custom-provider"
|
import { DialogCustomProvider } from "../dialog-custom-provider"
|
||||||
import { SettingsServerScope } from "../settings-server-picker"
|
import { SettingsServerScope } from "../settings-server-picker"
|
||||||
@@ -39,7 +38,6 @@ export const SettingsProvidersV2: Component<{
|
|||||||
const dialog = useDialog()
|
const dialog = useDialog()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const serverSdk = useServerSDK()
|
const serverSdk = useServerSDK()
|
||||||
const serverSync = useServerSync()
|
|
||||||
const providers = useProviders(() => props.directory)
|
const providers = useProviders(() => props.directory)
|
||||||
const integrations = useIntegrations(() => props.directory)
|
const integrations = useIntegrations(() => props.directory)
|
||||||
const providerConnect = useProviderConnectController({ onBack: props.onBack })
|
const providerConnect = useProviderConnectController({ onBack: props.onBack })
|
||||||
@@ -55,15 +53,12 @@ export const SettingsProvidersV2: Component<{
|
|||||||
}
|
}
|
||||||
|
|
||||||
const connected = createMemo(() => {
|
const connected = createMemo(() => {
|
||||||
return providers.connected().filter(
|
return providers
|
||||||
(provider) =>
|
.connected()
|
||||||
provider.id !== "opencode" ||
|
.filter(
|
||||||
Object.values(provider.models).some((model) => {
|
(provider) =>
|
||||||
if (typeof model !== "object" || model === null || !("cost" in model)) return false
|
provider.id !== "opencode" || Object.values(provider.models).some((model) => model.cost.input > 0),
|
||||||
const cost = model.cost
|
)
|
||||||
return typeof cost === "object" && cost !== null && "input" in cost
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const popular = createMemo(() => {
|
const popular = createMemo(() => {
|
||||||
@@ -94,10 +89,7 @@ export const SettingsProvidersV2: Component<{
|
|||||||
const current = source(item)
|
const current = source(item)
|
||||||
if (current === "env") return language.t("settings.providers.tag.environment")
|
if (current === "env") return language.t("settings.providers.tag.environment")
|
||||||
if (current === "api") return language.t("provider.connect.method.apiKey")
|
if (current === "api") return language.t("provider.connect.method.apiKey")
|
||||||
if (current === "config") {
|
if (current === "config") return language.t("settings.providers.tag.config")
|
||||||
if (isConfigCustom(item.id)) return language.t("settings.providers.tag.custom")
|
|
||||||
return language.t("settings.providers.tag.config")
|
|
||||||
}
|
|
||||||
if (current === "custom") return language.t("settings.providers.tag.custom")
|
if (current === "custom") return language.t("settings.providers.tag.custom")
|
||||||
return language.t("settings.providers.tag.other")
|
return language.t("settings.providers.tag.other")
|
||||||
}
|
}
|
||||||
@@ -105,19 +97,12 @@ export const SettingsProvidersV2: Component<{
|
|||||||
const canDisconnect = (item: ProviderItem) => {
|
const canDisconnect = (item: ProviderItem) => {
|
||||||
const current = integration(item.id)
|
const current = integration(item.id)
|
||||||
if (current) return current.connections.some((connection) => connection.type === "credential")
|
if (current) return current.connections.some((connection) => connection.type === "credential")
|
||||||
return source(item) !== "env" && !isConfigCustom(item.id)
|
const currentSource = source(item)
|
||||||
|
return currentSource !== "env" && currentSource !== "config"
|
||||||
}
|
}
|
||||||
|
|
||||||
const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
|
const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
|
||||||
|
|
||||||
const isConfigCustom = (providerID: string) => {
|
|
||||||
const provider = serverSync.data.config.provider?.[providerID]
|
|
||||||
if (!provider) return false
|
|
||||||
if (provider.npm !== "@ai-sdk/openai-compatible") return false
|
|
||||||
if (!provider.models || Object.keys(provider.models).length === 0) return false
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
const disconnect = async (providerID: string, name: string) => {
|
const disconnect = async (providerID: string, name: string) => {
|
||||||
const location = props.directory ? { directory: props.directory } : undefined
|
const location = props.directory ? { directory: props.directory } : undefined
|
||||||
await serverSdk.api.integration
|
await serverSdk.api.integration
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { Component } from "solid-js"
|
import type { Component } from "solid-js"
|
||||||
import { For, Show, createMemo } from "solid-js"
|
import { For, Show, createMemo } from "solid-js"
|
||||||
import { createStore, produce } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
import type { SessionInfo } from "@opencode-ai/client/promise"
|
import type { SessionInfo } from "@opencode-ai/client/promise"
|
||||||
import { useQuery } from "@tanstack/solid-query"
|
import { useQuery } from "@tanstack/solid-query"
|
||||||
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
|
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
|
||||||
@@ -13,9 +13,10 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
|
|||||||
import { getFilename } from "@opencode-ai/core/util/path"
|
import { getFilename } from "@opencode-ai/core/util/path"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { useServerSync } from "@/context/server-sync"
|
import { useData } from "@/context/server"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
import { getRelativeTime } from "@/utils/time"
|
import { getRelativeTime } from "@/utils/time"
|
||||||
|
import { sessionLabel } from "@/utils/session-title"
|
||||||
import { pathKey } from "@/utils/path-key"
|
import { pathKey } from "@/utils/path-key"
|
||||||
import { SettingsListV2 } from "./parts/list"
|
import { SettingsListV2 } from "./parts/list"
|
||||||
import { InlineServerSelect } from "./parts/server-select"
|
import { InlineServerSelect } from "./parts/server-select"
|
||||||
@@ -37,6 +38,7 @@ import {
|
|||||||
} from "@/utils/workspace"
|
} from "@/utils/workspace"
|
||||||
import { listAllSessions } from "@/utils/session"
|
import { listAllSessions } from "@/utils/session"
|
||||||
import type { ServerScope } from "@/utils/server-scope"
|
import type { ServerScope } from "@/utils/server-scope"
|
||||||
|
import { normalizeProjectInfo } from "@/context/global-sync/utils"
|
||||||
import "./settings-v2.css"
|
import "./settings-v2.css"
|
||||||
|
|
||||||
type Workspace = {
|
type Workspace = {
|
||||||
@@ -48,7 +50,7 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
|
|||||||
const dialog = useDialog()
|
const dialog = useDialog()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const serverSync = useServerSync()
|
const data = useData()
|
||||||
const tabs = useTabs()
|
const tabs = useTabs()
|
||||||
const platform = usePlatform()
|
const platform = usePlatform()
|
||||||
const [store, setStore] = createStore({
|
const [store, setStore] = createStore({
|
||||||
@@ -56,9 +58,22 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
|
|||||||
transaction: undefined as "confirm" | "running" | undefined,
|
transaction: undefined as "confirm" | "running" | undefined,
|
||||||
})
|
})
|
||||||
|
|
||||||
const workspaces = createMemo(() => workspaceInventory(serverSync.data.project))
|
const projectQuery = useQuery(() => ({
|
||||||
|
queryKey: [serverSDK.scope, "settings-workspace-projects"] as const,
|
||||||
|
queryFn: async () =>
|
||||||
|
Promise.all(
|
||||||
|
(await serverSDK.api.project.list()).map(async (project) => {
|
||||||
|
const worktrees = await serverSDK.api.worktree
|
||||||
|
.list({ projectID: project.id })
|
||||||
|
.catch(() => [{ directory: project.canonical }, ...project.sandboxes.map((directory) => ({ directory }))])
|
||||||
|
return normalizeProjectInfo({ ...project, worktrees })
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
refetchOnMount: "always",
|
||||||
|
}))
|
||||||
|
const workspaces = createMemo(() => workspaceInventory(projectQuery.data ?? []))
|
||||||
const projects = createMemo(() =>
|
const projects = createMemo(() =>
|
||||||
serverSync.data.project.filter((project) => managedWorkspaceDirectories(project).length > 0),
|
(projectQuery.data ?? []).filter((project) => managedWorkspaceDirectories(project).length > 0),
|
||||||
)
|
)
|
||||||
const projectName = (project: Project) => project.name || getFilename(project.worktree)
|
const projectName = (project: Project) => project.name || getFilename(project.worktree)
|
||||||
const projectOptions = createMemo(() => [
|
const projectOptions = createMemo(() => [
|
||||||
@@ -71,18 +86,21 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
|
|||||||
const filtered = createMemo(() => filterWorkspaceInventory(workspaces(), selectedProject()))
|
const filtered = createMemo(() => filterWorkspaceInventory(workspaces(), selectedProject()))
|
||||||
const captureDeleteContext = () => {
|
const captureDeleteContext = () => {
|
||||||
const sdk = serverSDK
|
const sdk = serverSDK
|
||||||
return { sdk, sync: serverSync, server: ServerConnection.key(sdk.server), activeDirectory: props.activeDirectory }
|
return {
|
||||||
|
sdk,
|
||||||
|
data,
|
||||||
|
server: ServerConnection.key(sdk.server),
|
||||||
|
activeDirectory: props.activeDirectory,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const loadSessions = async (context = captureDeleteContext()) => {
|
const loadSessions = async (context = captureDeleteContext()) => {
|
||||||
const fetched = await listAllSessions(context.sdk.api.session, { order: "desc" })
|
const fetched = await listAllSessions(context.sdk.api.session, { order: "desc" })
|
||||||
return mergeWorkspaceSessionInventory(
|
fetched.forEach(context.data.session.remember)
|
||||||
fetched,
|
return mergeWorkspaceSessionInventory(fetched, context.data.session.list())
|
||||||
Object.values(context.sync.session.data.info).filter((session): session is SessionInfo => !!session),
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
const sessionQuery = useQuery(() => ({
|
const sessionQuery = useQuery(() => ({
|
||||||
queryKey: [serverSDK.scope, null, "settings-workspace-sessions"] as const,
|
queryKey: [serverSDK.scope, null, "settings-workspace-sessions"] as const,
|
||||||
queryFn: () => loadSessions(),
|
queryFn: () => loadSessions().then(() => Date.now()),
|
||||||
refetchOnMount: "always",
|
refetchOnMount: "always",
|
||||||
}))
|
}))
|
||||||
const sessionsByWorkspace = createMemo(
|
const sessionsByWorkspace = createMemo(
|
||||||
@@ -90,7 +108,7 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
|
|||||||
new Map(
|
new Map(
|
||||||
workspaces().map((workspace) => [
|
workspaces().map((workspace) => [
|
||||||
pathKey(workspace.directory),
|
pathKey(workspace.directory),
|
||||||
sessionQuery.isSuccess ? sessionsForWorkspace(sessionQuery.data ?? [], workspace.directory) : [],
|
sessionQuery.isSuccess ? sessionsForWorkspace(data.session.list(), workspace.directory) : [],
|
||||||
]),
|
]),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
@@ -182,19 +200,7 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
|
|||||||
platform,
|
platform,
|
||||||
context.sdk.scope,
|
context.sdk.scope,
|
||||||
)
|
)
|
||||||
context.sync.set(
|
await projectQuery.refetch()
|
||||||
"project",
|
|
||||||
produce((draft) => {
|
|
||||||
const project = draft.find((item) => item.id === workspace.project.id)
|
|
||||||
if (!project) return
|
|
||||||
project.sandboxes = (project.sandboxes ?? []).filter(
|
|
||||||
(directory) => pathKey(directory) !== pathKey(workspace.directory),
|
|
||||||
)
|
|
||||||
project.worktrees = project.worktrees.filter(
|
|
||||||
(worktree) => pathKey(worktree.directory) !== pathKey(workspace.directory),
|
|
||||||
)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let inspectionID = 0
|
let inspectionID = 0
|
||||||
@@ -382,7 +388,7 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
|
|||||||
<For each={linked()}>
|
<For each={linked()}>
|
||||||
{(session) => (
|
{(session) => (
|
||||||
<div class="settings-v2-workspaces-session">
|
<div class="settings-v2-workspaces-session">
|
||||||
<span>{session.title}</span>
|
<span>{sessionLabel(session)}</span>
|
||||||
<Show when={sessionTime(session)}>
|
<Show when={sessionTime(session)}>
|
||||||
{(time) => <span class="settings-v2-workspaces-session-time">{time()}</span>}
|
{(time) => <span class="settings-v2-workspaces-session-time">{time()}</span>}
|
||||||
</Show>
|
</Show>
|
||||||
|
|||||||
@@ -1,17 +1,11 @@
|
|||||||
import { Switch } from "@opencode-ai/ui/switch"
|
import { Switch } from "@opencode-ai/ui/switch"
|
||||||
import { Tabs } from "@opencode-ai/ui/tabs"
|
import { Tabs } from "@opencode-ai/ui/tabs"
|
||||||
import { showToast } from "@/utils/toast"
|
import { createMemo, createResource, For, type JSXElement, Show } from "solid-js"
|
||||||
import { createEffect, createMemo, createResource, For, type JSXElement, onCleanup, Show } from "solid-js"
|
|
||||||
import { createStore } from "solid-js/store"
|
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { usePlatform } from "@/context/platform"
|
|
||||||
import { ServerConnection, useServers } from "@/context/servers"
|
|
||||||
import { useSync } from "@/context/sync"
|
|
||||||
import { type ServerHealth } from "@/utils/server-health"
|
|
||||||
import { useGlobal } from "@/context/global"
|
|
||||||
import { useMcpToggle } from "@/context/mcp"
|
import { useMcpToggle } from "@/context/mcp"
|
||||||
import { useSDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
import { useServer } from "@/context/server"
|
import { useData } from "@/context/server"
|
||||||
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
|
|
||||||
const pluginEmptyMessage = (value: string, file: string): JSXElement => {
|
const pluginEmptyMessage = (value: string, file: string): JSXElement => {
|
||||||
const parts = value.split(file)
|
const parts = value.split(file)
|
||||||
@@ -25,110 +19,22 @@ const pluginEmptyMessage = (value: string, file: string): JSXElement => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const listServersByHealth = (
|
|
||||||
list: ServerConnection.Any[],
|
|
||||||
active: ServerConnection.Key | undefined,
|
|
||||||
status: Record<ServerConnection.Key, ServerHealth | undefined>,
|
|
||||||
) => {
|
|
||||||
if (!list.length) return list
|
|
||||||
const order = new Map(list.map((url, index) => [url, index] as const))
|
|
||||||
const rank = (value?: ServerHealth) => {
|
|
||||||
if (value?.healthy === true) return 0
|
|
||||||
if (value?.healthy === false) return 2
|
|
||||||
return 1
|
|
||||||
}
|
|
||||||
|
|
||||||
return list.slice().sort((a, b) => {
|
|
||||||
if (ServerConnection.key(a) === active) return -1
|
|
||||||
if (ServerConnection.key(b) === active) return 1
|
|
||||||
const diff = rank(status[ServerConnection.key(a)]) - rank(status[ServerConnection.key(b)])
|
|
||||||
if (diff !== 0) return diff
|
|
||||||
return (order.get(a) ?? 0) - (order.get(b) ?? 0)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const useDefaultServerKey = (
|
|
||||||
get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
|
|
||||||
) => {
|
|
||||||
const [state, setState] = createStore({
|
|
||||||
key: undefined as ServerConnection.Key | undefined,
|
|
||||||
tick: 0,
|
|
||||||
})
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
state.tick
|
|
||||||
let dead = false
|
|
||||||
const result = get?.()
|
|
||||||
if (!result) {
|
|
||||||
setState("key", undefined)
|
|
||||||
onCleanup(() => {
|
|
||||||
dead = true
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (result instanceof Promise) {
|
|
||||||
void result.then((next) => {
|
|
||||||
if (dead) return
|
|
||||||
setState("key", next ?? undefined)
|
|
||||||
})
|
|
||||||
onCleanup(() => {
|
|
||||||
dead = true
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setState("key", ServerConnection.Key.make(result))
|
|
||||||
onCleanup(() => {
|
|
||||||
dead = true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
key: () => {
|
|
||||||
return state.key
|
|
||||||
},
|
|
||||||
refresh: () => setState("tick", (value) => value + 1),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type ServerStatusItem = {
|
|
||||||
key: ServerConnection.Key
|
|
||||||
conn: ServerConnection.Any
|
|
||||||
health?: ServerHealth
|
|
||||||
blocked: boolean
|
|
||||||
active: boolean
|
|
||||||
onSelect: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function StatusPopoverBody(props: { shown: boolean }) {
|
export function StatusPopoverBody(props: { shown: boolean }) {
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
|
const serverSDK = useServerSDK()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
|
|
||||||
const fail = (err: unknown) => {
|
const toggleMcp = useMcpToggle(() => sdk().directory)
|
||||||
showToast({
|
const mcp = () => data.location.mcp.server.list({ directory: sdk().directory }) ?? []
|
||||||
variant: "error",
|
const mcpNames = createMemo(() => mcp().map((server) => server.name).sort((a, b) => a.localeCompare(b)))
|
||||||
title: language.t("common.requestFailed"),
|
const mcpStatus = (name: string) => mcp().find((server) => server.name === name)?.status.status
|
||||||
description: err instanceof Error ? err.message : String(err),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
let dialogRun = 0
|
|
||||||
onCleanup(() => {
|
|
||||||
dialogRun += 1
|
|
||||||
})
|
|
||||||
const toggleMcp = useMcpToggle()
|
|
||||||
const mcpNames = createMemo(() => Object.keys(sync().data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
|
|
||||||
const mcpStatus = (name: string) => sync().data.mcp?.[name]?.status
|
|
||||||
const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
|
const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
|
||||||
const lspItems = createMemo(() => sync().data.lsp ?? [])
|
|
||||||
const lspCount = createMemo(() => lspItems().length)
|
|
||||||
const [pluginList] = createResource(
|
const [pluginList] = createResource(
|
||||||
() => (props.shown ? sdk().directory : undefined),
|
() => (props.shown ? sdk().directory : undefined),
|
||||||
(directory) =>
|
(directory) =>
|
||||||
sdk()
|
serverSDK.api.plugin
|
||||||
.api.plugin.list({ location: { directory } })
|
.list({ location: { directory } })
|
||||||
.then((result) => result.data),
|
.then((result) => result.data),
|
||||||
)
|
)
|
||||||
const plugins = createMemo(() => (pluginList.latest ?? []).map((item) => item.id))
|
const plugins = createMemo(() => (pluginList.latest ?? []).map((item) => item.id))
|
||||||
@@ -150,10 +56,7 @@ export function StatusPopoverBody(props: { shown: boolean }) {
|
|||||||
{mcpConnected() > 0 ? `${mcpConnected()} ` : ""}
|
{mcpConnected() > 0 ? `${mcpConnected()} ` : ""}
|
||||||
{language.t("status.popover.tab.mcp")}
|
{language.t("status.popover.tab.mcp")}
|
||||||
</Tabs.Trigger>
|
</Tabs.Trigger>
|
||||||
<Tabs.Trigger value="lsp" data-slot="tab" class="text-12-regular">
|
{/* TODO: Restore LSP status when V2 exposes it. */}
|
||||||
{lspCount() > 0 ? `${lspCount()} ` : ""}
|
|
||||||
{language.t("status.popover.tab.lsp")}
|
|
||||||
</Tabs.Trigger>
|
|
||||||
<Show when={true}>
|
<Show when={true}>
|
||||||
<Tabs.Trigger value="plugins" data-slot="tab" class="text-12-regular">
|
<Tabs.Trigger value="plugins" data-slot="tab" class="text-12-regular">
|
||||||
{pluginCount() > 0 ? `${pluginCount()} ` : ""}
|
{pluginCount() > 0 ? `${pluginCount()} ` : ""}
|
||||||
@@ -223,34 +126,6 @@ export function StatusPopoverBody(props: { shown: boolean }) {
|
|||||||
</div>
|
</div>
|
||||||
</Tabs.Content>
|
</Tabs.Content>
|
||||||
|
|
||||||
<Tabs.Content value="lsp">
|
|
||||||
<div class="flex flex-col px-2 pb-2">
|
|
||||||
<div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
|
|
||||||
<Show
|
|
||||||
when={lspItems().length > 0}
|
|
||||||
fallback={
|
|
||||||
<div class="text-14-regular text-text-base text-center my-auto">{language.t("dialog.lsp.empty")}</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<For each={lspItems()}>
|
|
||||||
{(item) => (
|
|
||||||
<div class="flex items-center gap-2 w-full px-2 py-1">
|
|
||||||
<div
|
|
||||||
classList={{
|
|
||||||
"size-1.5 rounded-full shrink-0": true,
|
|
||||||
"bg-icon-success-base": item.status === "connected",
|
|
||||||
"bg-icon-critical-base": item.status === "error",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span class="text-14-regular text-text-base truncate">{item.name || item.id}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Tabs.Content>
|
|
||||||
|
|
||||||
<Show when={true}>
|
<Show when={true}>
|
||||||
<Tabs.Content value="plugins">
|
<Tabs.Content value="plugins">
|
||||||
<div class="flex flex-col px-2 pb-2">
|
<div class="flex flex-col px-2 pb-2">
|
||||||
|
|||||||
@@ -5,16 +5,14 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
|
|||||||
import { Popover } from "@opencode-ai/ui/popover"
|
import { Popover } from "@opencode-ai/ui/popover"
|
||||||
import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
|
import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { ServerConnection, useServers } from "@/context/servers"
|
|
||||||
import { useServerSDK } from "@/context/server-sdk"
|
|
||||||
import { useSync } from "@/context/sync"
|
|
||||||
import { useGlobal } from "@/context/global"
|
import { useGlobal } from "@/context/global"
|
||||||
import {
|
import {
|
||||||
hasNonBlockingServiceIssue,
|
hasNonBlockingServiceIssue,
|
||||||
hasServiceNeedingAttention,
|
hasServiceNeedingAttention,
|
||||||
serverStatusDotClass,
|
serverStatusDotClass,
|
||||||
} from "./status-popover-indicator"
|
} from "./status-popover-indicator"
|
||||||
import { useServer } from "@/context/server"
|
import { useData, useServer } from "@/context/server"
|
||||||
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
|
|
||||||
const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
|
const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
|
||||||
|
|
||||||
@@ -22,19 +20,21 @@ export function StatusPopover() {
|
|||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const server = useServer()
|
const server = useServer()
|
||||||
const global = useGlobal()
|
const global = useGlobal()
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
|
const sdk = useWorkspaceLocation()
|
||||||
const [shown, setShown] = createSignal(false)
|
const [shown, setShown] = createSignal(false)
|
||||||
const serverHealth = () => global.servers.health[server.key]?.healthy
|
const serverHealth = () => global.servers.health[server.key]?.healthy
|
||||||
const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
|
const mcp = () => data.location.mcp.server.list({ directory: sdk().directory })
|
||||||
|
const ready = createMemo(() => serverHealth() === false || mcp() !== undefined)
|
||||||
const attention = createMemo(() =>
|
const attention = createMemo(() =>
|
||||||
hasServiceNeedingAttention({
|
hasServiceNeedingAttention({
|
||||||
mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
|
mcp: (mcp() ?? []).map((item) => item.status.status),
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
const issue = createMemo(() =>
|
const issue = createMemo(() =>
|
||||||
hasNonBlockingServiceIssue({
|
hasNonBlockingServiceIssue({
|
||||||
mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
|
mcp: (mcp() ?? []).map((item) => item.status.status),
|
||||||
lsp: (sync().data.lsp ?? []).map((item) => item.status),
|
lsp: [],
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -86,19 +86,21 @@ export function StatusPopoverV2() {
|
|||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const server = useServer()
|
const server = useServer()
|
||||||
const global = useGlobal()
|
const global = useGlobal()
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
|
const sdk = useWorkspaceLocation()
|
||||||
const [shown, setShown] = createSignal(false)
|
const [shown, setShown] = createSignal(false)
|
||||||
const serverHealth = () => global.servers.health[server.key]?.healthy
|
const serverHealth = () => global.servers.health[server.key]?.healthy
|
||||||
const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
|
const mcp = () => data.location.mcp.server.list({ directory: sdk().directory })
|
||||||
|
const ready = createMemo(() => serverHealth() === false || mcp() !== undefined)
|
||||||
const attention = createMemo(() =>
|
const attention = createMemo(() =>
|
||||||
hasServiceNeedingAttention({
|
hasServiceNeedingAttention({
|
||||||
mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
|
mcp: (mcp() ?? []).map((item) => item.status.status),
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
const issue = createMemo(() =>
|
const issue = createMemo(() =>
|
||||||
hasNonBlockingServiceIssue({
|
hasNonBlockingServiceIssue({
|
||||||
mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
|
mcp: (mcp() ?? []).map((item) => item.status.status),
|
||||||
lsp: (sync().data.lsp ?? []).map((item) => item.status),
|
lsp: [],
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
const state = createMemo<StatusPopoverState>(() => ({
|
const state = createMemo<StatusPopoverState>(() => ({
|
||||||
|
|||||||
@@ -10,7 +10,8 @@ import { SerializeAddon } from "@/addons/serialize"
|
|||||||
import { matchKeybind, parseKeybind } from "@/context/command"
|
import { matchKeybind, parseKeybind } from "@/context/command"
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { usePlatform } from "@/context/platform"
|
import { usePlatform } from "@/context/platform"
|
||||||
import { useSDK } from "@/context/sdk"
|
import { useWorkspaceLocation } from "@/context/location"
|
||||||
|
import { useServerSDK } from "@/context/server-sdk"
|
||||||
import { terminalFontFamily, useSettings } from "@/context/settings"
|
import { terminalFontFamily, useSettings } from "@/context/settings"
|
||||||
import type { LocalPTY } from "@/context/terminal"
|
import type { LocalPTY } from "@/context/terminal"
|
||||||
import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
|
import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
|
||||||
@@ -171,13 +172,14 @@ const persistTerminal = (input: {
|
|||||||
|
|
||||||
export const Terminal = (props: TerminalProps) => {
|
export const Terminal = (props: TerminalProps) => {
|
||||||
const platform = usePlatform()
|
const platform = usePlatform()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
|
const serverSDK = useServerSDK()
|
||||||
const settings = useSettings()
|
const settings = useSettings()
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
// Intentional mount-time capture: the imperative xterm/WebSocket lifecycle needs stable values, and Terminal remounts when the SDK scope changes.
|
// Intentional mount-time capture: the imperative xterm/WebSocket lifecycle needs stable values, and Terminal remounts when the SDK scope changes.
|
||||||
const directory = sdk().directory
|
const directory = sdk().directory
|
||||||
const url = sdk().url
|
const url = serverSDK.url
|
||||||
let container!: HTMLDivElement
|
let container!: HTMLDivElement
|
||||||
const [local, others] = splitProps(props, [
|
const [local, others] = splitProps(props, [
|
||||||
"pty",
|
"pty",
|
||||||
@@ -235,8 +237,8 @@ export const Terminal = (props: TerminalProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const pushSize = async (cols: number, rows: number) => {
|
const pushSize = async (cols: number, rows: number) => {
|
||||||
return sdk()
|
return serverSDK.api.pty
|
||||||
.api.pty.update({
|
.update({
|
||||||
ptyID: id,
|
ptyID: id,
|
||||||
location: { directory },
|
location: { directory },
|
||||||
size: { cols, rows },
|
size: { cols, rows },
|
||||||
@@ -255,10 +257,8 @@ export const Terminal = (props: TerminalProps) => {
|
|||||||
if (!variant?.seeds && !variant?.palette) return fallback
|
if (!variant?.seeds && !variant?.palette) return fallback
|
||||||
const resolved = resolveThemeVariant(variant, mode === "dark")
|
const resolved = resolveThemeVariant(variant, mode === "dark")
|
||||||
const text = resolved["text-stronger"] ?? fallback.foreground
|
const text = resolved["text-stronger"] ?? fallback.foreground
|
||||||
const background = settings.general.newLayoutDesigns()
|
const background =
|
||||||
? (resolveV2Token(resolveThemeVariantV2(variant, mode === "dark"), "v2-background-bg-base") ??
|
resolveV2Token(resolveThemeVariantV2(variant, mode === "dark"), "v2-background-bg-base") ?? fallback.background
|
||||||
fallback.background)
|
|
||||||
: (resolved["background-stronger"] ?? fallback.background)
|
|
||||||
const alpha = mode === "dark" ? 0.25 : 0.2
|
const alpha = mode === "dark" ? 0.25 : 0.2
|
||||||
const base = text.startsWith("#") ? (text as HexColor) : (fallback.foreground as HexColor)
|
const base = text.startsWith("#") ? (text as HexColor) : (fallback.foreground as HexColor)
|
||||||
const selectionBackground = withAlpha(base, alpha)
|
const selectionBackground = withAlpha(base, alpha)
|
||||||
@@ -521,8 +521,8 @@ export const Terminal = (props: TerminalProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const gone = async () => {
|
const gone = async () => {
|
||||||
return sdk()
|
return serverSDK.api.pty
|
||||||
.api.pty.get({ ptyID: id, location: { directory } })
|
.get({ ptyID: id, location: { directory } })
|
||||||
.then((result) => result.data.status === "exited")
|
.then((result) => result.data.status === "exited")
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
if (err && typeof err === "object" && "_tag" in err && err._tag === "PtyNotFoundError") return true
|
if (err && typeof err === "object" && "_tag" in err && err._tag === "PtyNotFoundError") return true
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { createEffect, createMemo, createResource, createRoot, For, onCleanup, onMount, Show } from "solid-js"
|
import { createEffect, createMemo, createResource, For, onCleanup, onMount, Show } from "solid-js"
|
||||||
import { createStore } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
import { createResizeObserver } from "@solid-primitives/resize-observer"
|
import { createResizeObserver } from "@solid-primitives/resize-observer"
|
||||||
import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
|
import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
|
||||||
@@ -84,32 +84,35 @@ function SessionTabEntry(props: {
|
|||||||
const tabs = useTabs()
|
const tabs = useTabs()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const sdk = createMemo(() => props.serverCtx?.sdk ?? null)
|
const sdk = createMemo(() => props.serverCtx?.sdk ?? null)
|
||||||
const cachedSession = createMemo(() => props.serverCtx?.sync.session.peek(props.tab.sessionId))
|
const cachedSession = createMemo(() => props.serverCtx?.data.session.get(props.tab.sessionId))
|
||||||
const persisted = createMemo(() => tabs.info[props.id])
|
const persisted = createMemo(() => tabs.info[props.id])
|
||||||
const [loadedSession] = createResource(
|
const [loadedSession] = createResource(
|
||||||
() => {
|
() => {
|
||||||
const ctx = props.serverCtx
|
const ctx = props.serverCtx
|
||||||
return ctx ? { id: props.tab.sessionId, ctx } : null
|
return ctx ? { id: props.tab.sessionId, ctx } : null
|
||||||
},
|
},
|
||||||
({ id, ctx }) => ctx.sync.session.resolve(id).catch(() => undefined),
|
({ id, ctx }) =>
|
||||||
|
ctx.data.session
|
||||||
|
.sync(id)
|
||||||
|
.then(() => ctx.data.session.get(id))
|
||||||
|
.catch(() => undefined),
|
||||||
)
|
)
|
||||||
const session = createMemo(() => cachedSession() ?? loadedSession())
|
const session = createMemo(() => cachedSession() ?? loadedSession())
|
||||||
const missingSession = createMemo(() => !!props.serverCtx && !loadedSession.loading && !session())
|
const missingSession = createMemo(() => !!props.serverCtx && !loadedSession.loading && !session())
|
||||||
const visible = createMemo(() => !!session() || missingSession() || !!persisted()?.title)
|
const visible = createMemo(() => !!session() || missingSession() || !!persisted()?.title)
|
||||||
let prefetched = false
|
|
||||||
|
|
||||||
const rename = async (title: string) => {
|
const rename = async (title: string) => {
|
||||||
const value = session()
|
const value = session()
|
||||||
const ctx = props.serverCtx
|
const ctx = props.serverCtx
|
||||||
if (!value || !ctx) return
|
if (!value || !ctx) return
|
||||||
|
|
||||||
ctx.sync.session.remember({ ...value, title })
|
ctx.data.session.remember({ ...value, title })
|
||||||
try {
|
try {
|
||||||
await ctx.sdk.api.session.rename({ sessionID: value.id, title })
|
await ctx.sdk.api.session.rename({ sessionID: value.id, title })
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const current = session()
|
const current = session()
|
||||||
const currentCtx = props.serverCtx
|
const currentCtx = props.serverCtx
|
||||||
if (current && currentCtx) currentCtx.sync.session.remember({ ...current, title: value.title })
|
if (current && currentCtx) currentCtx.data.session.remember({ ...current, title: value.title })
|
||||||
showToast({
|
showToast({
|
||||||
title: language.t("common.requestFailed"),
|
title: language.t("common.requestFailed"),
|
||||||
description: err instanceof Error ? err.message : undefined,
|
description: err instanceof Error ? err.message : undefined,
|
||||||
@@ -122,19 +125,19 @@ function SessionTabEntry(props: {
|
|||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const ctx = props.serverCtx
|
const ctx = props.serverCtx
|
||||||
const value = session()
|
const value = session()
|
||||||
if (!ctx || !value || prefetched) return
|
if (!ctx || !value || props.active || ctx.sdk.connection.status() !== "connected") return
|
||||||
prefetched = true
|
const timer = window.setTimeout(
|
||||||
createRoot((dispose) => {
|
() =>
|
||||||
try {
|
void Promise.allSettled([
|
||||||
void ctx.sync
|
ctx.data.session.sync(value.id, { children: true }),
|
||||||
.ensureDirSyncContext(value.location.directory)
|
ctx.data.session.pending.sync(value.id),
|
||||||
.session.sync(value.id)
|
ctx.data.session.message.sync(value.id),
|
||||||
.catch(() => {})
|
ctx.data.session.permission.sync(value.id),
|
||||||
.finally(dispose)
|
ctx.data.session.form.sync(value.id),
|
||||||
} catch {
|
]),
|
||||||
dispose()
|
300 + props.index * 50,
|
||||||
}
|
)
|
||||||
})
|
onCleanup(() => window.clearTimeout(timer))
|
||||||
})
|
})
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
|
|||||||
@@ -11,11 +11,7 @@ import {
|
|||||||
untrack,
|
untrack,
|
||||||
} from "solid-js"
|
} from "solid-js"
|
||||||
import { createStore } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
import { useLocation, useNavigate, useParams } from "@solidjs/router"
|
import { useLocation, useNavigate } from "@solidjs/router"
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
|
||||||
import { Icon } from "@opencode-ai/ui/icon"
|
|
||||||
import { Button } from "@opencode-ai/ui/button"
|
|
||||||
import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
|
|
||||||
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
|
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
|
||||||
import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
|
import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
|
||||||
import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
|
import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
|
||||||
@@ -32,14 +28,13 @@ import { TitlebarTabStrip } from "@/components/titlebar-tab-strip"
|
|||||||
import { makeEventListener } from "@solid-primitives/event-listener"
|
import { makeEventListener } from "@solid-primitives/event-listener"
|
||||||
import { createMediaQuery } from "@solid-primitives/media"
|
import { createMediaQuery } from "@solid-primitives/media"
|
||||||
import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events"
|
import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events"
|
||||||
import { useGlobal, useServerCtx } from "@/context/global"
|
import { useGlobal } from "@/context/global"
|
||||||
import { ServerConnection, useServers } from "@/context/servers"
|
import { ServerConnection } from "@/context/servers"
|
||||||
import { tabKey, useTabs } from "@/context/tabs"
|
import { tabKey, useTabs } from "@/context/tabs"
|
||||||
import type { PromptSession } from "@/context/prompt"
|
import type { PromptSession } from "@/context/prompt"
|
||||||
import "./titlebar.css"
|
import "./titlebar.css"
|
||||||
import { newTabTooltipKeybind } from "./command-tooltip-keybind"
|
import { newTabTooltipKeybind } from "./command-tooltip-keybind"
|
||||||
|
|
||||||
const legacyTitlebarHeight = 40
|
|
||||||
const v2TitlebarHeight = 36
|
const v2TitlebarHeight = 36
|
||||||
const minTitlebarZoom = 0.25
|
const minTitlebarZoom = 0.25
|
||||||
const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
|
const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
|
||||||
@@ -65,12 +60,10 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
|
|||||||
const command = useCommand()
|
const command = useCommand()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
const settings = useSettings()
|
const settings = useSettings()
|
||||||
const servers = useServers()
|
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns())
|
|
||||||
const mobile = createMediaQuery("(max-width: 767px)")
|
const mobile = createMediaQuery("(max-width: 767px)")
|
||||||
const bottom = createMemo(() => useV2Titlebar() && mobile() && settings.general.mobileTitlebarPosition() === "bottom")
|
const bottom = createMemo(() => mobile() && settings.general.mobileTitlebarPosition() === "bottom")
|
||||||
|
|
||||||
const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
|
const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
|
||||||
const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
|
const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
|
||||||
@@ -79,9 +72,8 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
|
|||||||
const zoom = () => platform.webviewZoom?.() ?? 1
|
const zoom = () => platform.webviewZoom?.() ?? 1
|
||||||
const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
|
const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
|
||||||
const minHeight = () => {
|
const minHeight = () => {
|
||||||
const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight
|
if (mac()) return `${v2TitlebarHeight / zoom()}px`
|
||||||
if (mac()) return `${height / zoom()}px`
|
if (windows()) return `${v2TitlebarHeight / Math.min(titlebarZoom(), 1)}px`
|
||||||
if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px`
|
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px`
|
const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px`
|
||||||
@@ -153,11 +145,9 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
data-slot={useV2Titlebar() ? "titlebar-v2" : undefined}
|
data-slot="titlebar-v2"
|
||||||
classList={{
|
classList={{
|
||||||
"shrink-0 relative flex flex-row": true,
|
"shrink-0 relative flex flex-row h-9 bg-v2-background-bg-deep overflow-visible": true,
|
||||||
"h-9 bg-v2-background-bg-deep overflow-visible": useV2Titlebar(),
|
|
||||||
"h-10 bg-background-base overflow-hidden": !useV2Titlebar(),
|
|
||||||
"order-last": bottom(),
|
"order-last": bottom(),
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
@@ -264,13 +254,14 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
|
|||||||
}
|
}
|
||||||
case "home": {
|
case "home": {
|
||||||
const selection = layout.home.selection()
|
const selection = layout.home.selection()
|
||||||
const conn = global.servers.list().find((item) => ServerConnection.key(item) === selection.server)
|
const conn =
|
||||||
const project = conn
|
global.servers.list().find((item) => ServerConnection.key(item) === selection.server) ??
|
||||||
? global
|
global.servers.list()[0]
|
||||||
.ensureServerCtx(conn)
|
const projects = conn ? global.ensureServerCtx(conn).projects : undefined
|
||||||
.projects.list()
|
const project =
|
||||||
.find((item) => item.worktree === selection.directory)
|
projects?.list().find((item) => item.worktree === selection.directory) ??
|
||||||
: undefined
|
projects?.list().find((item) => item.worktree === projects.last()) ??
|
||||||
|
projects?.list()[0]
|
||||||
if (conn && project) {
|
if (conn && project) {
|
||||||
tabs.newDraft({ server: ServerConnection.key(conn), directory: project.worktree }, "")
|
tabs.newDraft({ server: ServerConnection.key(conn), directory: project.worktree }, "")
|
||||||
return
|
return
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import type { ServerScope } from "@/utils/server-scope"
|
|||||||
import { createScopedCache } from "@/utils/scoped-cache"
|
import { createScopedCache } from "@/utils/scoped-cache"
|
||||||
import { uuid } from "@/utils/uuid"
|
import { uuid } from "@/utils/uuid"
|
||||||
import type { SelectedLineRange } from "@/context/file"
|
import type { SelectedLineRange } from "@/context/file"
|
||||||
import { useSDK } from "./sdk"
|
import { useWorkspaceLocation } from "./location"
|
||||||
|
|
||||||
export type LineComment = {
|
export type LineComment = {
|
||||||
id: string
|
id: string
|
||||||
@@ -212,7 +212,7 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
|
|||||||
gate: false,
|
gate: false,
|
||||||
init: () => {
|
init: () => {
|
||||||
const params = useParams()
|
const params = useParams()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const cache = createScopedCache(
|
const cache = createScopedCache(
|
||||||
(key) => {
|
(key) => {
|
||||||
|
|||||||
@@ -1,127 +0,0 @@
|
|||||||
import { Binary } from "@opencode-ai/core/util/binary"
|
|
||||||
import type { SessionInboxInfo, SessionInfo } from "@opencode-ai/client/promise"
|
|
||||||
import { createMemo } from "solid-js"
|
|
||||||
import { produce, reconcile, type SetStoreFunction } from "solid-js/store"
|
|
||||||
import type { createServerSdkContext } from "./server-sdk"
|
|
||||||
import type { createServerSyncContextInner } from "./server-sync"
|
|
||||||
import type { PromptEcho } from "./server-session"
|
|
||||||
import type { State } from "./global-sync/types"
|
|
||||||
|
|
||||||
const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
|
|
||||||
const sessionFields = new Set([
|
|
||||||
"session_status",
|
|
||||||
"session_working",
|
|
||||||
"session_diff",
|
|
||||||
"todo",
|
|
||||||
"permission",
|
|
||||||
"question",
|
|
||||||
"message",
|
|
||||||
"session_message",
|
|
||||||
"part",
|
|
||||||
"part_text_accum_delta",
|
|
||||||
])
|
|
||||||
|
|
||||||
export const createDirSyncContext = (
|
|
||||||
directory: string,
|
|
||||||
serverSync: ReturnType<typeof createServerSyncContextInner>,
|
|
||||||
serverSDK: ReturnType<typeof createServerSdkContext>,
|
|
||||||
) => {
|
|
||||||
const current = createMemo(() => serverSync.child(directory, { mcp: true }))
|
|
||||||
const absolute = (path: string) => (current()[0].path.directory + "/" + path).replace("//", "/")
|
|
||||||
const data = new Proxy({} as State, {
|
|
||||||
get(_, property: keyof State) {
|
|
||||||
if (property === "session_working") return serverSync.session.data.session_working.bind(serverSync.session.data)
|
|
||||||
if (sessionFields.has(property)) return serverSync.session.data[property as keyof typeof serverSync.session.data]
|
|
||||||
return current()[0][property]
|
|
||||||
},
|
|
||||||
})
|
|
||||||
const set = ((...input: unknown[]) => {
|
|
||||||
if (typeof input[0] === "string" && sessionFields.has(input[0])) {
|
|
||||||
return (serverSync.session.set as (...args: unknown[]) => unknown)(...input)
|
|
||||||
}
|
|
||||||
const result = (current()[1] as (...args: unknown[]) => unknown)(...input)
|
|
||||||
if (input[0] === "session") current()[0].session.forEach(serverSync.session.remember)
|
|
||||||
return result
|
|
||||||
}) as SetStoreFunction<State>
|
|
||||||
|
|
||||||
const index = (sessionID: string) => {
|
|
||||||
const session = serverSync.session.get(sessionID)
|
|
||||||
if (!session || session.location.directory !== directory) return
|
|
||||||
const [store, setStore] = current()
|
|
||||||
const result = Binary.search(store.session, session.id, (item) => item.id)
|
|
||||||
if (result.found) {
|
|
||||||
setStore("session", result.index, reconcile(session))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
setStore(
|
|
||||||
"session",
|
|
||||||
produce((draft) => void draft.splice(result.index, 0, session)),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data,
|
|
||||||
set,
|
|
||||||
get status() {
|
|
||||||
return current()[0].status
|
|
||||||
},
|
|
||||||
get ready() {
|
|
||||||
return current()[0].status !== "loading"
|
|
||||||
},
|
|
||||||
get project() {
|
|
||||||
const store = current()[0]
|
|
||||||
const match = Binary.search(serverSync.data.project, store.project, (project) => project.id)
|
|
||||||
if (match.found) return serverSync.data.project[match.index]
|
|
||||||
},
|
|
||||||
session: {
|
|
||||||
remember(session: SessionInfo) {
|
|
||||||
serverSync.session.remember(session)
|
|
||||||
index(session.id)
|
|
||||||
},
|
|
||||||
get(sessionID: string) {
|
|
||||||
const session = serverSync.session.get(sessionID)
|
|
||||||
if (session?.location.directory === directory) return session
|
|
||||||
},
|
|
||||||
inbox: {
|
|
||||||
echo(input: PromptEcho & { directory?: string }) {
|
|
||||||
serverSync.session.inbox.echo(input)
|
|
||||||
},
|
|
||||||
confirm(input: SessionInboxInfo) {
|
|
||||||
return serverSync.session.inbox.confirm(input)
|
|
||||||
},
|
|
||||||
clearEcho(input: { directory?: string; sessionID: string; messageID: string }) {
|
|
||||||
return serverSync.session.inbox.clearEcho(input)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
async sync(sessionID: string, options?: { force?: boolean }) {
|
|
||||||
await serverSync.session.sync(sessionID, options)
|
|
||||||
index(sessionID)
|
|
||||||
},
|
|
||||||
todo: serverSync.session.todo,
|
|
||||||
history: serverSync.session.history,
|
|
||||||
evict(sessionID: string) {
|
|
||||||
serverSync.session.evict(sessionID)
|
|
||||||
},
|
|
||||||
fetch: async (count = 10) => {
|
|
||||||
const [store, setStore] = current()
|
|
||||||
setStore("limit", (value) => value + count)
|
|
||||||
const response = await serverSDK.api.session.list({ directory, limit: store.limit, order: "desc" })
|
|
||||||
const sessions = response.data.sort((a, b) => cmp(a.id, b.id)).slice(0, store.limit)
|
|
||||||
sessions.forEach(serverSync.session.remember)
|
|
||||||
setStore("session", reconcile(sessions, { key: "id" }))
|
|
||||||
},
|
|
||||||
more: createMemo(() => current()[0].session.length >= current()[0].limit),
|
|
||||||
archive: async (sessionID: string) => {
|
|
||||||
// TODO: Restore archiving when the V2 client exposes a session archive API.
|
|
||||||
void sessionID
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mcp: {
|
|
||||||
toggle: (name: string) => serverSync.mcp.toggle(directory, name),
|
|
||||||
},
|
|
||||||
absolute,
|
|
||||||
get directory() {
|
|
||||||
return current()[0].path.directory
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -5,8 +5,7 @@ import { showToast } from "@/utils/toast"
|
|||||||
import { useParams } from "@solidjs/router"
|
import { useParams } from "@solidjs/router"
|
||||||
import { base64Encode } from "@opencode-ai/core/util/encode"
|
import { base64Encode } from "@opencode-ai/core/util/encode"
|
||||||
import { getFilename } from "@opencode-ai/core/util/path"
|
import { getFilename } from "@opencode-ai/core/util/path"
|
||||||
import { useSDK } from "./sdk"
|
import { useWorkspaceLocation } from "./location"
|
||||||
import { useSync } from "./sync"
|
|
||||||
import { useLanguage } from "@/context/language"
|
import { useLanguage } from "@/context/language"
|
||||||
import { useLayout } from "@/context/layout"
|
import { useLayout } from "@/context/layout"
|
||||||
import { createPathHelpers } from "./file/path"
|
import { createPathHelpers } from "./file/path"
|
||||||
@@ -56,8 +55,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
|
|||||||
name: "File",
|
name: "File",
|
||||||
gate: false,
|
gate: false,
|
||||||
init: () => {
|
init: () => {
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
useSync()
|
|
||||||
const params = useParams()
|
const params = useParams()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const language = useLanguage()
|
const language = useLanguage()
|
||||||
@@ -80,8 +78,8 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
|
|||||||
scope,
|
scope,
|
||||||
normalizeDir: path.normalizeDir,
|
normalizeDir: path.normalizeDir,
|
||||||
list: (dir) =>
|
list: (dir) =>
|
||||||
sdk()
|
serverSDK.api.file
|
||||||
.api.file.list({ path: dir, location: { directory: scope() } })
|
.list({ path: dir, location: { directory: scope() } })
|
||||||
.then((x) =>
|
.then((x) =>
|
||||||
x.data.map((entry) => ({
|
x.data.map((entry) => ({
|
||||||
...entry,
|
...entry,
|
||||||
@@ -187,8 +185,8 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
|
|||||||
|
|
||||||
setLoading(file)
|
setLoading(file)
|
||||||
|
|
||||||
const promise = sdk()
|
const promise = serverSDK.api.file
|
||||||
.api.file.read({ path: file, location: { directory } })
|
.read({ path: file, location: { directory } })
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (scope() !== directory) return
|
if (scope() !== directory) return
|
||||||
const content = { type: "text" as const, content: new TextDecoder().decode(data) }
|
const content = { type: "text" as const, content: new TextDecoder().decode(data) }
|
||||||
|
|||||||
@@ -1,15 +1,7 @@
|
|||||||
import { describe, expect, test } from "bun:test"
|
import { describe, expect, test } from "bun:test"
|
||||||
import { QueryClient } from "@tanstack/solid-query"
|
import { QueryClient } from "@tanstack/solid-query"
|
||||||
import type { AgentApi, CatalogApi, CommandApi, ReferenceApi } from "@opencode-ai/client/promise"
|
|
||||||
import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
||||||
import {
|
import { loadPathQuery, loadProjectsQuery } from "./bootstrap"
|
||||||
loadAgentsQuery,
|
|
||||||
loadCommands,
|
|
||||||
loadPathQuery,
|
|
||||||
loadProjectsQuery,
|
|
||||||
loadProvidersQuery,
|
|
||||||
loadReferencesQuery,
|
|
||||||
} from "./bootstrap"
|
|
||||||
import { ServerScope } from "@/utils/server-scope"
|
import { ServerScope } from "@/utils/server-scope"
|
||||||
import type { ServerApi } from "@/utils/server"
|
import type { ServerApi } from "@/utils/server"
|
||||||
|
|
||||||
@@ -18,44 +10,11 @@ type WorktreeApi = ServerApi["worktree"]
|
|||||||
|
|
||||||
describe("query keys", () => {
|
describe("query keys", () => {
|
||||||
test("partitions identical directories by server scope", () => {
|
test("partitions identical directories by server scope", () => {
|
||||||
const api = {} as CatalogApi
|
|
||||||
const location = {} as ServerApi["location"]
|
const location = {} as ServerApi["location"]
|
||||||
const remote = "https://debian.example" as typeof ServerScope.local
|
const remote = "https://debian.example" as typeof ServerScope.local
|
||||||
|
|
||||||
expect([...loadPathQuery(ServerScope.local, "/repo", location).queryKey]).toEqual(["local", "/repo", "path"])
|
expect([...loadPathQuery(ServerScope.local, "/repo", location).queryKey]).toEqual(["local", "/repo", "path"])
|
||||||
expect([...loadPathQuery(remote, "/repo", location).queryKey]).toEqual(["https://debian.example", "/repo", "path"])
|
expect([...loadPathQuery(remote, "/repo", location).queryKey]).toEqual(["https://debian.example", "/repo", "path"])
|
||||||
expect([...loadProvidersQuery(remote, null, api).queryKey]).toEqual(["https://debian.example", null, "providers"])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("loads the current provider and model catalog", async () => {
|
|
||||||
const calls: unknown[] = []
|
|
||||||
const api = {
|
|
||||||
provider: {
|
|
||||||
list: async (input: unknown) => {
|
|
||||||
calls.push(["provider", input])
|
|
||||||
return { location: {}, data: [{ id: "openai", name: "OpenAI", package: "@ai-sdk/openai" }] }
|
|
||||||
},
|
|
||||||
},
|
|
||||||
model: {
|
|
||||||
list: async (input: unknown) => {
|
|
||||||
calls.push(["model", input])
|
|
||||||
return { location: {}, data: [] }
|
|
||||||
},
|
|
||||||
default: async (input: unknown) => {
|
|
||||||
calls.push(["default", input])
|
|
||||||
return { location: {}, data: null }
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as unknown as CatalogApi
|
|
||||||
|
|
||||||
const result = await new QueryClient().fetchQuery(loadProvidersQuery(ServerScope.local, "/repo", api))
|
|
||||||
|
|
||||||
expect(calls).toEqual([
|
|
||||||
["provider", { location: { directory: "/repo" } }],
|
|
||||||
["model", { location: { directory: "/repo" } }],
|
|
||||||
["default", { location: { directory: "/repo" } }],
|
|
||||||
])
|
|
||||||
expect(result.connected).toEqual(["openai"])
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test("loads current location metadata", async () => {
|
test("loads current location metadata", async () => {
|
||||||
@@ -73,39 +32,6 @@ describe("query keys", () => {
|
|||||||
expect(result).toMatchObject({ directory: "/repo/subpath", worktree: "/repo" })
|
expect(result).toMatchObject({ directory: "/repo/subpath", worktree: "/repo" })
|
||||||
})
|
})
|
||||||
|
|
||||||
test("loads agents from the current location-scoped endpoint", async () => {
|
|
||||||
const calls: unknown[] = []
|
|
||||||
const api = {
|
|
||||||
list: async (input: unknown) => {
|
|
||||||
calls.push(input)
|
|
||||||
return { location: {}, data: [] }
|
|
||||||
},
|
|
||||||
} as unknown as AgentApi
|
|
||||||
|
|
||||||
const result = await new QueryClient().fetchQuery(loadAgentsQuery(ServerScope.local, "/repo", api))
|
|
||||||
|
|
||||||
expect(calls).toEqual([{ location: { directory: "/repo" } }])
|
|
||||||
expect(result).toEqual([])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("loads commands from the current location-scoped endpoint", async () => {
|
|
||||||
const calls: unknown[] = []
|
|
||||||
const api = {
|
|
||||||
list: async (input: unknown) => {
|
|
||||||
calls.push(input)
|
|
||||||
return {
|
|
||||||
location: {},
|
|
||||||
data: [{ name: "review", template: "Review files" /* source: "command" as const */ }],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
} as unknown as CommandApi
|
|
||||||
|
|
||||||
const result = await loadCommands("/repo", api)
|
|
||||||
|
|
||||||
expect(calls).toEqual([{ location: { directory: "/repo" } }])
|
|
||||||
expect(result).toEqual([{ name: "review", template: "Review files" /* source: "command" */ }])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("loads projects from the current endpoint", async () => {
|
test("loads projects from the current endpoint", async () => {
|
||||||
const calls: string[] = []
|
const calls: string[] = []
|
||||||
const projects = {
|
const projects = {
|
||||||
@@ -161,18 +87,4 @@ describe("query keys", () => {
|
|||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
test("loads references from the current location-scoped endpoint", async () => {
|
|
||||||
const calls: unknown[] = []
|
|
||||||
const api = {
|
|
||||||
list: async (input: unknown) => {
|
|
||||||
calls.push(input)
|
|
||||||
return { location: {}, data: [{ name: "AGENTS.md", path: "/repo/AGENTS.md", source: "instructions" }] }
|
|
||||||
},
|
|
||||||
} as unknown as ReferenceApi
|
|
||||||
|
|
||||||
const result = await new QueryClient().fetchQuery(loadReferencesQuery(ServerScope.local, "/repo", api))
|
|
||||||
|
|
||||||
expect(calls).toEqual([{ location: { directory: "/repo" } }])
|
|
||||||
expect(result).toHaveLength(1)
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,46 +1,26 @@
|
|||||||
import type { Config, Path, Project, ProviderAuthResponse } from "@/types"
|
import type { Config, Path, Project, ProviderAuthResponse } from "@/types"
|
||||||
import type {
|
import type {
|
||||||
AgentListInput,
|
|
||||||
AgentListOutput,
|
|
||||||
CatalogApi,
|
|
||||||
CommandInfo,
|
|
||||||
CommandListInput,
|
|
||||||
CommandListOutput,
|
|
||||||
IntegrationListInput,
|
|
||||||
IntegrationListOutput,
|
|
||||||
LocationGetInput,
|
LocationGetInput,
|
||||||
LocationGetOutput,
|
LocationGetOutput,
|
||||||
PermissionRequest,
|
|
||||||
ProjectCurrentInput,
|
ProjectCurrentInput,
|
||||||
ProjectCurrentOutput,
|
ProjectCurrentOutput,
|
||||||
ProjectListOutput,
|
ProjectListOutput,
|
||||||
ReferenceListInput,
|
|
||||||
ReferenceListOutput,
|
|
||||||
ReferenceInfo,
|
|
||||||
SessionApi,
|
|
||||||
SessionInfo,
|
|
||||||
} from "@opencode-ai/client/promise"
|
} from "@opencode-ai/client/promise"
|
||||||
import { showToast } from "@/utils/toast"
|
import { showToast } from "@/utils/toast"
|
||||||
import { getFilename } from "@opencode-ai/core/util/path"
|
import { getFilename } from "@opencode-ai/core/util/path"
|
||||||
import { retry } from "@opencode-ai/core/util/retry"
|
import { retry } from "@opencode-ai/core/util/retry"
|
||||||
import { batch } from "solid-js"
|
import { reconcile, type SetStoreFunction, type Store } from "solid-js/store"
|
||||||
import { produce, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
|
|
||||||
import type { State } from "./types"
|
import type { State } from "./types"
|
||||||
import type { ServerSession } from "../server-session"
|
import { cmp, normalizeProjectInfo } from "./utils"
|
||||||
import { cmp, directoryKey, normalizeAgentList, normalizeProjectInfo, normalizeProviderList } from "./utils"
|
|
||||||
import { formatServerError } from "@/utils/server-errors"
|
import { formatServerError } from "@/utils/server-errors"
|
||||||
import { QueryClient, queryOptions } from "@tanstack/solid-query"
|
import { QueryClient, queryOptions } from "@tanstack/solid-query"
|
||||||
import { loadMcpQuery, loadMcpResourcesQuery } from "../server-sync"
|
import type { ServerScope } from "@/utils/server-scope"
|
||||||
import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
|
||||||
import { ScopedKey, type ServerScope } from "@/utils/server-scope"
|
|
||||||
import type { ServerApi } from "@/utils/server"
|
import type { ServerApi } from "@/utils/server"
|
||||||
import { sameDirectory } from "@/utils/workspace"
|
import { sameDirectory } from "@/utils/workspace"
|
||||||
|
|
||||||
type GlobalStore = {
|
type GlobalStore = {
|
||||||
ready: boolean
|
|
||||||
path: Path
|
path: Path
|
||||||
project: Project[]
|
project: Project[]
|
||||||
provider: NormalizedProviderListResponse
|
|
||||||
provider_auth: ProviderAuthResponse
|
provider_auth: ProviderAuthResponse
|
||||||
config: Config
|
config: Config
|
||||||
reload: undefined | "pending" | "complete"
|
reload: undefined | "pending" | "complete"
|
||||||
@@ -69,12 +49,6 @@ function errors(list: PromiseSettledResult<unknown>[]) {
|
|||||||
return list.filter((item): item is PromiseRejectedResult => item.status === "rejected").map((item) => item.reason)
|
return list.filter((item): item is PromiseRejectedResult => item.status === "rejected").map((item) => item.reason)
|
||||||
}
|
}
|
||||||
|
|
||||||
const providerRev = new Map<string, number>()
|
|
||||||
|
|
||||||
export function clearProviderRev(scope: ServerScope, directory: string) {
|
|
||||||
providerRev.delete(ScopedKey.from(scope, directory))
|
|
||||||
}
|
|
||||||
|
|
||||||
function runAll(list: Array<() => Promise<unknown>>) {
|
function runAll(list: Array<() => Promise<unknown>>) {
|
||||||
return Promise.allSettled(list.map((item) => item()))
|
return Promise.allSettled(list.map((item) => item()))
|
||||||
}
|
}
|
||||||
@@ -109,10 +83,6 @@ type ProjectApi = {
|
|||||||
type WorktreeApi = Pick<ServerApi["worktree"], "list">
|
type WorktreeApi = Pick<ServerApi["worktree"], "list">
|
||||||
type LocationApi = { readonly get: (input?: LocationGetInput) => Promise<LocationGetOutput> }
|
type LocationApi = { readonly get: (input?: LocationGetInput) => Promise<LocationGetOutput> }
|
||||||
|
|
||||||
type McpApi = ServerApi["mcp"]
|
|
||||||
type PermissionApi = ServerApi["permission"]
|
|
||||||
type VcsApi = ServerApi["vcs"]
|
|
||||||
|
|
||||||
export const loadProjectsQuery = (scope: ServerScope, projects: ProjectApi, worktrees: WorktreeApi) =>
|
export const loadProjectsQuery = (scope: ServerScope, projects: ProjectApi, worktrees: WorktreeApi) =>
|
||||||
queryOptions({
|
queryOptions({
|
||||||
queryKey: [scope, "project"],
|
queryKey: [scope, "project"],
|
||||||
@@ -150,7 +120,7 @@ export const loadProjectsQuery = (scope: ServerScope, projects: ProjectApi, work
|
|||||||
})
|
})
|
||||||
|
|
||||||
export async function bootstrapGlobal(input: {
|
export async function bootstrapGlobal(input: {
|
||||||
serverAPI: CatalogApi & {
|
serverAPI: {
|
||||||
readonly location: LocationApi
|
readonly location: LocationApi
|
||||||
readonly project: ProjectApi
|
readonly project: ProjectApi
|
||||||
readonly worktree: WorktreeApi
|
readonly worktree: WorktreeApi
|
||||||
@@ -164,7 +134,6 @@ export async function bootstrapGlobal(input: {
|
|||||||
}) {
|
}) {
|
||||||
const slow = [
|
const slow = [
|
||||||
() => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.scope)),
|
() => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.scope)),
|
||||||
() => input.queryClient.fetchQuery(loadProvidersQuery(input.scope, null, input.serverAPI)),
|
|
||||||
() => input.queryClient.fetchQuery(loadPathQuery(input.scope, null, input.serverAPI.location)),
|
() => input.queryClient.fetchQuery(loadPathQuery(input.scope, null, input.serverAPI.location)),
|
||||||
() =>
|
() =>
|
||||||
input.queryClient
|
input.queryClient
|
||||||
@@ -180,97 +149,10 @@ export async function bootstrapGlobal(input: {
|
|||||||
// })
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
function groupBySession<T extends { id: string; sessionID: string }>(input: T[]) {
|
|
||||||
return input.reduce<Record<string, T[]>>((acc, item) => {
|
|
||||||
if (!item?.id || !item.sessionID) return acc
|
|
||||||
const list = acc[item.sessionID]
|
|
||||||
if (list) list.push(item)
|
|
||||||
if (!list) acc[item.sessionID] = [item]
|
|
||||||
return acc
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
|
|
||||||
function projectID(directory: string, projects: Project[]) {
|
function projectID(directory: string, projects: Project[]) {
|
||||||
return projects.find((project) => project.worktree === directory || project.sandboxes?.includes(directory))?.id
|
return projects.find((project) => project.worktree === directory || project.sandboxes?.includes(directory))?.id
|
||||||
}
|
}
|
||||||
|
|
||||||
function mergeSession(setStore: SetStoreFunction<State>, session: SessionInfo) {
|
|
||||||
setStore("session", (list) => {
|
|
||||||
const next = list.slice()
|
|
||||||
const idx = next.findIndex((item) => item.id >= session.id)
|
|
||||||
if (idx === -1) return [...next, session]
|
|
||||||
if (next[idx]?.id === session.id) {
|
|
||||||
next[idx] = session
|
|
||||||
return next
|
|
||||||
}
|
|
||||||
next.splice(idx, 0, session)
|
|
||||||
return next
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function warmSessions(input: {
|
|
||||||
ids: string[]
|
|
||||||
store: Store<State>
|
|
||||||
setStore: SetStoreFunction<State>
|
|
||||||
api: SessionApi
|
|
||||||
}) {
|
|
||||||
const known = new Set(input.store.session.map((item) => item.id))
|
|
||||||
const ids = [...new Set(input.ids)].filter((id) => !!id && !known.has(id))
|
|
||||||
if (ids.length === 0) return Promise.resolve()
|
|
||||||
return Promise.all(
|
|
||||||
ids.map((sessionID) =>
|
|
||||||
retry(() => input.api.get({ sessionID })).then((session) => mergeSession(input.setStore, session)),
|
|
||||||
),
|
|
||||||
).then(() => undefined)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const loadProvidersQuery = (scope: ServerScope, directory: string | null, sdk: CatalogApi) =>
|
|
||||||
queryOptions({
|
|
||||||
queryKey: [scope, directory, "providers"],
|
|
||||||
queryFn: () =>
|
|
||||||
retry(async () => {
|
|
||||||
const location = directory ? { location: { directory } } : undefined
|
|
||||||
const [providers, models, defaultModel] = await Promise.all([
|
|
||||||
sdk.provider.list(location),
|
|
||||||
sdk.model.list(location),
|
|
||||||
sdk.model.default(location),
|
|
||||||
])
|
|
||||||
return normalizeProviderList(providers.data, models.data, defaultModel.data)
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
|
|
||||||
type AgentListApi = {
|
|
||||||
readonly list: (input?: AgentListInput) => Promise<AgentListOutput>
|
|
||||||
}
|
|
||||||
|
|
||||||
type CommandListApi = {
|
|
||||||
readonly list: (input?: CommandListInput) => Promise<CommandListOutput>
|
|
||||||
}
|
|
||||||
|
|
||||||
type IntegrationListApi = {
|
|
||||||
readonly list: (input?: IntegrationListInput) => Promise<IntegrationListOutput>
|
|
||||||
}
|
|
||||||
|
|
||||||
type ReferenceListApi = {
|
|
||||||
readonly list: (input?: ReferenceListInput) => Promise<ReferenceListOutput>
|
|
||||||
}
|
|
||||||
|
|
||||||
export const loadAgentsQuery = (scope: ServerScope, directory: string, sdk: AgentListApi) =>
|
|
||||||
queryOptions({
|
|
||||||
queryKey: [scope, directory, "agents"],
|
|
||||||
queryFn: () => retry(() => sdk.list({ location: { directory } }).then((result) => normalizeAgentList(result.data))),
|
|
||||||
})
|
|
||||||
|
|
||||||
export const loadIntegrationsQuery = (scope: ServerScope, directory: string | null, sdk: IntegrationListApi) =>
|
|
||||||
queryOptions({
|
|
||||||
queryKey: [scope, directory, "integrations"] as const,
|
|
||||||
queryFn: () =>
|
|
||||||
retry(() => sdk.list(directory ? { location: { directory } } : undefined).then((result) => result.data)),
|
|
||||||
})
|
|
||||||
|
|
||||||
export const loadCommands = (directory: string, api: CommandListApi): Promise<CommandInfo[]> =>
|
|
||||||
retry(() => api.list({ location: { directory } }).then((result) => result.data))
|
|
||||||
|
|
||||||
export const loadPathQuery = (scope: ServerScope, directory: string | null, api: LocationApi) =>
|
export const loadPathQuery = (scope: ServerScope, directory: string | null, api: LocationApi) =>
|
||||||
queryOptions<Path>({
|
queryOptions<Path>({
|
||||||
queryKey: [scope, directory, "path"],
|
queryKey: [scope, directory, "path"],
|
||||||
@@ -284,130 +166,37 @@ export const loadPathQuery = (scope: ServerScope, directory: string | null, api:
|
|||||||
})),
|
})),
|
||||||
})
|
})
|
||||||
|
|
||||||
export const loadReferencesQuery = (scope: ServerScope, directory: string, api: ReferenceListApi) =>
|
|
||||||
queryOptions<ReferenceInfo[]>({
|
|
||||||
queryKey: [scope, directory, "references"] as const,
|
|
||||||
queryFn: () => retry(() => api.list({ location: { directory } }).then((result) => result.data)).catch(() => []),
|
|
||||||
placeholderData: [],
|
|
||||||
})
|
|
||||||
|
|
||||||
export async function bootstrapDirectory(input: {
|
export async function bootstrapDirectory(input: {
|
||||||
directory: string
|
directory: string
|
||||||
scope: ServerScope
|
scope: ServerScope
|
||||||
mcp: boolean
|
mcp: boolean
|
||||||
api: CatalogApi & {
|
api: {
|
||||||
readonly agent: AgentListApi
|
|
||||||
readonly command: CommandListApi
|
|
||||||
readonly mcp: McpApi
|
|
||||||
readonly permission: PermissionApi
|
|
||||||
readonly project: ProjectApi
|
readonly project: ProjectApi
|
||||||
readonly reference: ReferenceListApi
|
|
||||||
readonly session: SessionApi
|
|
||||||
readonly vcs: VcsApi
|
|
||||||
readonly location: LocationApi
|
|
||||||
}
|
}
|
||||||
store: Store<State>
|
store: Store<State>
|
||||||
setStore: SetStoreFunction<State>
|
setStore: SetStoreFunction<State>
|
||||||
loadSessions: (directory: string) => Promise<void> | void
|
|
||||||
translate: (key: string, vars?: Record<string, string | number>) => string
|
translate: (key: string, vars?: Record<string, string | number>) => string
|
||||||
global: {
|
global: {
|
||||||
config: Config
|
config: Config
|
||||||
path: Path
|
path: Path
|
||||||
project: Project[]
|
project: Project[]
|
||||||
provider: NormalizedProviderListResponse
|
|
||||||
}
|
}
|
||||||
queryClient: QueryClient
|
queryClient: QueryClient
|
||||||
session?: ServerSession
|
|
||||||
}) {
|
}) {
|
||||||
const loading = input.store.status !== "complete"
|
const loading = input.store.status !== "complete"
|
||||||
const seededProject = projectID(input.directory, input.global.project)
|
const seededProject = projectID(input.directory, input.global.project)
|
||||||
const seededPath = input.global.path.directory === input.directory ? input.global.path : undefined
|
|
||||||
if (seededProject) input.setStore("project", seededProject)
|
if (seededProject) input.setStore("project", seededProject)
|
||||||
if (seededPath) input.setStore("path", seededPath)
|
|
||||||
if (Object.keys(input.store.config).length === 0 && Object.keys(input.global.config).length > 0) {
|
if (Object.keys(input.store.config).length === 0 && Object.keys(input.global.config).length > 0) {
|
||||||
input.setStore("config", reconcile(input.global.config, { merge: false }))
|
input.setStore("config", reconcile(input.global.config, { merge: false }))
|
||||||
}
|
}
|
||||||
if (loading) input.setStore("status", "partial")
|
if (loading) input.setStore("status", "partial")
|
||||||
|
|
||||||
const revKey = ScopedKey.from(input.scope, input.directory)
|
|
||||||
const rev = (providerRev.get(revKey) ?? 0) + 1
|
|
||||||
providerRev.set(revKey, rev)
|
|
||||||
const slow = [
|
const slow = [
|
||||||
() => Promise.resolve(input.loadSessions(input.directory)),
|
|
||||||
() =>
|
|
||||||
input.queryClient
|
|
||||||
.ensureQueryData(loadAgentsQuery(input.scope, directoryKey(input.directory), input.api.agent))
|
|
||||||
.then((data) => input.setStore("agent", data)),
|
|
||||||
!seededProject &&
|
!seededProject &&
|
||||||
(() =>
|
(() =>
|
||||||
retry(() => input.api.project.current({ location: { directory: input.directory } })).then((project) =>
|
retry(() => input.api.project.current({ location: { directory: input.directory } })).then((project) =>
|
||||||
input.setStore("project", project.id),
|
input.setStore("project", project.id),
|
||||||
)),
|
)),
|
||||||
!seededPath &&
|
|
||||||
(() =>
|
|
||||||
input.queryClient
|
|
||||||
.ensureQueryData(loadPathQuery(input.scope, directoryKey(input.directory), input.api.location))
|
|
||||||
.then((data) => {
|
|
||||||
const next = projectID(data.directory ?? input.directory, input.global.project)
|
|
||||||
if (next) input.setStore("project", next)
|
|
||||||
})),
|
|
||||||
input.mcp &&
|
|
||||||
(() => loadCommands(input.directory, input.api.command).then((commands) => input.setStore("command", commands))),
|
|
||||||
() =>
|
|
||||||
input.queryClient.fetchQuery(
|
|
||||||
loadReferencesQuery(input.scope, directoryKey(input.directory), input.api.reference),
|
|
||||||
),
|
|
||||||
() =>
|
|
||||||
retry(() =>
|
|
||||||
input.api.permission.request
|
|
||||||
.list({ location: { directory: input.directory } })
|
|
||||||
.then((result) => result.data)
|
|
||||||
.then((permissions) => {
|
|
||||||
const ids = permissions.map((permission) => permission.sessionID)
|
|
||||||
const grouped = groupBySession(
|
|
||||||
permissions.filter((permission) => !!permission.id && !!permission.sessionID),
|
|
||||||
)
|
|
||||||
const warm = input.session
|
|
||||||
? Promise.all(ids.map((sessionID) => input.session!.resolve(sessionID))).then(() => undefined)
|
|
||||||
: warmSessions({ ids, store: input.store, setStore: input.setStore, api: input.api.session })
|
|
||||||
return warm.then(() =>
|
|
||||||
batch(() => {
|
|
||||||
const current = input.session?.data.permission ?? input.store.permission
|
|
||||||
for (const sessionID of Object.keys(current)) {
|
|
||||||
if (grouped[sessionID]) continue
|
|
||||||
if (input.session?.get(sessionID)?.location.directory !== input.directory) continue
|
|
||||||
if (input.session) input.session.set("permission", sessionID, [])
|
|
||||||
if (!input.session) input.setStore("permission", sessionID, [])
|
|
||||||
}
|
|
||||||
for (const [sessionID, permissions] of Object.entries(grouped)) {
|
|
||||||
const value = reconcile(
|
|
||||||
permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)),
|
|
||||||
{ key: "id" },
|
|
||||||
)
|
|
||||||
if (input.session) input.session.set("permission", sessionID, value)
|
|
||||||
if (!input.session) input.setStore("permission", sessionID, value)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
() => Promise.resolve(input.loadSessions(input.directory)),
|
|
||||||
input.mcp &&
|
|
||||||
(() => input.queryClient.fetchQuery(loadMcpQuery(input.scope, directoryKey(input.directory), input.api.mcp))),
|
|
||||||
input.mcp &&
|
|
||||||
(() =>
|
|
||||||
input.queryClient.fetchQuery(loadMcpResourcesQuery(input.scope, directoryKey(input.directory), input.api.mcp))),
|
|
||||||
() =>
|
|
||||||
input.queryClient
|
|
||||||
.fetchQuery(loadProvidersQuery(input.scope, directoryKey(input.directory), input.api))
|
|
||||||
.catch((err) => {
|
|
||||||
const project = getFilename(input.directory)
|
|
||||||
showToast({
|
|
||||||
variant: "error",
|
|
||||||
title: input.translate("toast.project.reloadFailed.title", { project }),
|
|
||||||
description: formatServerError(err, input.translate),
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
].filter(Boolean) as (() => Promise<any>)[]
|
].filter(Boolean) as (() => Promise<any>)[]
|
||||||
|
|
||||||
await waitForPaint()
|
await waitForPaint()
|
||||||
|
|||||||
@@ -1,14 +1,13 @@
|
|||||||
import { beforeAll, describe, expect, mock, test } from "bun:test"
|
import { beforeAll, describe, expect, mock, test } from "bun:test"
|
||||||
import { createRoot, getOwner, type Owner } from "solid-js"
|
import { createRoot, getOwner, type Owner } from "solid-js"
|
||||||
import { createStore } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
|
||||||
import type { State } from "./types"
|
import type { State } from "./types"
|
||||||
import type { QueryOptionsApi } from "../server-sync"
|
import type { QueryOptionsApi } from "../server-sync"
|
||||||
import { ServerScope } from "@/utils/server-scope"
|
import { ServerScope } from "@/utils/server-scope"
|
||||||
|
import type { Data } from "@opencode-ai/client/solid"
|
||||||
|
|
||||||
let createChildStoreManager: typeof import("./child-store").createChildStoreManager
|
let createChildStoreManager: typeof import("./child-store").createChildStoreManager
|
||||||
const querySingles: Array<() => { queryKey?: unknown[]; enabled?: boolean }> = []
|
const querySingles: Array<() => { queryKey?: unknown[]; enabled?: boolean }> = []
|
||||||
let providerQuerySuccess = true
|
|
||||||
const persist: typeof import("@/utils/persist").persisted = (_target, store) => [
|
const persist: typeof import("@/utils/persist").persisted = (_target, store) => [
|
||||||
store[0],
|
store[0],
|
||||||
store[1],
|
store[1],
|
||||||
@@ -17,12 +16,26 @@ const persist: typeof import("@/utils/persist").persisted = (_target, store) =>
|
|||||||
]
|
]
|
||||||
|
|
||||||
const child = () => createStore({} as State)
|
const child = () => createStore({} as State)
|
||||||
const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
|
const path = { state: "", config: "", worktree: "", directory: "", home: "" }
|
||||||
|
const data = {
|
||||||
|
location: {
|
||||||
|
info: () => undefined,
|
||||||
|
agent: { list: () => undefined },
|
||||||
|
command: { list: () => undefined },
|
||||||
|
reference: { list: () => undefined },
|
||||||
|
provider: { list: () => undefined },
|
||||||
|
model: { list: () => undefined, default: () => undefined },
|
||||||
|
mcp: {
|
||||||
|
server: { list: () => undefined },
|
||||||
|
resource: { list: () => undefined },
|
||||||
|
},
|
||||||
|
vcs: { info: () => undefined },
|
||||||
|
},
|
||||||
|
} as unknown as Data
|
||||||
|
|
||||||
const queryOptionsApi = {
|
const queryOptionsApi = {
|
||||||
globalConfig: () => ({ queryKey: ["globalConfig"], queryFn: async () => ({}) }),
|
globalConfig: () => ({ queryKey: ["globalConfig"], queryFn: async () => ({}) }),
|
||||||
projects: () => ({ queryKey: ["projects"], queryFn: async () => [] }),
|
projects: () => ({ queryKey: ["projects"], queryFn: async () => [] }),
|
||||||
providers: (directory: string | null) => ({ queryKey: [directory, "providers"], queryFn: async () => provider }),
|
|
||||||
path: (directory: string | null) => ({
|
path: (directory: string | null) => ({
|
||||||
queryKey: [directory, "path"],
|
queryKey: [directory, "path"],
|
||||||
queryFn: async () => ({
|
queryFn: async () => ({
|
||||||
@@ -60,7 +73,7 @@ beforeAll(async () => {
|
|||||||
return options().queryKey?.[1] === "path"
|
return options().queryKey?.[1] === "path"
|
||||||
},
|
},
|
||||||
get isSuccess() {
|
get isSuccess() {
|
||||||
return options().queryKey?.[1] === "providers" && options().enabled === true && providerQuerySuccess
|
return false
|
||||||
},
|
},
|
||||||
get isRefetchError() {
|
get isRefetchError() {
|
||||||
return false
|
return false
|
||||||
@@ -69,7 +82,6 @@ beforeAll(async () => {
|
|||||||
if (options().queryKey?.[1] === "path") throw new Error("pending path data read")
|
if (options().queryKey?.[1] === "path") throw new Error("pending path data read")
|
||||||
if (options().queryKey?.[1] === "mcp") return options().enabled ? { demo: { status: "disabled" } } : undefined
|
if (options().queryKey?.[1] === "mcp") return options().enabled ? { demo: { status: "disabled" } } : undefined
|
||||||
if (options().queryKey?.[1] === "lsp") return []
|
if (options().queryKey?.[1] === "lsp") return []
|
||||||
if (options().queryKey?.[1] === "providers") return providerQuerySuccess ? provider : undefined
|
|
||||||
return undefined
|
return undefined
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -100,7 +112,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
|
|
||||||
Array.from({ length: 30 }, (_, index) => `/pinned-${index}`).forEach((directory) => {
|
Array.from({ length: 30 }, (_, index) => `/pinned-${index}`).forEach((directory) => {
|
||||||
@@ -134,7 +147,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -144,7 +158,6 @@ describe("createChildStoreManager", () => {
|
|||||||
const [store] = manager.child("/project")
|
const [store] = manager.child("/project")
|
||||||
|
|
||||||
expect(store.status).toBe("loading")
|
expect(store.status).toBe("loading")
|
||||||
expect(store.limit).toBe(5)
|
|
||||||
expect(bootstraps).toEqual(["/project"])
|
expect(bootstraps).toEqual(["/project"])
|
||||||
} finally {
|
} finally {
|
||||||
dispose()
|
dispose()
|
||||||
@@ -167,7 +180,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -198,7 +212,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -214,7 +229,7 @@ describe("createChildStoreManager", () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
test("enables MCP only when requested for the directory", () => {
|
test("syncs MCP only when requested for the directory", () => {
|
||||||
let manager: ReturnType<typeof createChildStoreManager> | undefined
|
let manager: ReturnType<typeof createChildStoreManager> | undefined
|
||||||
const offset = querySingles.length
|
const offset = querySingles.length
|
||||||
const mcpLoads: string[] = []
|
const mcpLoads: string[] = []
|
||||||
@@ -234,30 +249,21 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (!manager) throw new Error("manager required")
|
if (!manager) throw new Error("manager required")
|
||||||
const [store, setStore] = manager.child("/project", { bootstrap: false })
|
const [, setStore] = manager.child("/project", { bootstrap: false })
|
||||||
expect(querySingles.length - offset).toBe(6)
|
expect(querySingles.length - offset).toBe(1)
|
||||||
const query = querySingles[offset + 1]
|
|
||||||
const resourceQuery = querySingles[offset + 2]
|
|
||||||
if (!query) throw new Error("query required")
|
|
||||||
if (!resourceQuery) throw new Error("resource query required")
|
|
||||||
expect(query().enabled).toBe(false)
|
|
||||||
expect(resourceQuery().enabled).toBe(false)
|
|
||||||
|
|
||||||
setStore("status", "complete")
|
setStore("status", "complete")
|
||||||
manager.child("/project", { bootstrap: false, mcp: true })
|
manager.child("/project", { bootstrap: false, mcp: true })
|
||||||
expect(query().enabled).toBe(true)
|
|
||||||
expect(resourceQuery().enabled).toBe(true)
|
|
||||||
expect(store.mcp).toEqual({ demo: { status: "disabled" } })
|
|
||||||
expect(mcpLoads).toEqual(["/project"])
|
expect(mcpLoads).toEqual(["/project"])
|
||||||
|
|
||||||
manager.disableMcp("/project")
|
manager.disableMcp("/project")
|
||||||
expect(query().enabled).toBe(false)
|
|
||||||
expect(manager.mcp("/project")).toBe(false)
|
expect(manager.mcp("/project")).toBe(false)
|
||||||
} finally {
|
} finally {
|
||||||
dispose()
|
dispose()
|
||||||
@@ -284,7 +290,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -293,11 +300,8 @@ describe("createChildStoreManager", () => {
|
|||||||
const [store] = manager.child("/project", { bootstrap: false })
|
const [store] = manager.child("/project", { bootstrap: false })
|
||||||
const queries = querySingles.slice(offset)
|
const queries = querySingles.slice(offset)
|
||||||
|
|
||||||
expect(queries).toHaveLength(6)
|
expect(queries).toHaveLength(1)
|
||||||
expect(queries[0]?.().enabled).toBe(false)
|
expect(queries[0]?.().enabled).toBe(false)
|
||||||
expect(queries[3]?.().enabled).toBe(false)
|
|
||||||
expect(queries[4]?.().enabled).toBe(false)
|
|
||||||
expect(queries[5]?.().enabled).toBe(false)
|
|
||||||
expect(store.path.directory).toBe("/project")
|
expect(store.path.directory).toBe("/project")
|
||||||
expect(store.provider_ready).toBe(false)
|
expect(store.provider_ready).toBe(false)
|
||||||
expect(store.lsp_ready).toBe(false)
|
expect(store.lsp_ready).toBe(false)
|
||||||
@@ -305,9 +309,6 @@ describe("createChildStoreManager", () => {
|
|||||||
|
|
||||||
manager.child("/project")
|
manager.child("/project")
|
||||||
expect(queries[0]?.().enabled).toBe(true)
|
expect(queries[0]?.().enabled).toBe(true)
|
||||||
expect(queries[3]?.().enabled).toBe(true)
|
|
||||||
expect(queries[4]?.().enabled).toBe(true)
|
|
||||||
expect(queries[5]?.().enabled).toBe(true)
|
|
||||||
expect(bootstraps).toEqual(["/project"])
|
expect(bootstraps).toEqual(["/project"])
|
||||||
|
|
||||||
manager.child("/project", { bootstrap: false })
|
manager.child("/project", { bootstrap: false })
|
||||||
@@ -317,9 +318,8 @@ describe("createChildStoreManager", () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
test("does not mark a cancelled provider query as ready", () => {
|
test("does not mark unsynced provider data as ready", () => {
|
||||||
let manager: ReturnType<typeof createChildStoreManager> | undefined
|
let manager: ReturnType<typeof createChildStoreManager> | undefined
|
||||||
providerQuerySuccess = false
|
|
||||||
|
|
||||||
const dispose = createOwner((owner) => {
|
const dispose = createOwner((owner) => {
|
||||||
manager = createChildStoreManager({
|
manager = createChildStoreManager({
|
||||||
@@ -334,7 +334,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -343,7 +344,6 @@ describe("createChildStoreManager", () => {
|
|||||||
const [store] = manager.child("/cancelled")
|
const [store] = manager.child("/cancelled")
|
||||||
expect(store.provider_ready).toBe(false)
|
expect(store.provider_ready).toBe(false)
|
||||||
} finally {
|
} finally {
|
||||||
providerQuerySuccess = true
|
|
||||||
dispose()
|
dispose()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -365,7 +365,8 @@ describe("createChildStoreManager", () => {
|
|||||||
onDispose() {},
|
onDispose() {},
|
||||||
translate: (key) => key,
|
translate: (key) => key,
|
||||||
queryOptions: queryOptionsApi,
|
queryOptions: queryOptionsApi,
|
||||||
global: { provider },
|
data,
|
||||||
|
global: { path },
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -374,11 +375,9 @@ describe("createChildStoreManager", () => {
|
|||||||
manager.child("/handshake")
|
manager.child("/handshake")
|
||||||
const queries = querySingles.slice(offset)
|
const queries = querySingles.slice(offset)
|
||||||
expect(queries[0]?.().enabled).toBe(false)
|
expect(queries[0]?.().enabled).toBe(false)
|
||||||
expect(queries[4]?.().enabled).toBe(false)
|
|
||||||
|
|
||||||
connected = true
|
connected = true
|
||||||
expect(queries[0]?.().enabled).toBe(true)
|
expect(queries[0]?.().enabled).toBe(true)
|
||||||
expect(queries[4]?.().enabled).toBe(true)
|
|
||||||
} finally {
|
} finally {
|
||||||
dispose()
|
dispose()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { createRoot, createSignal, getOwner, onCleanup, runWithOwner, type Accessor, type Owner } from "solid-js"
|
import { createRoot, createSignal, getOwner, onCleanup, runWithOwner, type Accessor, type Owner } from "solid-js"
|
||||||
import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
|
import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
|
||||||
import { Persist, persisted } from "@/utils/persist"
|
import { Persist, persisted } from "@/utils/persist"
|
||||||
import type { VcsInfo } from "@/types"
|
import type { Path, VcsInfo } from "@/types"
|
||||||
import {
|
import {
|
||||||
DIR_IDLE_TTL_MS,
|
DIR_IDLE_TTL_MS,
|
||||||
MAX_DIR_STORES,
|
MAX_DIR_STORES,
|
||||||
@@ -17,8 +17,9 @@ import { canDisposeDirectory, pickDirectoriesToEvict } from "./eviction"
|
|||||||
import { useQuery } from "@tanstack/solid-query"
|
import { useQuery } from "@tanstack/solid-query"
|
||||||
import { QueryOptionsApi } from "../server-sync"
|
import { QueryOptionsApi } from "../server-sync"
|
||||||
import { directoryKey, type DirectoryKey } from "./utils"
|
import { directoryKey, type DirectoryKey } from "./utils"
|
||||||
import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
|
||||||
import type { ServerScope } from "@/utils/server-scope"
|
import type { ServerScope } from "@/utils/server-scope"
|
||||||
|
import type { Data } from "@opencode-ai/client/solid"
|
||||||
|
import { normalizeAgentList, normalizeProviderList } from "./utils"
|
||||||
|
|
||||||
export function createChildStoreManager(input: {
|
export function createChildStoreManager(input: {
|
||||||
owner: Owner
|
owner: Owner
|
||||||
@@ -32,8 +33,9 @@ export function createChildStoreManager(input: {
|
|||||||
onDispose: (directory: string) => void
|
onDispose: (directory: string) => void
|
||||||
translate: (key: string, vars?: Record<string, string | number>) => string
|
translate: (key: string, vars?: Record<string, string | number>) => string
|
||||||
queryOptions: QueryOptionsApi
|
queryOptions: QueryOptionsApi
|
||||||
|
data: Data
|
||||||
global: {
|
global: {
|
||||||
provider: NormalizedProviderListResponse
|
path: Path
|
||||||
}
|
}
|
||||||
}) {
|
}) {
|
||||||
const children: Record<string, [Store<State>, SetStoreFunction<State>]> = {}
|
const children: Record<string, [Store<State>, SetStoreFunction<State>]> = {}
|
||||||
@@ -45,7 +47,6 @@ export function createChildStoreManager(input: {
|
|||||||
const ownerPins = new WeakMap<object, Set<string>>()
|
const ownerPins = new WeakMap<object, Set<string>>()
|
||||||
const disposers = new Map<string, () => void>()
|
const disposers = new Map<string, () => void>()
|
||||||
const mcpDirectories = new Set<string>()
|
const mcpDirectories = new Set<string>()
|
||||||
const mcpToggles = new Map<string, (enabled: boolean) => void>()
|
|
||||||
const activeDirectories = new Set<string>()
|
const activeDirectories = new Set<string>()
|
||||||
const activationToggles = new Map<string, (enabled: boolean) => void>()
|
const activationToggles = new Map<string, (enabled: boolean) => void>()
|
||||||
|
|
||||||
@@ -120,7 +121,6 @@ export function createChildStoreManager(input: {
|
|||||||
iconCache.delete(key)
|
iconCache.delete(key)
|
||||||
lifecycle.delete(key)
|
lifecycle.delete(key)
|
||||||
mcpDirectories.delete(key)
|
mcpDirectories.delete(key)
|
||||||
mcpToggles.delete(key)
|
|
||||||
activeDirectories.delete(key)
|
activeDirectories.delete(key)
|
||||||
activationToggles.delete(key)
|
activationToggles.delete(key)
|
||||||
const dispose = disposers.get(key)
|
const dispose = disposers.get(key)
|
||||||
@@ -186,78 +186,63 @@ export function createChildStoreManager(input: {
|
|||||||
createRoot((dispose) => {
|
createRoot((dispose) => {
|
||||||
const initialMeta = meta[0].value
|
const initialMeta = meta[0].value
|
||||||
const initialIcon = icon[0].value
|
const initialIcon = icon[0].value
|
||||||
const [mcpEnabled, setMcpEnabled] = createSignal(false)
|
|
||||||
const [instanceQueriesEnabled, setInstanceQueriesEnabled] = createSignal(false)
|
const [instanceQueriesEnabled, setInstanceQueriesEnabled] = createSignal(false)
|
||||||
|
|
||||||
const pathQuery = useQuery(() => ({
|
|
||||||
...input.queryOptions.path(key),
|
|
||||||
enabled: input.connected() && instanceQueriesEnabled(),
|
|
||||||
}))
|
|
||||||
const mcpQuery = useQuery(() => ({
|
|
||||||
...input.queryOptions.mcp(key),
|
|
||||||
enabled: input.connected() && mcpEnabled(),
|
|
||||||
}))
|
|
||||||
const mcpResourceQuery = useQuery(() => ({
|
|
||||||
...input.queryOptions.mcpResources(key),
|
|
||||||
enabled: input.connected() && mcpEnabled(),
|
|
||||||
}))
|
|
||||||
const lspQuery = useQuery(() => ({
|
const lspQuery = useQuery(() => ({
|
||||||
...input.queryOptions.lsp(key),
|
...input.queryOptions.lsp(key),
|
||||||
enabled: input.connected() && instanceQueriesEnabled(),
|
enabled: input.connected() && instanceQueriesEnabled(),
|
||||||
}))
|
}))
|
||||||
const providerQuery = useQuery(() => ({
|
|
||||||
...input.queryOptions.providers(key),
|
|
||||||
enabled: input.connected() && instanceQueriesEnabled(),
|
|
||||||
}))
|
|
||||||
const referenceQuery = useQuery(() => ({
|
|
||||||
...input.queryOptions.references(key),
|
|
||||||
enabled: input.connected() && instanceQueriesEnabled(),
|
|
||||||
}))
|
|
||||||
|
|
||||||
const child = createStore<State>({
|
const child = createStore<State>({
|
||||||
project: "",
|
project: "",
|
||||||
projectMeta: initialMeta,
|
projectMeta: initialMeta,
|
||||||
icon: initialIcon,
|
icon: initialIcon,
|
||||||
get provider_ready() {
|
get provider_ready() {
|
||||||
return instanceQueriesEnabled() && (providerQuery.isSuccess || providerQuery.isRefetchError)
|
return (
|
||||||
|
input.data.location.provider.list({ directory }) !== undefined &&
|
||||||
|
input.data.location.model.list({ directory }) !== undefined
|
||||||
|
)
|
||||||
},
|
},
|
||||||
get provider() {
|
get provider() {
|
||||||
const EMPTY = { all: new Map(), connected: [], default: {} }
|
const provider = input.data.location.provider.list({ directory })
|
||||||
if (!providerQuery.isSuccess && !providerQuery.isRefetchError) return EMPTY
|
const model = input.data.location.model.list({ directory })
|
||||||
const provider = providerQuery.data
|
if (!provider || !model) return { all: new Map(), connected: [], default: {} }
|
||||||
if (provider.all.size === 0 && input.global.provider.all.size > 0) return input.global.provider
|
return normalizeProviderList(provider, model)
|
||||||
return provider
|
|
||||||
},
|
},
|
||||||
config: {},
|
config: {},
|
||||||
get path() {
|
get path() {
|
||||||
const EMPTY = { state: "", config: "", worktree: "", directory, home: "" }
|
const location = input.data.location.info({ directory })
|
||||||
if (pathQuery.isLoading) return EMPTY
|
return {
|
||||||
return pathQuery.data ?? EMPTY
|
state: "",
|
||||||
|
config: "",
|
||||||
|
worktree: location?.project.directory ?? "",
|
||||||
|
directory: location?.directory ?? directory,
|
||||||
|
home: input.global.path.home,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
status: "loading" as const,
|
status: "loading" as const,
|
||||||
agent: [],
|
get agent() {
|
||||||
command: [],
|
return normalizeAgentList(input.data.location.agent.list({ directory }) ?? [])
|
||||||
|
},
|
||||||
|
get command() {
|
||||||
|
return input.data.location.command.list({ directory }) ?? []
|
||||||
|
},
|
||||||
get reference() {
|
get reference() {
|
||||||
return referenceQuery.isLoading ? [] : (referenceQuery.data ?? [])
|
return input.data.location.reference.list({ directory }) ?? []
|
||||||
},
|
},
|
||||||
session: [],
|
|
||||||
sessionTotal: 0,
|
|
||||||
session_status: {},
|
|
||||||
session_working(id: string) {
|
|
||||||
const type = this.session_status[id]?.type
|
|
||||||
return (type ?? "idle") !== "idle"
|
|
||||||
},
|
|
||||||
session_diff: {},
|
|
||||||
todo: {},
|
|
||||||
permission: {},
|
|
||||||
get mcp_ready() {
|
get mcp_ready() {
|
||||||
return !mcpQuery.isLoading
|
return input.data.location.mcp.server.list({ directory }) !== undefined
|
||||||
},
|
},
|
||||||
get mcp() {
|
get mcp() {
|
||||||
return mcpQuery.isLoading ? {} : (mcpQuery.data ?? {})
|
return Object.fromEntries(
|
||||||
|
(input.data.location.mcp.server.list({ directory }) ?? []).map((server) => [server.name, server.status]),
|
||||||
|
)
|
||||||
},
|
},
|
||||||
get mcp_resource() {
|
get mcp_resource() {
|
||||||
return mcpResourceQuery.isLoading ? {} : (mcpResourceQuery.data ?? {})
|
return Object.fromEntries(
|
||||||
|
(input.data.location.mcp.resource.list({ directory }) ?? []).map((resource) => [
|
||||||
|
`${resource.server}:${resource.uri}`,
|
||||||
|
resource,
|
||||||
|
]),
|
||||||
|
)
|
||||||
},
|
},
|
||||||
get lsp_ready() {
|
get lsp_ready() {
|
||||||
return instanceQueriesEnabled() && !lspQuery.isLoading
|
return instanceQueriesEnabled() && !lspQuery.isLoading
|
||||||
@@ -265,16 +250,14 @@ export function createChildStoreManager(input: {
|
|||||||
get lsp() {
|
get lsp() {
|
||||||
return lspQuery.isLoading ? [] : (lspQuery.data ?? [])
|
return lspQuery.isLoading ? [] : (lspQuery.data ?? [])
|
||||||
},
|
},
|
||||||
vcs: vcsStore.value,
|
get vcs() {
|
||||||
limit: 5,
|
const vcs = input.data.location.vcs.info({ directory })
|
||||||
message: {},
|
if (!vcs) return vcsStore.value
|
||||||
session_message: {},
|
return { branch: vcs.branch.current, default_branch: vcs.branch.default }
|
||||||
part: {},
|
},
|
||||||
part_text_accum_delta: {},
|
|
||||||
})
|
})
|
||||||
children[key] = child
|
children[key] = child
|
||||||
disposers.set(key, dispose)
|
disposers.set(key, dispose)
|
||||||
mcpToggles.set(key, setMcpEnabled)
|
|
||||||
activationToggles.set(key, setInstanceQueriesEnabled)
|
activationToggles.set(key, setInstanceQueriesEnabled)
|
||||||
|
|
||||||
const onPersistedInit = (init: Promise<string> | string | null, run: () => void) => {
|
const onPersistedInit = (init: Promise<string> | string | null, run: () => void) => {
|
||||||
@@ -338,14 +321,11 @@ export function createChildStoreManager(input: {
|
|||||||
function enableMcp(directory: string, key: DirectoryKey, childStore: [Store<State>, SetStoreFunction<State>]) {
|
function enableMcp(directory: string, key: DirectoryKey, childStore: [Store<State>, SetStoreFunction<State>]) {
|
||||||
if (mcpDirectories.has(key)) return
|
if (mcpDirectories.has(key)) return
|
||||||
mcpDirectories.add(key)
|
mcpDirectories.add(key)
|
||||||
mcpToggles.get(key)?.(true)
|
|
||||||
if (childStore[0].status !== "loading") input.onMcp(directory, childStore[1])
|
if (childStore[0].status !== "loading") input.onMcp(directory, childStore[1])
|
||||||
}
|
}
|
||||||
|
|
||||||
// Passive Home/project metadata reads must not initialize the directory.
|
// Passive project metadata reads must not initialize the directory.
|
||||||
// A real directory access enables these queries once for the store lifetime.
|
// A real directory access enables these queries once for the store lifetime.
|
||||||
// TODO(v2): After Home switches to v2.project.list and root-filtered,
|
|
||||||
// updated-time v2.session.list, remove any Home-only passive child creation.
|
|
||||||
function activate(key: DirectoryKey) {
|
function activate(key: DirectoryKey) {
|
||||||
if (activeDirectories.has(key)) return
|
if (activeDirectories.has(key)) return
|
||||||
activeDirectories.add(key)
|
activeDirectories.add(key)
|
||||||
@@ -355,7 +335,6 @@ export function createChildStoreManager(input: {
|
|||||||
function disableMcp(directory: string) {
|
function disableMcp(directory: string) {
|
||||||
const key = directoryKey(directory)
|
const key = directoryKey(directory)
|
||||||
if (!mcpDirectories.delete(key)) return
|
if (!mcpDirectories.delete(key)) return
|
||||||
mcpToggles.get(key)?.(false)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function projectMeta(directory: string, patch: ProjectMeta) {
|
function projectMeta(directory: string, patch: ProjectMeta) {
|
||||||
|
|||||||
@@ -1,566 +1,61 @@
|
|||||||
import { describe, expect, test } from "bun:test"
|
import { describe, expect, test } from "bun:test"
|
||||||
import type { Message, Part, Project } from "@/types"
|
|
||||||
import type { PermissionRequest, SessionInfo } from "@opencode-ai/client/promise"
|
|
||||||
import { createStore } from "solid-js/store"
|
import { createStore } from "solid-js/store"
|
||||||
|
import type { Project } from "@/types"
|
||||||
import type { State } from "./types"
|
import type { State } from "./types"
|
||||||
import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./event-reducer"
|
import { applyDirectoryEvent, applyGlobalEvent } from "./event-reducer"
|
||||||
|
|
||||||
const rootSession = (input: { id: string; parentID?: string; archived?: number }) =>
|
|
||||||
({
|
|
||||||
id: input.id,
|
|
||||||
parentID: input.parentID,
|
|
||||||
time: {
|
|
||||||
created: 1,
|
|
||||||
updated: 1,
|
|
||||||
archived: input.archived,
|
|
||||||
},
|
|
||||||
}) as SessionInfo
|
|
||||||
|
|
||||||
const userMessage = (id: string, sessionID: string, created = 1) =>
|
|
||||||
({
|
|
||||||
id,
|
|
||||||
sessionID,
|
|
||||||
role: "user",
|
|
||||||
time: { created },
|
|
||||||
agent: "assistant",
|
|
||||||
model: { providerID: "openai", modelID: "gpt" },
|
|
||||||
}) as Message
|
|
||||||
|
|
||||||
const textPart = (id: string, sessionID: string, messageID: string) =>
|
|
||||||
({
|
|
||||||
id,
|
|
||||||
sessionID,
|
|
||||||
messageID,
|
|
||||||
type: "text",
|
|
||||||
text: id,
|
|
||||||
}) as Part
|
|
||||||
|
|
||||||
const permissionRequest = (id: string, sessionID: string, title = id) =>
|
|
||||||
({
|
|
||||||
id,
|
|
||||||
sessionID,
|
|
||||||
action: title,
|
|
||||||
resources: ["*"],
|
|
||||||
metadata: {},
|
|
||||||
save: [],
|
|
||||||
}) as PermissionRequest
|
|
||||||
|
|
||||||
const baseState = (input: Partial<State> = {}) =>
|
|
||||||
({
|
|
||||||
status: "complete",
|
|
||||||
agent: [],
|
|
||||||
command: [],
|
|
||||||
project: "",
|
|
||||||
projectMeta: undefined,
|
|
||||||
icon: undefined,
|
|
||||||
provider: {} as State["provider"],
|
|
||||||
config: {} as State["config"],
|
|
||||||
path: { directory: "/tmp" } as State["path"],
|
|
||||||
session: [],
|
|
||||||
sessionTotal: 0,
|
|
||||||
session_status: {},
|
|
||||||
session_diff: {},
|
|
||||||
todo: {},
|
|
||||||
permission: {},
|
|
||||||
mcp: {},
|
|
||||||
lsp: [],
|
|
||||||
vcs: undefined,
|
|
||||||
limit: 10,
|
|
||||||
message: {},
|
|
||||||
session_message: {},
|
|
||||||
part: {},
|
|
||||||
part_text_accum_delta: {},
|
|
||||||
...input,
|
|
||||||
}) as State
|
|
||||||
|
|
||||||
describe("applyGlobalEvent", () => {
|
describe("applyGlobalEvent", () => {
|
||||||
test("upserts project.updated in sorted position", () => {
|
test("upserts project.updated in sorted position", () => {
|
||||||
const project = [{ id: "a" }, { id: "c" }] as Project[]
|
const projects = [{ id: "b", worktree: "/b" }] as Project[]
|
||||||
let refreshCount = 0
|
let next = projects
|
||||||
applyGlobalEvent({
|
applyGlobalEvent({
|
||||||
event: { type: "project.updated", properties: { id: "b" } },
|
event: { type: "project.updated", properties: { id: "a", worktree: "/a" } },
|
||||||
project,
|
project: projects,
|
||||||
refresh: () => {
|
setGlobalProject: (value) => {
|
||||||
refreshCount += 1
|
next = typeof value === "function" ? value(next) : value
|
||||||
},
|
|
||||||
setGlobalProject(next) {
|
|
||||||
if (typeof next === "function") next(project)
|
|
||||||
},
|
},
|
||||||
|
refresh() {},
|
||||||
})
|
})
|
||||||
|
expect(next.map((project) => project.id)).toEqual(["a", "b"])
|
||||||
expect(project.map((x) => x.id)).toEqual(["a", "b", "c"])
|
|
||||||
expect(refreshCount).toBe(0)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test("handles global.disposed by triggering refresh", () => {
|
test("refreshes on global disposal", () => {
|
||||||
let refreshCount = 0
|
let refreshed = false
|
||||||
applyGlobalEvent({
|
applyGlobalEvent({
|
||||||
event: { type: "global.disposed" },
|
event: { type: "global.disposed" },
|
||||||
project: [],
|
project: [],
|
||||||
refresh: () => {
|
|
||||||
refreshCount += 1
|
|
||||||
},
|
|
||||||
setGlobalProject() {},
|
setGlobalProject() {},
|
||||||
|
refresh: () => (refreshed = true),
|
||||||
})
|
})
|
||||||
|
expect(refreshed).toBe(true)
|
||||||
expect(refreshCount).toBe(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
test("leaves server.connected refresh to the connection sync", () => {
|
|
||||||
let refreshCount = 0
|
|
||||||
applyGlobalEvent({
|
|
||||||
event: { type: "server.connected" },
|
|
||||||
project: [],
|
|
||||||
refresh: () => {
|
|
||||||
refreshCount += 1
|
|
||||||
},
|
|
||||||
setGlobalProject() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(refreshCount).toBe(0)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe("applyDirectoryEvent", () => {
|
describe("applyDirectoryEvent", () => {
|
||||||
test("initializes text delta accumulation from the current part text", () => {
|
test("updates vcs and routes refresh events", () => {
|
||||||
const part = { ...textPart("part", "session", "message"), text: "existing" }
|
const [store, setStore] = createStore({ vcs: { branch: "old" } } as State)
|
||||||
const [store, setStore] = createStore(baseState({ part: { message: [part] } }))
|
const pushed: string[] = []
|
||||||
|
let lsp = 0
|
||||||
applyDirectoryEvent({
|
let references = 0
|
||||||
event: {
|
const apply = (type: string, properties?: unknown) =>
|
||||||
type: "message.part.delta",
|
|
||||||
properties: { messageID: "message", partID: "part", field: "text", delta: " appended" },
|
|
||||||
},
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.part_text_accum_delta.part).toBe("existing appended")
|
|
||||||
expect((store.part.message?.[0] as { text: string }).text).toBe("existing appended")
|
|
||||||
})
|
|
||||||
|
|
||||||
test("preserves a Home-specific retained session limit", () => {
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
limit: 1,
|
|
||||||
session: [rootSession({ id: "a" }), rootSession({ id: "b" }), rootSession({ id: "c" })],
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "session.created", properties: { info: rootSession({ id: "d" }) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
retainedLimit: 3,
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.session).toHaveLength(3)
|
|
||||||
})
|
|
||||||
|
|
||||||
test("inserts root sessions in sorted order and updates sessionTotal", () => {
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
session: [rootSession({ id: "b" })],
|
|
||||||
sessionTotal: 1,
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "session.created", properties: { info: rootSession({ id: "a" }) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.session.map((x) => x.id)).toEqual(["a", "b"])
|
|
||||||
expect(store.sessionTotal).toBe(2)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "session.created", properties: { info: rootSession({ id: "c", parentID: "a" }) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.sessionTotal).toBe(2)
|
|
||||||
})
|
|
||||||
|
|
||||||
test("cleans session caches when archived", () => {
|
|
||||||
const message = userMessage("msg_1", "ses_1")
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
session: [rootSession({ id: "ses_1" }), rootSession({ id: "ses_2" })],
|
|
||||||
sessionTotal: 2,
|
|
||||||
message: { ses_1: [message] },
|
|
||||||
part: { [message.id]: [textPart("prt_1", "ses_1", message.id)] },
|
|
||||||
session_diff: { ses_1: [] },
|
|
||||||
todo: { ses_1: [] },
|
|
||||||
permission: { ses_1: [] },
|
|
||||||
session_status: { ses_1: { type: "busy" } },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "session.updated", properties: { info: rootSession({ id: "ses_1", archived: 10 }) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.session.map((x) => x.id)).toEqual(["ses_2"])
|
|
||||||
expect(store.sessionTotal).toBe(1)
|
|
||||||
expect(store.message.ses_1).toBeUndefined()
|
|
||||||
expect(store.part[message.id]).toBeUndefined()
|
|
||||||
expect(store.session_diff.ses_1).toBeUndefined()
|
|
||||||
expect(store.todo.ses_1).toBeUndefined()
|
|
||||||
expect(store.permission.ses_1).toBeUndefined()
|
|
||||||
expect(store.session_status.ses_1).toBeUndefined()
|
|
||||||
})
|
|
||||||
|
|
||||||
test("ignores an archived session absent from a passive directory store", () => {
|
|
||||||
const [store, setStore] = createStore(baseState({ session: [], sessionTotal: 0 }))
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "session.updated", properties: { info: rootSession({ id: "missing", archived: 10 }) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.session).toEqual([])
|
|
||||||
expect(store.sessionTotal).toBe(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
test("cleans session caches when deleted and decrements only root totals", () => {
|
|
||||||
const cases = [
|
|
||||||
{ info: rootSession({ id: "ses_1" }), expectedTotal: 1, current: false },
|
|
||||||
{ info: rootSession({ id: "ses_2", parentID: "ses_1" }), expectedTotal: 2, current: true },
|
|
||||||
]
|
|
||||||
|
|
||||||
for (const item of cases) {
|
|
||||||
const message = userMessage("msg_1", item.info.id)
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
session: [
|
|
||||||
rootSession({ id: "ses_1" }),
|
|
||||||
rootSession({ id: "ses_2", parentID: "ses_1" }),
|
|
||||||
rootSession({ id: "ses_3" }),
|
|
||||||
],
|
|
||||||
sessionTotal: 2,
|
|
||||||
message: { [item.info.id]: [message] },
|
|
||||||
part: { [message.id]: [textPart("prt_1", item.info.id, message.id)] },
|
|
||||||
session_diff: { [item.info.id]: [] },
|
|
||||||
todo: { [item.info.id]: [] },
|
|
||||||
permission: { [item.info.id]: [] },
|
|
||||||
session_status: { [item.info.id]: { type: "busy" } },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
applyDirectoryEvent({
|
||||||
event: {
|
event: { type, properties },
|
||||||
type: "session.deleted",
|
|
||||||
properties: item.current ? { sessionID: item.info.id } : { info: item.info },
|
|
||||||
},
|
|
||||||
store,
|
store,
|
||||||
setStore,
|
setStore,
|
||||||
push() {},
|
directory: "/repo",
|
||||||
directory: "/tmp",
|
push: (directory) => pushed.push(directory),
|
||||||
loadLsp() {},
|
loadLsp: () => lsp++,
|
||||||
|
loadReferences: () => references++,
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(store.session.find((x) => x.id === item.info.id)).toBeUndefined()
|
apply("vcs.branch.updated", { branch: "main" })
|
||||||
expect(store.sessionTotal).toBe(item.expectedTotal)
|
apply("server.instance.disposed")
|
||||||
expect(store.message[item.info.id]).toBeUndefined()
|
apply("lsp.updated")
|
||||||
expect(store.part[message.id]).toBeUndefined()
|
apply("reference.updated")
|
||||||
expect(store.session_diff[item.info.id]).toBeUndefined()
|
|
||||||
expect(store.todo[item.info.id]).toBeUndefined()
|
|
||||||
expect(store.permission[item.info.id]).toBeUndefined()
|
|
||||||
expect(store.session_status[item.info.id]).toBeUndefined()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
test("cleans caches for trimmed sessions on session.created", () => {
|
expect(store.vcs?.branch).toBe("main")
|
||||||
const dropped = rootSession({ id: "ses_b" })
|
expect(pushed).toEqual(["/repo"])
|
||||||
const kept = rootSession({ id: "ses_a" })
|
expect(lsp).toBe(1)
|
||||||
const message = userMessage("msg_1", dropped.id)
|
expect(references).toBe(1)
|
||||||
const todos: string[] = []
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
limit: 1,
|
|
||||||
session: [dropped],
|
|
||||||
message: { [dropped.id]: [message] },
|
|
||||||
part: { [message.id]: [textPart("prt_1", dropped.id, message.id)] },
|
|
||||||
session_diff: { [dropped.id]: [] },
|
|
||||||
todo: { [dropped.id]: [] },
|
|
||||||
permission: { [dropped.id]: [] },
|
|
||||||
session_status: { [dropped.id]: { type: "busy" } },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "session.created", properties: { info: kept } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
setSessionTodo(sessionID, value) {
|
|
||||||
if (value !== undefined) return
|
|
||||||
todos.push(sessionID)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.session.map((x) => x.id)).toEqual([kept.id])
|
|
||||||
expect(store.message[dropped.id]).toBeUndefined()
|
|
||||||
expect(store.part[message.id]).toBeUndefined()
|
|
||||||
expect(store.session_diff[dropped.id]).toBeUndefined()
|
|
||||||
expect(store.todo[dropped.id]).toBeUndefined()
|
|
||||||
expect(store.permission[dropped.id]).toBeUndefined()
|
|
||||||
expect(store.session_status[dropped.id]).toBeUndefined()
|
|
||||||
expect(todos).toEqual([dropped.id])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("cleanupDroppedSessionCaches clears part-only orphan state", () => {
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
session: [rootSession({ id: "ses_keep" })],
|
|
||||||
part: { msg_1: [textPart("prt_1", "ses_drop", "msg_1")] },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
cleanupDroppedSessionCaches(store, setStore, store.session)
|
|
||||||
|
|
||||||
expect(store.part.msg_1).toBeUndefined()
|
|
||||||
})
|
|
||||||
|
|
||||||
test("upserts and removes messages while clearing orphaned parts", () => {
|
|
||||||
const sessionID = "ses_1"
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
message: { [sessionID]: [userMessage("msg_z", sessionID, 1), userMessage("msg_b", sessionID, 3)] },
|
|
||||||
part: { msg_a: [textPart("prt_1", sessionID, "msg_a")] },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "message.updated", properties: { info: userMessage("msg_a", sessionID, 2) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.message[sessionID]?.map((x) => x.id)).toEqual(["msg_z", "msg_a", "msg_b"])
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: {
|
|
||||||
type: "message.updated",
|
|
||||||
properties: {
|
|
||||||
info: {
|
|
||||||
...userMessage("msg_a", sessionID, 2),
|
|
||||||
role: "assistant",
|
|
||||||
} as Message,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.message[sessionID]?.find((x) => x.id === "msg_a")?.role).toBe("assistant")
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "message.removed", properties: { sessionID, messageID: "msg_a" } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.message[sessionID]?.map((x) => x.id)).toEqual(["msg_z", "msg_b"])
|
|
||||||
expect(store.part.msg_a).toBeUndefined()
|
|
||||||
})
|
|
||||||
|
|
||||||
test("upserts and prunes message parts", () => {
|
|
||||||
const sessionID = "ses_1"
|
|
||||||
const messageID = "msg_1"
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
part: { [messageID]: [textPart("prt_1", sessionID, messageID), textPart("prt_3", sessionID, messageID)] },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "message.part.updated", properties: { part: textPart("prt_2", sessionID, messageID) } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
expect(store.part[messageID]?.map((x) => x.id)).toEqual(["prt_1", "prt_2", "prt_3"])
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: {
|
|
||||||
type: "message.part.updated",
|
|
||||||
properties: {
|
|
||||||
part: {
|
|
||||||
...textPart("prt_2", sessionID, messageID),
|
|
||||||
text: "changed",
|
|
||||||
} as Part,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
const updated = store.part[messageID]?.find((x) => x.id === "prt_2")
|
|
||||||
expect(updated?.type).toBe("text")
|
|
||||||
if (updated?.type === "text") expect(updated.text).toBe("changed")
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "message.part.removed", properties: { messageID, partID: "prt_1" } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "message.part.removed", properties: { messageID, partID: "prt_2" } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "message.part.removed", properties: { messageID, partID: "prt_3" } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.part[messageID]).toBeUndefined()
|
|
||||||
})
|
|
||||||
|
|
||||||
test("tracks permission request lifecycles", () => {
|
|
||||||
const sessionID = "ses_1"
|
|
||||||
const [store, setStore] = createStore(
|
|
||||||
baseState({
|
|
||||||
permission: { [sessionID]: [permissionRequest("perm_1", sessionID), permissionRequest("perm_3", sessionID)] },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "permission.asked", properties: permissionRequest("perm_2", sessionID) },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
expect(store.permission[sessionID]?.map((x) => x.id)).toEqual(["perm_1", "perm_2", "perm_3"])
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "permission.asked", properties: permissionRequest("perm_2", sessionID, "updated") },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
expect(store.permission[sessionID]?.find((x) => x.id === "perm_2")?.action).toBe("updated")
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "permission.replied", properties: { sessionID, requestID: "perm_2" } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
})
|
|
||||||
expect(store.permission[sessionID]?.map((x) => x.id)).toEqual(["perm_1", "perm_3"])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("updates vcs branch in store and cache", () => {
|
|
||||||
const [store, setStore] = createStore(baseState({ vcs: { branch: "main", default_branch: "main" } }))
|
|
||||||
const [cacheStore, setCacheStore] = createStore({
|
|
||||||
value: { branch: "main", default_branch: "main" } as State["vcs"],
|
|
||||||
})
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "vcs.branch.updated", properties: { branch: "feature/test" } },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push() {},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {},
|
|
||||||
vcsCache: {
|
|
||||||
store: cacheStore,
|
|
||||||
setStore: setCacheStore,
|
|
||||||
ready: () => true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(store.vcs).toEqual({ branch: "feature/test", default_branch: "main" })
|
|
||||||
expect(cacheStore.value).toEqual({ branch: "feature/test", default_branch: "main" })
|
|
||||||
})
|
|
||||||
|
|
||||||
test("routes disposal and lsp events to side-effect handlers", () => {
|
|
||||||
const [store, setStore] = createStore(baseState())
|
|
||||||
const pushes: string[] = []
|
|
||||||
let lspLoads = 0
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "server.instance.disposed" },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push(directory) {
|
|
||||||
pushes.push(directory)
|
|
||||||
},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {
|
|
||||||
lspLoads += 1
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
applyDirectoryEvent({
|
|
||||||
event: { type: "lsp.updated" },
|
|
||||||
store,
|
|
||||||
setStore,
|
|
||||||
push(directory) {
|
|
||||||
pushes.push(directory)
|
|
||||||
},
|
|
||||||
directory: "/tmp",
|
|
||||||
loadLsp() {
|
|
||||||
lspLoads += 1
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(pushes).toEqual(["/tmp"])
|
|
||||||
expect(lspLoads).toBe(1)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,27 +1,7 @@
|
|||||||
import { Binary } from "@opencode-ai/core/util/binary"
|
import { Binary } from "@opencode-ai/core/util/binary"
|
||||||
import { Worktree } from "@opencode-ai/schema/worktree"
|
import { produce, type SetStoreFunction, type Store } from "solid-js/store"
|
||||||
import { produce, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
|
import type { Project } from "@/types"
|
||||||
import type { Message, Part, Project, Todo } from "@/types"
|
|
||||||
import type { FileDiffInfo, PermissionRequest, SessionInfo, SessionStatus } from "@opencode-ai/client/promise"
|
|
||||||
import type { State, VcsCache } from "./types"
|
import type { State, VcsCache } from "./types"
|
||||||
import { trimSessions } from "./session-trim"
|
|
||||||
import { dropSessionCaches } from "./session-cache"
|
|
||||||
import { diffs as list, message as clean } from "@/utils/diffs"
|
|
||||||
import { messageKey } from "@/utils/session-message"
|
|
||||||
|
|
||||||
const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
|
|
||||||
const SESSION_CONTENT_EVENTS = new Set([
|
|
||||||
"session.diff",
|
|
||||||
"todo.updated",
|
|
||||||
"session.status",
|
|
||||||
"message.updated",
|
|
||||||
"message.removed",
|
|
||||||
"message.part.updated",
|
|
||||||
"message.part.removed",
|
|
||||||
"message.part.delta",
|
|
||||||
"permission.asked",
|
|
||||||
"permission.replied",
|
|
||||||
])
|
|
||||||
|
|
||||||
export function applyGlobalEvent(input: {
|
export function applyGlobalEvent(input: {
|
||||||
event: { type: string; properties?: unknown }
|
event: { type: string; properties?: unknown }
|
||||||
@@ -35,7 +15,7 @@ export function applyGlobalEvent(input: {
|
|||||||
}
|
}
|
||||||
if (input.event.type !== "project.updated") return
|
if (input.event.type !== "project.updated") return
|
||||||
const properties = input.event.properties as Project
|
const properties = input.event.properties as Project
|
||||||
const result = Binary.search(input.project, properties.id, (s) => s.id)
|
const result = Binary.search(input.project, properties.id, (project) => project.id)
|
||||||
if (result.found) {
|
if (result.found) {
|
||||||
input.setGlobalProject(
|
input.setGlobalProject(
|
||||||
produce((draft) => {
|
produce((draft) => {
|
||||||
@@ -51,48 +31,6 @@ export function applyGlobalEvent(input: {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function cleanupSessionCaches(
|
|
||||||
setStore: SetStoreFunction<State>,
|
|
||||||
sessionID: string,
|
|
||||||
setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
|
|
||||||
) {
|
|
||||||
if (!sessionID) return
|
|
||||||
setSessionTodo?.(sessionID, undefined)
|
|
||||||
setStore(
|
|
||||||
produce((draft) => {
|
|
||||||
dropSessionCaches(draft, [sessionID])
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function cleanupDroppedSessionCaches(
|
|
||||||
store: Store<State>,
|
|
||||||
setStore: SetStoreFunction<State>,
|
|
||||||
next: SessionInfo[],
|
|
||||||
setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
|
|
||||||
) {
|
|
||||||
const keep = new Set(next.map((item) => item.id))
|
|
||||||
const stale = [
|
|
||||||
...Object.keys(store.message),
|
|
||||||
...Object.keys(store.session_diff),
|
|
||||||
...Object.keys(store.todo),
|
|
||||||
...Object.keys(store.permission),
|
|
||||||
...Object.keys(store.session_status),
|
|
||||||
...Object.values(store.part)
|
|
||||||
.map((parts) => parts?.find((part) => !!part?.sessionID)?.sessionID)
|
|
||||||
.filter((sessionID): sessionID is string => !!sessionID),
|
|
||||||
].filter((sessionID, index, list) => !keep.has(sessionID) && list.indexOf(sessionID) === index)
|
|
||||||
if (stale.length === 0) return
|
|
||||||
for (const sessionID of stale) {
|
|
||||||
setSessionTodo?.(sessionID, undefined)
|
|
||||||
}
|
|
||||||
setStore(
|
|
||||||
produce((draft) => {
|
|
||||||
dropSessionCaches(draft, stale)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function applyDirectoryEvent(input: {
|
export function applyDirectoryEvent(input: {
|
||||||
event: { type: string; properties?: unknown }
|
event: { type: string; properties?: unknown }
|
||||||
store: Store<State>
|
store: Store<State>
|
||||||
@@ -102,339 +40,24 @@ export function applyDirectoryEvent(input: {
|
|||||||
loadLsp: () => void
|
loadLsp: () => void
|
||||||
loadReferences?: () => void
|
loadReferences?: () => void
|
||||||
vcsCache?: VcsCache
|
vcsCache?: VcsCache
|
||||||
setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void
|
|
||||||
retainedLimit?: number
|
|
||||||
sessionContent?: boolean
|
|
||||||
permission?: State["permission"]
|
|
||||||
}) {
|
}) {
|
||||||
const event = input.event
|
switch (input.event.type) {
|
||||||
if (input.sessionContent === false && SESSION_CONTENT_EVENTS.has(event.type)) return
|
case "server.instance.disposed":
|
||||||
const limit = Math.max(input.store.limit, input.retainedLimit ?? 0)
|
|
||||||
switch (event.type) {
|
|
||||||
case "server.instance.disposed": {
|
|
||||||
input.push(input.directory)
|
input.push(input.directory)
|
||||||
return
|
|
||||||
}
|
|
||||||
case "session.created": {
|
|
||||||
const info = (event.properties as { info: SessionInfo }).info
|
|
||||||
const result = Binary.search(input.store.session, info.id, (s) => s.id)
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore("session", result.index, reconcile(info))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const next = input.store.session.slice()
|
|
||||||
next.splice(result.index, 0, info)
|
|
||||||
const trimmed = trimSessions(next, { limit, permission: input.permission ?? input.store.permission })
|
|
||||||
input.setStore("session", reconcile(trimmed, { key: "id" }))
|
|
||||||
cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
|
|
||||||
if (!info.parentID) input.setStore("sessionTotal", (value) => value + 1)
|
|
||||||
break
|
break
|
||||||
}
|
|
||||||
case "session.updated": {
|
|
||||||
const info = (event.properties as { info: SessionInfo }).info
|
|
||||||
const result = Binary.search(input.store.session, info.id, (s) => s.id)
|
|
||||||
if (info.time.archived) {
|
|
||||||
if (!result.found) break
|
|
||||||
if (input.store.session[result.index]!.time.archived === info.time.archived) break
|
|
||||||
input.setStore(
|
|
||||||
"session",
|
|
||||||
produce((draft) => {
|
|
||||||
draft.splice(result.index, 1)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
cleanupSessionCaches(input.setStore, info.id, input.setSessionTodo)
|
|
||||||
if (info.parentID) break
|
|
||||||
input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore("session", result.index, reconcile(info))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const next = input.store.session.slice()
|
|
||||||
next.splice(result.index, 0, info)
|
|
||||||
const trimmed = trimSessions(next, { limit, permission: input.permission ?? input.store.permission })
|
|
||||||
input.setStore("session", reconcile(trimmed, { key: "id" }))
|
|
||||||
cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "session.deleted": {
|
|
||||||
const properties = event.properties as { sessionID?: string; info?: SessionInfo }
|
|
||||||
const sessionID = properties.info?.id ?? properties.sessionID
|
|
||||||
if (!sessionID) break
|
|
||||||
const result = Binary.search(input.store.session, sessionID, (s) => s.id)
|
|
||||||
const info = properties.info ?? (result.found ? input.store.session[result.index] : undefined)
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore(
|
|
||||||
"session",
|
|
||||||
produce((draft) => {
|
|
||||||
draft.splice(result.index, 1)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
cleanupSessionCaches(input.setStore, sessionID, input.setSessionTodo)
|
|
||||||
if (info?.parentID) break
|
|
||||||
input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "worktree.resolved": {
|
|
||||||
const properties = event.properties as { projectID: string; directory: string; previous: string }
|
|
||||||
input.store.session.forEach((session, index) => {
|
|
||||||
const adopted = Worktree.adopt(
|
|
||||||
{ projectID: session.projectID, directory: session.location.directory },
|
|
||||||
properties,
|
|
||||||
)
|
|
||||||
if (!adopted) return
|
|
||||||
input.setStore("session", index, (current) => ({ ...current, ...adopted }))
|
|
||||||
})
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "session.renamed": {
|
|
||||||
const properties = event.properties as { sessionID: string; title: string }
|
|
||||||
const result = Binary.search(input.store.session, properties.sessionID, (session) => session.id)
|
|
||||||
if (!result.found) break
|
|
||||||
input.setStore("session", result.index, (session) => ({
|
|
||||||
...session,
|
|
||||||
title: properties.title,
|
|
||||||
time: { ...session.time, updated: Date.now() },
|
|
||||||
}))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "session.usage.updated": {
|
|
||||||
const properties = event.properties as Pick<SessionInfo, "cost" | "tokens"> & { sessionID: string }
|
|
||||||
const result = Binary.search(input.store.session, properties.sessionID, (session) => session.id)
|
|
||||||
if (!result.found) break
|
|
||||||
input.setStore("session", result.index, (session) => ({
|
|
||||||
...session,
|
|
||||||
cost: properties.cost,
|
|
||||||
tokens: properties.tokens,
|
|
||||||
}))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
// case "session.archived": {
|
|
||||||
// const properties = event.properties as { sessionID: string }
|
|
||||||
// const result = Binary.search(input.store.session, properties.sessionID, (session) => session.id)
|
|
||||||
// if (!result.found) break
|
|
||||||
// const info = input.store.session[result.index]
|
|
||||||
// input.setStore(
|
|
||||||
// "session",
|
|
||||||
// produce((draft) => void draft.splice(result.index, 1)),
|
|
||||||
// )
|
|
||||||
// cleanupSessionCaches(input.setStore, properties.sessionID)
|
|
||||||
// if (!info?.parentID) input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
|
|
||||||
// break
|
|
||||||
// }
|
|
||||||
case "session.moved": {
|
|
||||||
const properties = event.properties as {
|
|
||||||
sessionID: string
|
|
||||||
location: { directory: string; workspaceID?: string }
|
|
||||||
projectID?: string
|
|
||||||
subpath?: string
|
|
||||||
}
|
|
||||||
const result = Binary.search(input.store.session, properties.sessionID, (session) => session.id)
|
|
||||||
if (!result.found) break
|
|
||||||
if (properties.location.directory === input.directory) {
|
|
||||||
input.setStore("session", result.index, (session) => ({
|
|
||||||
...session,
|
|
||||||
projectID: properties.projectID ?? session.projectID,
|
|
||||||
location: properties.location,
|
|
||||||
subpath: properties.subpath,
|
|
||||||
time: { ...session.time, updated: Date.now() },
|
|
||||||
}))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const info = input.store.session[result.index]
|
|
||||||
input.setStore(
|
|
||||||
"session",
|
|
||||||
produce((draft) => void draft.splice(result.index, 1)),
|
|
||||||
)
|
|
||||||
if (!info?.parentID) input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "session.diff": {
|
|
||||||
const props = event.properties as { sessionID: string; diff: FileDiffInfo[] }
|
|
||||||
input.setStore("session_diff", props.sessionID, reconcile(list(props.diff) as FileDiffInfo[], { key: "file" }))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "todo.updated": {
|
|
||||||
const props = event.properties as { sessionID: string; todos: Todo[] }
|
|
||||||
input.setStore("todo", props.sessionID, reconcile(props.todos, { key: "id" }))
|
|
||||||
input.setSessionTodo?.(props.sessionID, props.todos)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "session.status": {
|
|
||||||
const props = event.properties as { sessionID: string; status: SessionStatus }
|
|
||||||
input.setStore("session_status", props.sessionID, reconcile(props.status))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "message.updated": {
|
|
||||||
const info = clean((event.properties as { info: Message }).info)
|
|
||||||
const messages = input.store.message[info.sessionID]
|
|
||||||
if (!messages) {
|
|
||||||
input.setStore("message", info.sessionID, [info])
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const result = Binary.search(messages, messageKey(info), messageKey)
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore("message", info.sessionID, result.index, reconcile(info))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
input.setStore(
|
|
||||||
"message",
|
|
||||||
info.sessionID,
|
|
||||||
produce((draft) => {
|
|
||||||
draft.splice(result.index, 0, info)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "message.removed": {
|
|
||||||
const props = event.properties as { sessionID: string; messageID: string }
|
|
||||||
input.setStore(
|
|
||||||
produce((draft) => {
|
|
||||||
const messages = draft.message[props.sessionID]
|
|
||||||
if (messages) {
|
|
||||||
const index = messages.findIndex((message) => message.id === props.messageID)
|
|
||||||
if (index >= 0) messages.splice(index, 1)
|
|
||||||
}
|
|
||||||
const parts = draft.part[props.messageID]
|
|
||||||
if (parts) {
|
|
||||||
for (const part of parts) {
|
|
||||||
delete draft.part_text_accum_delta[part.id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
delete draft.part[props.messageID]
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "message.part.updated": {
|
|
||||||
const part = (event.properties as { part: Part }).part
|
|
||||||
if (SKIP_PARTS.has(part.type)) break
|
|
||||||
input.setStore(
|
|
||||||
produce((draft) => {
|
|
||||||
delete draft.part_text_accum_delta[part.id]
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
const parts = input.store.part[part.messageID]
|
|
||||||
if (!parts) {
|
|
||||||
input.setStore("part", part.messageID, [part])
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const result = Binary.search(parts, part.id, (item) => item.id)
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore("part", part.messageID, result.index, reconcile(part))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
input.setStore(
|
|
||||||
"part",
|
|
||||||
part.messageID,
|
|
||||||
produce((draft) => {
|
|
||||||
draft.splice(result.index, 0, part)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "message.part.removed": {
|
|
||||||
const props = event.properties as { messageID: string; partID: string }
|
|
||||||
input.setStore(
|
|
||||||
produce((draft) => {
|
|
||||||
delete draft.part_text_accum_delta[props.partID]
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
const parts = input.store.part[props.messageID]
|
|
||||||
if (!parts) break
|
|
||||||
const result = Binary.search(parts, props.partID, (part) => part.id)
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore(
|
|
||||||
produce((draft) => {
|
|
||||||
const list = draft.part[props.messageID]
|
|
||||||
if (!list) return
|
|
||||||
const next = Binary.search(list, props.partID, (part) => part.id)
|
|
||||||
if (!next.found) return
|
|
||||||
list.splice(next.index, 1)
|
|
||||||
if (list.length === 0) delete draft.part[props.messageID]
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "message.part.delta": {
|
|
||||||
const props = event.properties as { messageID: string; partID: string; field: string; delta: string }
|
|
||||||
const parts = input.store.part[props.messageID]
|
|
||||||
if (!parts) break
|
|
||||||
const result = Binary.search(parts, props.partID, (part) => part.id)
|
|
||||||
if (!result.found) break
|
|
||||||
const field = props.field as keyof (typeof parts)[number]
|
|
||||||
const current = parts[result.index]?.[field]
|
|
||||||
input.setStore(
|
|
||||||
"part_text_accum_delta",
|
|
||||||
props.partID,
|
|
||||||
(existing) => (existing ?? (typeof current === "string" ? current : "")) + props.delta,
|
|
||||||
)
|
|
||||||
input.setStore(
|
|
||||||
"part",
|
|
||||||
props.messageID,
|
|
||||||
produce((draft) => {
|
|
||||||
const part = draft[result.index]
|
|
||||||
const field = props.field as keyof typeof part
|
|
||||||
const existing = part[field] as string | undefined
|
|
||||||
;(part[field] as string) = (existing ?? "") + props.delta
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "vcs.branch.updated": {
|
case "vcs.branch.updated": {
|
||||||
const props = event.properties as { branch?: string }
|
const properties = input.event.properties as { branch?: string }
|
||||||
if (input.store.vcs?.branch === props.branch) break
|
if (input.store.vcs?.branch === properties.branch) break
|
||||||
const next = { ...input.store.vcs, branch: props.branch }
|
const next = { ...input.store.vcs, branch: properties.branch }
|
||||||
input.setStore("vcs", next)
|
input.setStore("vcs", next)
|
||||||
if (input.vcsCache) input.vcsCache.setStore("value", next)
|
input.vcsCache?.setStore("value", next)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case "permission.asked": {
|
case "lsp.updated":
|
||||||
const permission = event.properties as PermissionRequest
|
|
||||||
const permissions = input.store.permission[permission.sessionID]
|
|
||||||
if (!permissions) {
|
|
||||||
input.setStore("permission", permission.sessionID, [permission])
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const result = Binary.search(permissions, permission.id, (p) => p.id)
|
|
||||||
if (result.found) {
|
|
||||||
input.setStore("permission", permission.sessionID, result.index, reconcile(permission))
|
|
||||||
break
|
|
||||||
}
|
|
||||||
input.setStore(
|
|
||||||
"permission",
|
|
||||||
permission.sessionID,
|
|
||||||
produce((draft) => {
|
|
||||||
draft.splice(result.index, 0, permission)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "permission.replied": {
|
|
||||||
const props = event.properties as { sessionID: string; requestID: string }
|
|
||||||
const permissions = input.store.permission[props.sessionID]
|
|
||||||
if (!permissions) break
|
|
||||||
const result = Binary.search(permissions, props.requestID, (p) => p.id)
|
|
||||||
if (!result.found) break
|
|
||||||
input.setStore(
|
|
||||||
"permission",
|
|
||||||
props.sessionID,
|
|
||||||
produce((draft) => {
|
|
||||||
draft.splice(result.index, 1)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "lsp.updated": {
|
|
||||||
input.loadLsp()
|
input.loadLsp()
|
||||||
break
|
break
|
||||||
}
|
case "reference.updated":
|
||||||
case "reference.updated": {
|
|
||||||
input.loadReferences?.()
|
input.loadReferences?.()
|
||||||
break
|
break
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,146 +1,53 @@
|
|||||||
import { describe, expect, test } from "bun:test"
|
import { describe, expect, test } from "bun:test"
|
||||||
import type { SessionInfo } from "@opencode-ai/client/promise"
|
import type { SessionInfo } from "@opencode-ai/client/promise"
|
||||||
import {
|
import {
|
||||||
applyHomeSessionEvent,
|
|
||||||
appendHomeSessionEvent,
|
|
||||||
HOME_V2_SESSION_PAGE_LIMIT,
|
HOME_V2_SESSION_PAGE_LIMIT,
|
||||||
loadHomeSessionIndex,
|
loadHomeSessionIndex,
|
||||||
homeSessionIndexSessions,
|
|
||||||
homeSessionIndexRefresh,
|
|
||||||
parseHomeSessionIndex,
|
parseHomeSessionIndex,
|
||||||
retainHomeSessions,
|
retainHomeSessions,
|
||||||
} from "./home-session-index"
|
} from "./home-session-index"
|
||||||
|
|
||||||
const session = (input: {
|
const session = (id: string, input: Partial<SessionInfo> = {}) =>
|
||||||
id: string
|
({
|
||||||
directory?: string
|
id,
|
||||||
parentID?: string
|
projectID: "project",
|
||||||
archived?: number
|
title: id,
|
||||||
updated?: number
|
time: { created: 1, updated: 1 },
|
||||||
}) => ({
|
location: { directory: "/repo" },
|
||||||
id: input.id,
|
...input,
|
||||||
parentID: input.parentID,
|
}) as SessionInfo
|
||||||
projectID: "project",
|
|
||||||
cost: 0,
|
|
||||||
tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
|
|
||||||
time: { created: 1, updated: input.updated ?? 1, archived: input.archived },
|
|
||||||
title: input.id,
|
|
||||||
location: { directory: input.directory ?? "/project" },
|
|
||||||
})
|
|
||||||
|
|
||||||
describe("Home V2 session index", () => {
|
describe("Home V2 session index", () => {
|
||||||
test("loads the Home index with one global V2 request", async () => {
|
test("loads all pages", async () => {
|
||||||
const calls: unknown[] = []
|
const first = Array.from({ length: HOME_V2_SESSION_PAGE_LIMIT }, (_, index) => session(`session-${index}`))
|
||||||
|
const calls: Array<{ cursor?: string }> = []
|
||||||
const result = await loadHomeSessionIndex(async (input) => {
|
const result = await loadHomeSessionIndex(async (input) => {
|
||||||
calls.push(input)
|
calls.push(input)
|
||||||
return { data: [session({ id: "root" })], cursor: {} }
|
if (!input.cursor) return { data: first, cursor: { next: "next" } }
|
||||||
|
return { data: [session("last")], cursor: {} }
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(result.sessions).toHaveLength(1)
|
expect(result).toHaveLength(HOME_V2_SESSION_PAGE_LIMIT + 1)
|
||||||
expect(calls).toEqual([{ limit: HOME_V2_SESSION_PAGE_LIMIT, order: "desc" }])
|
expect(calls.map((call) => call.cursor)).toEqual([undefined, "next"])
|
||||||
})
|
})
|
||||||
|
|
||||||
test("loads subsequent pages until the session index is complete", async () => {
|
test("keeps only visible roots", () => {
|
||||||
const calls: unknown[] = []
|
|
||||||
const controller = new AbortController()
|
|
||||||
const result = await loadHomeSessionIndex(
|
|
||||||
async (input, options) => {
|
|
||||||
calls.push({ input, signal: options.signal })
|
|
||||||
if (!("cursor" in input)) {
|
|
||||||
return {
|
|
||||||
data: Array.from({ length: HOME_V2_SESSION_PAGE_LIMIT }, (_, index) => session({ id: `page-1-${index}` })),
|
|
||||||
cursor: { next: "next-page" },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { data: [session({ id: "page-2" })], cursor: {} }
|
|
||||||
},
|
|
||||||
0,
|
|
||||||
controller.signal,
|
|
||||||
)
|
|
||||||
|
|
||||||
expect(result.sessions).toHaveLength(HOME_V2_SESSION_PAGE_LIMIT + 1)
|
|
||||||
expect(calls).toEqual([
|
|
||||||
{ input: { limit: HOME_V2_SESSION_PAGE_LIMIT, order: "desc" }, signal: controller.signal },
|
|
||||||
{
|
|
||||||
input: { limit: HOME_V2_SESSION_PAGE_LIMIT, order: "desc", cursor: "next-page" },
|
|
||||||
signal: controller.signal,
|
|
||||||
},
|
|
||||||
])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("maps visible roots to Home session summaries", () => {
|
|
||||||
const activeNull = {
|
|
||||||
...session({ id: "active-null", updated: 20 }),
|
|
||||||
time: { created: 1, updated: 20, archived: null },
|
|
||||||
} as unknown as SessionInfo
|
|
||||||
const result = parseHomeSessionIndex([
|
|
||||||
session({ id: "root", updated: 30 }),
|
|
||||||
activeNull,
|
|
||||||
session({ id: "child", parentID: "root", updated: 40 }),
|
|
||||||
session({ id: "archived", archived: 50, updated: 50 }),
|
|
||||||
])
|
|
||||||
|
|
||||||
expect(result).toEqual([
|
|
||||||
expect.objectContaining({
|
|
||||||
id: "root",
|
|
||||||
location: { directory: "/project" },
|
|
||||||
projectID: "project",
|
|
||||||
title: "root",
|
|
||||||
time: { created: 1, updated: 30 },
|
|
||||||
}),
|
|
||||||
expect.objectContaining({
|
|
||||||
id: "active-null",
|
|
||||||
time: { created: 1, updated: 20, archived: null },
|
|
||||||
}),
|
|
||||||
])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("preserves the per-directory Home retention limit", () => {
|
|
||||||
const now = 10 * 60 * 60 * 1000
|
|
||||||
const sessions = Array.from({ length: 80 }, (_, index) => ({
|
|
||||||
...parseHomeSessionIndex([session({ id: `session-${index}`, updated: index + 1 })])[0],
|
|
||||||
location: { directory: index % 2 === 0 ? "/one" : "/two" },
|
|
||||||
}))
|
|
||||||
|
|
||||||
const retained = retainHomeSessions(sessions, 10, now)
|
|
||||||
expect(retained.filter((item) => item.location.directory === "/one")).toHaveLength(10)
|
|
||||||
expect(retained.filter((item) => item.location.directory === "/two")).toHaveLength(10)
|
|
||||||
})
|
|
||||||
|
|
||||||
test("replays session events over the loaded index", () => {
|
|
||||||
const initial = parseHomeSessionIndex([session({ id: "old" })])
|
|
||||||
const created = { ...initial[0], id: "new", title: "new", time: { created: 2, updated: 2 } }
|
|
||||||
|
|
||||||
const afterCreate = applyHomeSessionEvent(initial, {
|
|
||||||
type: "session.created",
|
|
||||||
properties: { sessionID: created.id, info: created },
|
|
||||||
})
|
|
||||||
expect(
|
expect(
|
||||||
applyHomeSessionEvent(afterCreate, {
|
parseHomeSessionIndex([
|
||||||
type: "session.deleted",
|
session("root"),
|
||||||
properties: { sessionID: initial[0]!.id, info: initial[0]! },
|
session("child", { parentID: "root" }),
|
||||||
}),
|
session("archived", { time: { created: 1, updated: 1, archived: 2 } }),
|
||||||
).toEqual([created])
|
]).map((item) => item.id),
|
||||||
|
).toEqual(["root"])
|
||||||
})
|
})
|
||||||
|
|
||||||
test("applies only events newer than the index baseline", () => {
|
test("preserves the per-directory retention limit", () => {
|
||||||
const initial = parseHomeSessionIndex([session({ id: "old" })])
|
const now = Date.now()
|
||||||
const stale = { ...initial[0], title: "stale" }
|
const result = retainHomeSessions(
|
||||||
const current = { ...initial[0], title: "current" }
|
[session("a", { time: { created: 1, updated: 1 } }), session("b", { time: { created: 2, updated: 2 } })],
|
||||||
const first = appendHomeSessionEvent(undefined, {
|
1,
|
||||||
type: "session.updated",
|
now,
|
||||||
properties: { sessionID: stale.id, info: stale },
|
)
|
||||||
})
|
expect(result.map((item) => item.id)).toEqual(["b"])
|
||||||
const events = appendHomeSessionEvent(first, {
|
|
||||||
type: "session.updated",
|
|
||||||
properties: { sessionID: current.id, info: current },
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(homeSessionIndexSessions({ sessions: initial, eventSequence: 1 }, events)[0]?.title).toBe("current")
|
|
||||||
})
|
|
||||||
|
|
||||||
test("refetches after reconnect", () => {
|
|
||||||
expect(homeSessionIndexRefresh("server.connected", false)).toEqual({ connected: true, refetch: false })
|
|
||||||
expect(homeSessionIndexRefresh("server.connected", true)).toEqual({ connected: true, refetch: true })
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,33 +1,16 @@
|
|||||||
import type { Event } from "@/types"
|
|
||||||
import type { SessionInfo, SessionsResponse } from "@opencode-ai/client/promise"
|
import type { SessionInfo, SessionsResponse } from "@opencode-ai/client/promise"
|
||||||
import type { QueryClient } from "@tanstack/solid-query"
|
|
||||||
import { trimSessions } from "./session-trim"
|
|
||||||
import { pathKey } from "@/utils/path-key"
|
import { pathKey } from "@/utils/path-key"
|
||||||
|
import { SESSION_RECENT_LIMIT, SESSION_RECENT_WINDOW } from "./types"
|
||||||
|
|
||||||
export const HOME_V2_SESSION_PAGE_LIMIT = 5_000
|
export const HOME_V2_SESSION_PAGE_LIMIT = 5_000
|
||||||
|
|
||||||
export type HomeSessionEvent = {
|
|
||||||
type: "session.created" | "session.updated" | "session.deleted"
|
|
||||||
properties: { sessionID: string; info?: SessionInfo }
|
|
||||||
}
|
|
||||||
export type HomeSessionEvents = {
|
|
||||||
sequence: number
|
|
||||||
entries: Array<{ sequence: number; event: HomeSessionEvent }>
|
|
||||||
}
|
|
||||||
export type HomeSessionIndex = {
|
|
||||||
sessions: SessionInfo[]
|
|
||||||
eventSequence: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export const homeSessionIndexKey = (server: string) => ["home", "session-index", server] as const
|
export const homeSessionIndexKey = (server: string) => ["home", "session-index", server] as const
|
||||||
export const homeSessionEventsKey = (server: string) => ["home", "session-events", server] as const
|
|
||||||
|
|
||||||
export async function loadHomeSessionIndex(
|
export async function loadHomeSessionIndex(
|
||||||
list: (
|
list: (
|
||||||
input: { limit: number; order: "desc"; cursor?: string },
|
input: { limit: number; order: "desc"; cursor?: string },
|
||||||
options: { signal?: AbortSignal },
|
options: { signal?: AbortSignal },
|
||||||
) => Promise<SessionsResponse>,
|
) => Promise<SessionsResponse>,
|
||||||
eventSequence = 0,
|
|
||||||
signal?: AbortSignal,
|
signal?: AbortSignal,
|
||||||
) {
|
) {
|
||||||
const data: SessionInfo[] = []
|
const data: SessionInfo[] = []
|
||||||
@@ -42,115 +25,28 @@ export async function loadHomeSessionIndex(
|
|||||||
},
|
},
|
||||||
{ signal },
|
{ signal },
|
||||||
)
|
)
|
||||||
const page = response
|
data.push(...response.data)
|
||||||
data.push(...page.data)
|
if (response.data.length < HOME_V2_SESSION_PAGE_LIMIT || !response.cursor.next) return parseHomeSessionIndex(data)
|
||||||
if (page.data.length < HOME_V2_SESSION_PAGE_LIMIT || !page.cursor.next)
|
cursor = response.cursor.next
|
||||||
return { sessions: parseHomeSessionIndex(data), eventSequence }
|
|
||||||
cursor = page.cursor.next
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function appendHomeSessionEvent(current: HomeSessionEvents | undefined, event: HomeSessionEvent) {
|
// The V2 API cannot yet filter roots, archives, or several directories, so Home
|
||||||
const sequence = (current?.sequence ?? 0) + 1
|
// seeds createData from a full scan and derives its visible index there.
|
||||||
return {
|
export function parseHomeSessionIndex(sessions: SessionInfo[]) {
|
||||||
sequence,
|
return sessions.filter((session) => !session.parentID && typeof session.time.archived !== "number")
|
||||||
entries: [...(current?.entries ?? []), { sequence, event }],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function trimHomeSessionEvents(current: HomeSessionEvents | undefined, sequence: number): HomeSessionEvents {
|
|
||||||
return {
|
|
||||||
sequence: current?.sequence ?? sequence,
|
|
||||||
entries: (current?.entries ?? []).filter((entry) => entry.sequence > sequence),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function homeSessionIndexSessions(index: HomeSessionIndex | undefined, events: HomeSessionEvents | undefined) {
|
|
||||||
if (!index) return []
|
|
||||||
return (events?.entries ?? [])
|
|
||||||
.filter((entry) => entry.sequence > index.eventSequence)
|
|
||||||
.reduce((sessions, entry) => applyHomeSessionEvent(sessions, entry.event), index.sessions)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function homeSessionIndexRefresh(event: Event["type"], connected: boolean) {
|
|
||||||
if (event === "server.connected") return { connected: true, refetch: connected }
|
|
||||||
return { connected, refetch: false }
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createHomeSessionIndexCache(queryClient: QueryClient, server: string) {
|
|
||||||
const indexKey = homeSessionIndexKey(server)
|
|
||||||
const eventsKey = homeSessionEventsKey(server)
|
|
||||||
let connected = false
|
|
||||||
|
|
||||||
return {
|
|
||||||
indexKey,
|
|
||||||
eventsKey,
|
|
||||||
eventSequence() {
|
|
||||||
return queryClient.getQueryData<HomeSessionEvents>(eventsKey)?.sequence ?? 0
|
|
||||||
},
|
|
||||||
complete(sequence: number) {
|
|
||||||
// Keep events received after the fetch began so its response cannot overwrite them.
|
|
||||||
queryClient.setQueryData<HomeSessionEvents>(eventsKey, (current) => trimHomeSessionEvents(current, sequence))
|
|
||||||
},
|
|
||||||
sessions(index: HomeSessionIndex | undefined, events: HomeSessionEvents | undefined) {
|
|
||||||
return homeSessionIndexSessions(index, events)
|
|
||||||
},
|
|
||||||
apply(event: HomeSessionEvent) {
|
|
||||||
if (!queryClient.getQueryState(indexKey)) return
|
|
||||||
const next = appendHomeSessionEvent(queryClient.getQueryData<HomeSessionEvents>(eventsKey), event)
|
|
||||||
if (queryClient.isFetching({ queryKey: indexKey, exact: true }) > 0) {
|
|
||||||
queryClient.setQueryData(eventsKey, next)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const index = queryClient.getQueryData<HomeSessionIndex>(indexKey)
|
|
||||||
if (index) {
|
|
||||||
queryClient.setQueryData<HomeSessionIndex>(indexKey, {
|
|
||||||
sessions: homeSessionIndexSessions(index, next),
|
|
||||||
eventSequence: next.sequence,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
queryClient.setQueryData<HomeSessionEvents>(eventsKey, { sequence: next.sequence, entries: [] })
|
|
||||||
},
|
|
||||||
refresh(event: Event["type"]) {
|
|
||||||
const result = homeSessionIndexRefresh(event, connected)
|
|
||||||
connected = result.connected
|
|
||||||
if (!result.refetch) return
|
|
||||||
void queryClient.refetchQueries({ queryKey: indexKey, exact: true, type: "active" })
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO(v2): This deliberately dumb full-table scan is necessary because the
|
|
||||||
// current V2 API orders by creation time and cannot filter roots, archives, or
|
|
||||||
// multiple directories. A bounded page could omit an old session updated today.
|
|
||||||
// Once released, use client.v2.project.list() and client.v2.session.list({
|
|
||||||
// parentID: null, order: "desc" }) and replace this full-table scan.
|
|
||||||
export function parseHomeSessionIndex(sessions: SessionInfo[]): SessionInfo[] {
|
|
||||||
return sessions.flatMap((item) => {
|
|
||||||
if (item.parentID || typeof item.time.archived === "number") return []
|
|
||||||
return [item]
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function retainHomeSessions(sessions: SessionInfo[], limit: number, now: number) {
|
export function retainHomeSessions(sessions: SessionInfo[], limit: number, now: number) {
|
||||||
const grouped = Map.groupBy(sessions, (session) => pathKey(session.location.directory))
|
return [...Map.groupBy(sessions, (session) => pathKey(session.location.directory)).values()].flatMap((items) => {
|
||||||
return [...grouped.values()].flatMap((items) => trimSessions(items, { limit, permission: {}, now }))
|
const sorted = items.toSorted((a, b) => {
|
||||||
}
|
const updated = (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created)
|
||||||
|
return updated || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
|
||||||
export function applyHomeSessionEvent(sessions: SessionInfo[], event: HomeSessionEvent) {
|
})
|
||||||
const info = event.properties.info
|
const recent = sorted
|
||||||
const index = sessions.findIndex((session) => session.id === (info?.id ?? event.properties.sessionID))
|
.slice(limit)
|
||||||
if (event.type === "session.deleted") {
|
.filter((session) => (session.time.updated ?? session.time.created) > now - SESSION_RECENT_WINDOW)
|
||||||
if (index === -1) return sessions
|
.slice(0, SESSION_RECENT_LIMIT)
|
||||||
return sessions.toSpliced(index, 1)
|
return [...sorted.slice(0, limit), ...recent]
|
||||||
}
|
})
|
||||||
if (!info) return sessions
|
|
||||||
if (info.parentID || typeof info.time.archived === "number") {
|
|
||||||
if (index === -1) return sessions
|
|
||||||
return sessions.toSpliced(index, 1)
|
|
||||||
}
|
|
||||||
if (event.type !== "session.created" && event.type !== "session.updated") return sessions
|
|
||||||
if (index === -1) return [...sessions, info]
|
|
||||||
return sessions.with(index, info)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,105 +0,0 @@
|
|||||||
import { describe, expect, test } from "bun:test"
|
|
||||||
import type { Message, Part, Todo } from "@/types"
|
|
||||||
import type { FormInfo, PermissionRequest, SessionStatus } from "@opencode-ai/client/promise"
|
|
||||||
import type { FileDiffInfo } from "@opencode-ai/client/promise"
|
|
||||||
import { dropSessionCaches, pickSessionCacheEvictions } from "./session-cache"
|
|
||||||
|
|
||||||
const msg = (id: string, sessionID: string) =>
|
|
||||||
({
|
|
||||||
id,
|
|
||||||
sessionID,
|
|
||||||
role: "user",
|
|
||||||
time: { created: 1 },
|
|
||||||
agent: "assistant",
|
|
||||||
model: { providerID: "openai", modelID: "gpt" },
|
|
||||||
}) as Message
|
|
||||||
|
|
||||||
const part = (id: string, sessionID: string, messageID: string) =>
|
|
||||||
({
|
|
||||||
id,
|
|
||||||
sessionID,
|
|
||||||
messageID,
|
|
||||||
type: "text",
|
|
||||||
text: id,
|
|
||||||
}) as Part
|
|
||||||
|
|
||||||
describe("app session cache", () => {
|
|
||||||
test("dropSessionCaches clears orphaned parts without message rows", () => {
|
|
||||||
const store: {
|
|
||||||
session_status: Record<string, SessionStatus | undefined>
|
|
||||||
session_diff: Record<string, FileDiffInfo[] | undefined>
|
|
||||||
todo: Record<string, Todo[] | undefined>
|
|
||||||
message: Record<string, Message[] | undefined>
|
|
||||||
session_message: Record<string, never[] | undefined>
|
|
||||||
part: Record<string, Part[] | undefined>
|
|
||||||
permission: Record<string, PermissionRequest[] | undefined>
|
|
||||||
form: Record<string, FormInfo[] | undefined>
|
|
||||||
part_text_accum_delta: Record<string, string | undefined>
|
|
||||||
} = {
|
|
||||||
session_status: { ses_1: { type: "busy" } as SessionStatus },
|
|
||||||
session_diff: { ses_1: [] },
|
|
||||||
todo: { ses_1: [] as Todo[] },
|
|
||||||
message: {},
|
|
||||||
session_message: {},
|
|
||||||
part: { msg_1: [part("prt_1", "ses_1", "msg_1")] },
|
|
||||||
permission: { ses_1: [] as PermissionRequest[] },
|
|
||||||
form: { ses_1: [] as FormInfo[] },
|
|
||||||
part_text_accum_delta: { prt_1: "streamed text" },
|
|
||||||
}
|
|
||||||
|
|
||||||
dropSessionCaches(store, ["ses_1"])
|
|
||||||
|
|
||||||
expect(store.message.ses_1).toBeUndefined()
|
|
||||||
expect(store.part.msg_1).toBeUndefined()
|
|
||||||
expect(store.part_text_accum_delta.prt_1).toBeUndefined()
|
|
||||||
expect(store.todo.ses_1).toBeUndefined()
|
|
||||||
expect(store.session_diff.ses_1).toBeUndefined()
|
|
||||||
expect(store.session_status.ses_1).toBeUndefined()
|
|
||||||
expect(store.permission.ses_1).toBeUndefined()
|
|
||||||
expect(store.form.ses_1).toBeUndefined()
|
|
||||||
})
|
|
||||||
|
|
||||||
test("dropSessionCaches clears message-backed parts", () => {
|
|
||||||
const m = msg("msg_1", "ses_1")
|
|
||||||
const store: {
|
|
||||||
session_status: Record<string, SessionStatus | undefined>
|
|
||||||
session_diff: Record<string, FileDiffInfo[] | undefined>
|
|
||||||
todo: Record<string, Todo[] | undefined>
|
|
||||||
message: Record<string, Message[] | undefined>
|
|
||||||
session_message: Record<string, never[] | undefined>
|
|
||||||
part: Record<string, Part[] | undefined>
|
|
||||||
permission: Record<string, PermissionRequest[] | undefined>
|
|
||||||
form: Record<string, FormInfo[] | undefined>
|
|
||||||
part_text_accum_delta: Record<string, string | undefined>
|
|
||||||
} = {
|
|
||||||
session_status: {},
|
|
||||||
session_diff: {},
|
|
||||||
todo: {},
|
|
||||||
message: { ses_1: [m] },
|
|
||||||
session_message: {},
|
|
||||||
part: { [m.id]: [part("prt_1", "ses_1", m.id)] },
|
|
||||||
permission: {},
|
|
||||||
form: {},
|
|
||||||
part_text_accum_delta: {},
|
|
||||||
}
|
|
||||||
|
|
||||||
dropSessionCaches(store, ["ses_1"])
|
|
||||||
|
|
||||||
expect(store.message.ses_1).toBeUndefined()
|
|
||||||
expect(store.part[m.id]).toBeUndefined()
|
|
||||||
})
|
|
||||||
|
|
||||||
test("pickSessionCacheEvictions preserves requested sessions", () => {
|
|
||||||
const seen = new Set(["ses_1", "ses_2", "ses_3"])
|
|
||||||
|
|
||||||
const stale = pickSessionCacheEvictions({
|
|
||||||
seen,
|
|
||||||
keep: "ses_4",
|
|
||||||
limit: 2,
|
|
||||||
preserve: ["ses_1"],
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(stale).toEqual(["ses_2", "ses_3"])
|
|
||||||
expect([...seen]).toEqual(["ses_1", "ses_4"])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import type { Message, Part, Todo } from "@/types"
|
|
||||||
import type { FormInfo, PermissionRequest, SessionStatus } from "@opencode-ai/client/promise"
|
|
||||||
import type { FileDiffInfo } from "@opencode-ai/client/promise"
|
|
||||||
import type { SessionMessageInfo } from "@opencode-ai/client/promise"
|
|
||||||
|
|
||||||
export const SESSION_CACHE_LIMIT = 40
|
|
||||||
|
|
||||||
type SessionCache = {
|
|
||||||
session_status: Record<string, SessionStatus | undefined>
|
|
||||||
session_diff: Record<string, FileDiffInfo[] | undefined>
|
|
||||||
todo: Record<string, Todo[] | undefined>
|
|
||||||
message: Record<string, Message[] | undefined>
|
|
||||||
session_message: Record<string, SessionMessageInfo[] | undefined>
|
|
||||||
part: Record<string, Part[] | undefined>
|
|
||||||
permission: Record<string, PermissionRequest[] | undefined>
|
|
||||||
form?: Record<string, FormInfo[] | undefined>
|
|
||||||
part_text_accum_delta: Record<string, string | undefined>
|
|
||||||
}
|
|
||||||
|
|
||||||
export function dropSessionCaches(store: SessionCache, sessionIDs: Iterable<string>) {
|
|
||||||
const stale = new Set(Array.from(sessionIDs).filter(Boolean))
|
|
||||||
if (stale.size === 0) return
|
|
||||||
|
|
||||||
for (const key of Object.keys(store.part)) {
|
|
||||||
const parts = store.part[key]
|
|
||||||
if (!parts?.some((part) => stale.has(part?.sessionID ?? ""))) continue
|
|
||||||
for (const part of parts) {
|
|
||||||
delete store.part_text_accum_delta[part.id]
|
|
||||||
}
|
|
||||||
delete store.part[key]
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const sessionID of stale) {
|
|
||||||
delete store.message[sessionID]
|
|
||||||
delete store.todo[sessionID]
|
|
||||||
delete store.session_message[sessionID]
|
|
||||||
delete store.session_diff[sessionID]
|
|
||||||
delete store.session_status[sessionID]
|
|
||||||
delete store.permission[sessionID]
|
|
||||||
if (store.form) delete store.form[sessionID]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function pickSessionCacheEvictions(input: {
|
|
||||||
seen: Set<string>
|
|
||||||
keep: string
|
|
||||||
limit: number
|
|
||||||
preserve?: Iterable<string>
|
|
||||||
}) {
|
|
||||||
const stale: string[] = []
|
|
||||||
const keep = new Set([input.keep, ...Array.from(input.preserve ?? [])])
|
|
||||||
if (input.seen.has(input.keep)) input.seen.delete(input.keep)
|
|
||||||
input.seen.add(input.keep)
|
|
||||||
for (const id of input.seen) {
|
|
||||||
if (input.seen.size - stale.length <= input.limit) break
|
|
||||||
if (keep.has(id)) continue
|
|
||||||
stale.push(id)
|
|
||||||
}
|
|
||||||
for (const id of stale) {
|
|
||||||
input.seen.delete(id)
|
|
||||||
}
|
|
||||||
return stale
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import type { SessionApi } from "@opencode-ai/client/promise"
|
|
||||||
|
|
||||||
export async function loadRootSessions(input: { api: Pick<SessionApi, "list">; directory: string; limit: number }) {
|
|
||||||
const result = await input.api.list({
|
|
||||||
directory: input.directory,
|
|
||||||
parentID: null,
|
|
||||||
limit: input.limit,
|
|
||||||
order: "desc",
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
data: result.data,
|
|
||||||
limit: input.limit,
|
|
||||||
limited: true,
|
|
||||||
} as const
|
|
||||||
}
|
|
||||||
|
|
||||||
export function estimateRootSessionTotal(input: { count: number; limit: number; limited: boolean }) {
|
|
||||||
if (!input.limited) return input.count
|
|
||||||
if (input.count < input.limit) return input.count
|
|
||||||
return input.count + 1
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import { describe, expect, test } from "bun:test"
|
|
||||||
import type { PermissionRequest, SessionInfo } from "@opencode-ai/client/promise"
|
|
||||||
import { trimSessions } from "./session-trim"
|
|
||||||
|
|
||||||
const session = (input: { id: string; parentID?: string; created: number; updated?: number; archived?: number }) =>
|
|
||||||
({
|
|
||||||
id: input.id,
|
|
||||||
parentID: input.parentID,
|
|
||||||
time: {
|
|
||||||
created: input.created,
|
|
||||||
updated: input.updated,
|
|
||||||
archived: input.archived,
|
|
||||||
},
|
|
||||||
}) as SessionInfo
|
|
||||||
|
|
||||||
describe("trimSessions", () => {
|
|
||||||
test("keeps base roots and recent roots beyond the limit", () => {
|
|
||||||
const now = 1_000_000
|
|
||||||
const list = [
|
|
||||||
session({ id: "a", created: now - 100_000 }),
|
|
||||||
session({ id: "b", created: now - 90_000 }),
|
|
||||||
session({ id: "c", created: now - 80_000 }),
|
|
||||||
session({ id: "d", created: now - 70_000, updated: now - 1_000 }),
|
|
||||||
session({ id: "e", created: now - 60_000, archived: now - 10 }),
|
|
||||||
]
|
|
||||||
|
|
||||||
const result = trimSessions(list, { limit: 2, permission: {}, now })
|
|
||||||
expect(result.map((x) => x.id)).toEqual(["a", "b", "c", "d"])
|
|
||||||
})
|
|
||||||
|
|
||||||
test("keeps children when root is kept, permission exists, or child is recent", () => {
|
|
||||||
const now = 1_000_000
|
|
||||||
const list = [
|
|
||||||
session({ id: "root-1", created: now - 1000 }),
|
|
||||||
session({ id: "root-2", created: now - 2000 }),
|
|
||||||
session({ id: "z-root", created: now - 30_000_000 }),
|
|
||||||
session({ id: "child-kept-by-root", parentID: "root-1", created: now - 20_000_000 }),
|
|
||||||
session({ id: "child-kept-by-permission", parentID: "z-root", created: now - 20_000_000 }),
|
|
||||||
session({ id: "child-kept-by-recency", parentID: "z-root", created: now - 500 }),
|
|
||||||
session({ id: "child-trimmed", parentID: "z-root", created: now - 20_000_000 }),
|
|
||||||
]
|
|
||||||
|
|
||||||
const result = trimSessions(list, {
|
|
||||||
limit: 2,
|
|
||||||
permission: {
|
|
||||||
"child-kept-by-permission": [{ id: "perm-1" } as PermissionRequest],
|
|
||||||
},
|
|
||||||
now,
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(result.map((x) => x.id)).toEqual([
|
|
||||||
"child-kept-by-permission",
|
|
||||||
"child-kept-by-recency",
|
|
||||||
"child-kept-by-root",
|
|
||||||
"root-1",
|
|
||||||
"root-2",
|
|
||||||
])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
import type { SessionInfo } from "@opencode-ai/client/promise"
|
|
||||||
import type { PermissionRequest } from "@opencode-ai/client/promise"
|
|
||||||
import { cmp } from "./utils"
|
|
||||||
import { SESSION_RECENT_LIMIT, SESSION_RECENT_WINDOW } from "./types"
|
|
||||||
|
|
||||||
export function sessionUpdatedAt(session: SessionInfo) {
|
|
||||||
return session.time.updated ?? session.time.created
|
|
||||||
}
|
|
||||||
|
|
||||||
export function compareSessionRecent(a: SessionInfo, b: SessionInfo) {
|
|
||||||
const aUpdated = sessionUpdatedAt(a)
|
|
||||||
const bUpdated = sessionUpdatedAt(b)
|
|
||||||
if (aUpdated !== bUpdated) return bUpdated - aUpdated
|
|
||||||
return cmp(a.id, b.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function takeRecentSessions(sessions: SessionInfo[], limit: number, cutoff: number) {
|
|
||||||
if (limit <= 0) return [] as SessionInfo[]
|
|
||||||
const selected: SessionInfo[] = []
|
|
||||||
const seen = new Set<string>()
|
|
||||||
for (const session of sessions) {
|
|
||||||
if (!session?.id) continue
|
|
||||||
if (seen.has(session.id)) continue
|
|
||||||
seen.add(session.id)
|
|
||||||
if (sessionUpdatedAt(session) <= cutoff) continue
|
|
||||||
const index = selected.findIndex((x) => compareSessionRecent(session, x) < 0)
|
|
||||||
if (index === -1) selected.push(session)
|
|
||||||
if (index !== -1) selected.splice(index, 0, session)
|
|
||||||
if (selected.length > limit) selected.pop()
|
|
||||||
}
|
|
||||||
return selected
|
|
||||||
}
|
|
||||||
|
|
||||||
export function trimSessions(
|
|
||||||
input: SessionInfo[],
|
|
||||||
options: { limit: number; permission: Record<string, PermissionRequest[]>; now?: number },
|
|
||||||
) {
|
|
||||||
const limit = Math.max(0, options.limit)
|
|
||||||
const cutoff = (options.now ?? Date.now()) - SESSION_RECENT_WINDOW
|
|
||||||
const all = input
|
|
||||||
.filter((s) => !!s?.id)
|
|
||||||
.filter((s) => !s.time?.archived)
|
|
||||||
.sort((a, b) => cmp(a.id, b.id))
|
|
||||||
const roots = all.filter((s) => !s.parentID)
|
|
||||||
roots.sort(compareSessionRecent)
|
|
||||||
const children = all.filter((s) => !!s.parentID)
|
|
||||||
const base = roots.slice(0, limit)
|
|
||||||
const recent = takeRecentSessions(roots.slice(limit), SESSION_RECENT_LIMIT, cutoff)
|
|
||||||
const keepRoots = [...base, ...recent]
|
|
||||||
const keepRootIds = new Set(keepRoots.map((s) => s.id))
|
|
||||||
const keepChildren = children.filter((s) => {
|
|
||||||
if (s.parentID && keepRootIds.has(s.parentID)) return true
|
|
||||||
const perms = options.permission[s.id] ?? []
|
|
||||||
if (perms.length > 0) return true
|
|
||||||
return sessionUpdatedAt(s) > cutoff
|
|
||||||
})
|
|
||||||
return [...keepRoots, ...keepChildren].sort((a, b) => cmp(a.id, b.id))
|
|
||||||
}
|
|
||||||
@@ -1,13 +1,7 @@
|
|||||||
import type { Agent, Config, LspStatus, Message, Part, Path, Todo, VcsInfo } from "@/types"
|
import type { Agent, Config, LspStatus, Path, VcsInfo } from "@/types"
|
||||||
import type {
|
import type { ReferenceInfo } from "@opencode-ai/client/promise"
|
||||||
FileDiffInfo,
|
|
||||||
PermissionRequest,
|
|
||||||
ReferenceInfo,
|
|
||||||
SessionInfo,
|
|
||||||
SessionStatus,
|
|
||||||
} from "@opencode-ai/client/promise"
|
|
||||||
import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
|
||||||
import type { CommandInfo, McpResource, McpServer, SessionMessageInfo } from "@opencode-ai/client/promise"
|
import type { CommandInfo, McpResource, McpServer } from "@opencode-ai/client/promise"
|
||||||
import type { Accessor } from "solid-js"
|
import type { Accessor } from "solid-js"
|
||||||
import type { SetStoreFunction, Store } from "solid-js/store"
|
import type { SetStoreFunction, Store } from "solid-js/store"
|
||||||
|
|
||||||
@@ -34,21 +28,6 @@ export type State = {
|
|||||||
provider: NormalizedProviderListResponse
|
provider: NormalizedProviderListResponse
|
||||||
config: Config
|
config: Config
|
||||||
path: Path
|
path: Path
|
||||||
session: SessionInfo[]
|
|
||||||
sessionTotal: number
|
|
||||||
session_status: {
|
|
||||||
[sessionID: string]: SessionStatus
|
|
||||||
}
|
|
||||||
session_working(id: string): boolean
|
|
||||||
session_diff: {
|
|
||||||
[sessionID: string]: FileDiffInfo[]
|
|
||||||
}
|
|
||||||
todo: {
|
|
||||||
[sessionID: string]: Todo[]
|
|
||||||
}
|
|
||||||
permission: {
|
|
||||||
[sessionID: string]: PermissionRequest[]
|
|
||||||
}
|
|
||||||
mcp_ready: boolean
|
mcp_ready: boolean
|
||||||
mcp: {
|
mcp: {
|
||||||
[name: string]: McpServer["status"]
|
[name: string]: McpServer["status"]
|
||||||
@@ -59,19 +38,6 @@ export type State = {
|
|||||||
lsp_ready: boolean
|
lsp_ready: boolean
|
||||||
lsp: LspStatus[]
|
lsp: LspStatus[]
|
||||||
vcs: VcsInfo | undefined
|
vcs: VcsInfo | undefined
|
||||||
limit: number
|
|
||||||
message: {
|
|
||||||
[sessionID: string]: Message[]
|
|
||||||
}
|
|
||||||
session_message: {
|
|
||||||
[sessionID: string]: SessionMessageInfo[]
|
|
||||||
}
|
|
||||||
part: {
|
|
||||||
[messageID: string]: Part[]
|
|
||||||
}
|
|
||||||
part_text_accum_delta: {
|
|
||||||
[partID: string]: string
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type VcsCache = {
|
export type VcsCache = {
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { describe, expect, test } from "bun:test"
|
import { describe, expect, test } from "bun:test"
|
||||||
import type {
|
import type {
|
||||||
AgentListOutput,
|
AgentListOutput,
|
||||||
ModelDefaultOutput,
|
|
||||||
ModelListOutput,
|
ModelListOutput,
|
||||||
ProviderListOutput,
|
ProviderListOutput,
|
||||||
} from "@opencode-ai/client/promise"
|
} from "@opencode-ai/client/promise"
|
||||||
@@ -75,7 +74,6 @@ describe("normalizeProviderList", () => {
|
|||||||
limit: { context: 1, output: 1 },
|
limit: { context: 1, output: 1 },
|
||||||
},
|
},
|
||||||
] as ModelListOutput["data"],
|
] as ModelListOutput["data"],
|
||||||
{ id: "gpt-5", providerID: "openai" } as ModelDefaultOutput["data"],
|
|
||||||
)
|
)
|
||||||
|
|
||||||
expect(result.connected).toEqual(["openai"])
|
expect(result.connected).toEqual(["openai"])
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import type {
|
import type {
|
||||||
AgentListOutput,
|
AgentListOutput,
|
||||||
ModelDefaultOutput,
|
|
||||||
ModelListOutput,
|
ModelListOutput,
|
||||||
ProviderListOutput,
|
ProviderListOutput,
|
||||||
} from "@opencode-ai/client/promise"
|
} from "@opencode-ai/client/promise"
|
||||||
@@ -38,7 +37,6 @@ export function normalizeAgentList(input: AgentListOutput["data"] | Agent[]): Ag
|
|||||||
export function normalizeProviderList(
|
export function normalizeProviderList(
|
||||||
providers: ProviderListOutput["data"] | ProviderListResponse,
|
providers: ProviderListOutput["data"] | ProviderListResponse,
|
||||||
models?: ModelListOutput["data"],
|
models?: ModelListOutput["data"],
|
||||||
defaultModel?: ModelDefaultOutput["data"],
|
|
||||||
): NormalizedProviderListResponse {
|
): NormalizedProviderListResponse {
|
||||||
if (!Array.isArray(providers)) {
|
if (!Array.isArray(providers)) {
|
||||||
return providers
|
return providers
|
||||||
@@ -113,10 +111,7 @@ export function normalizeProviderList(
|
|||||||
connected: providers.map((provider) => provider.id),
|
connected: providers.map((provider) => provider.id),
|
||||||
default: Object.fromEntries(
|
default: Object.fromEntries(
|
||||||
providers.flatMap((provider) => {
|
providers.flatMap((provider) => {
|
||||||
const model =
|
const model = models?.find((item) => item.providerID === provider.id && item.status !== "deprecated")
|
||||||
defaultModel?.providerID === provider.id
|
|
||||||
? defaultModel
|
|
||||||
: models?.find((item) => item.providerID === provider.id && item.status !== "deprecated")
|
|
||||||
return model ? [[provider.id, model.id]] : []
|
return model ? [[provider.id, model.id]] : []
|
||||||
}),
|
}),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { useServerHealth } from "@/utils/server-health"
|
|||||||
import { createServerSdkContext } from "./server-sdk"
|
import { createServerSdkContext } from "./server-sdk"
|
||||||
import { createServerSyncContext } from "./server-sync"
|
import { createServerSyncContext } from "./server-sync"
|
||||||
import { getOwner } from "solid-js/web"
|
import { getOwner } from "solid-js/web"
|
||||||
|
import { createData } from "@opencode-ai/client/solid"
|
||||||
import type { ServerScope } from "@/utils/server-scope"
|
import type { ServerScope } from "@/utils/server-scope"
|
||||||
import { createServerPermissionState } from "./permission"
|
import { createServerPermissionState } from "./permission"
|
||||||
import { createServerNotificationState } from "./notification"
|
import { createServerNotificationState } from "./notification"
|
||||||
@@ -99,9 +100,15 @@ function createServerController(
|
|||||||
) {
|
) {
|
||||||
const connKey = ServerConnection.key(conn)
|
const connKey = ServerConnection.key(conn)
|
||||||
const sdk = createServerSdkContext(conn, scope)
|
const sdk = createServerSdkContext(conn, scope)
|
||||||
const sync = createServerSyncContext(sdk)
|
const data = createData({
|
||||||
const permission = createServerPermissionState({ sdk, sync })
|
api: () => sdk.api,
|
||||||
const notification = createServerNotificationState({ sdk, sync, key: connKey })
|
event: sdk.event,
|
||||||
|
connection: sdk.connection,
|
||||||
|
directory: "",
|
||||||
|
})
|
||||||
|
const sync = createServerSyncContext(sdk, data)
|
||||||
|
const permission = createServerPermissionState({ sdk, sync, data })
|
||||||
|
const notification = createServerNotificationState({ sdk, data, key: connKey })
|
||||||
|
|
||||||
function enrich(project: { worktree: string; expanded: boolean }) {
|
function enrich(project: { worktree: string; expanded: boolean }) {
|
||||||
const [childStore] = sync.child(project.worktree, { bootstrap: false })
|
const [childStore] = sync.child(project.worktree, { bootstrap: false })
|
||||||
@@ -134,6 +141,7 @@ function createServerController(
|
|||||||
(conn?.type === "sidecar" && conn.variant === "base") || (conn?.type === "http" && isLocalHost(conn.http.url))
|
(conn?.type === "sidecar" && conn.variant === "base") || (conn?.type === "http" && isLocalHost(conn.http.url))
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
data,
|
||||||
sdk,
|
sdk,
|
||||||
sync,
|
sync,
|
||||||
isLocal,
|
isLocal,
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } fr
|
|||||||
import { useLocation } from "@solidjs/router"
|
import { useLocation } from "@solidjs/router"
|
||||||
import { createSimpleContext } from "@opencode-ai/ui/context"
|
import { createSimpleContext } from "@opencode-ai/ui/context"
|
||||||
import { makeEventListener } from "@solid-primitives/event-listener"
|
import { makeEventListener } from "@solid-primitives/event-listener"
|
||||||
import { useServerSync } from "./server-sync"
|
|
||||||
import { ServerConnection, useServers } from "./servers"
|
import { ServerConnection, useServers } from "./servers"
|
||||||
import { usePlatform } from "./platform"
|
import { usePlatform } from "./platform"
|
||||||
import type { Project } from "@/types"
|
import type { Project } from "@/types"
|
||||||
@@ -68,7 +67,6 @@ type SessionView = {
|
|||||||
reviewFile?: string
|
reviewFile?: string
|
||||||
pendingMessage?: string
|
pendingMessage?: string
|
||||||
pendingMessageAt?: number
|
pendingMessageAt?: number
|
||||||
todoCollapsed?: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
|
export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
|
||||||
@@ -150,7 +148,6 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
|
|||||||
name: "Layout",
|
name: "Layout",
|
||||||
gate: false,
|
gate: false,
|
||||||
init: () => {
|
init: () => {
|
||||||
// const serverSync = useServerSync()
|
|
||||||
const servers = useServers()
|
const servers = useServers()
|
||||||
const platform = usePlatform()
|
const platform = usePlatform()
|
||||||
|
|
||||||
@@ -706,18 +703,6 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
|
|||||||
setScroll(tab: string, pos: SessionScroll) {
|
setScroll(tab: string, pos: SessionScroll) {
|
||||||
scroll.setScroll(key(), tab, pos)
|
scroll.setScroll(key(), tab, pos)
|
||||||
},
|
},
|
||||||
todoCollapsed: {
|
|
||||||
get: () => s().todoCollapsed ?? false,
|
|
||||||
set(collapsed: boolean) {
|
|
||||||
const session = key()
|
|
||||||
const current = store.sessionView[session]
|
|
||||||
if (!current) {
|
|
||||||
setStore("sessionView", session, { scroll: {}, todoCollapsed: collapsed })
|
|
||||||
} else {
|
|
||||||
setStore("sessionView", session, "todoCollapsed", collapsed)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
terminal: {
|
terminal: {
|
||||||
opened: terminalOpened,
|
opened: terminalOpened,
|
||||||
open() {
|
open() {
|
||||||
|
|||||||
@@ -9,8 +9,9 @@ import { useProviders } from "@/hooks/use-providers"
|
|||||||
import { Persist, persisted } from "@/utils/persist"
|
import { Persist, persisted } from "@/utils/persist"
|
||||||
import { hasCustomAgent, resolveAgent } from "./local-agent"
|
import { hasCustomAgent, resolveAgent } from "./local-agent"
|
||||||
import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
|
import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
|
||||||
import { useSDK } from "./sdk"
|
import { useWorkspaceLocation } from "./location"
|
||||||
import { useSync } from "./sync"
|
import { useData } from "./server"
|
||||||
|
import { normalizeAgentList } from "./global-sync/utils"
|
||||||
import { useServerSDK } from "./server-sdk"
|
import { useServerSDK } from "./server-sdk"
|
||||||
import { ScopedKey, type ServerScope } from "@/utils/server-scope"
|
import { ScopedKey, type ServerScope } from "@/utils/server-scope"
|
||||||
|
|
||||||
@@ -59,15 +60,19 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
|
|||||||
name: "Local",
|
name: "Local",
|
||||||
init: () => {
|
init: () => {
|
||||||
const params = useParams()
|
const params = useParams()
|
||||||
const sdk = useSDK()
|
const sdk = useWorkspaceLocation()
|
||||||
const sync = useSync()
|
const data = useData()
|
||||||
const serverSDK = useServerSDK()
|
const serverSDK = useServerSDK()
|
||||||
const providers = useProviders(() => sdk().directory)
|
const providers = useProviders(() => sdk().directory)
|
||||||
const models = useModels()
|
const models = useModels()
|
||||||
const settings = useSettings()
|
const settings = useSettings()
|
||||||
|
|
||||||
const id = createMemo(() => params.id || undefined)
|
const id = createMemo(() => params.id || undefined)
|
||||||
const list = createMemo(() => sync().data.agent.filter((item) => item.mode !== "subagent" && !item.hidden))
|
const list = createMemo(() =>
|
||||||
|
normalizeAgentList(data.location.agent.list({ directory: sdk().directory }) ?? []).filter(
|
||||||
|
(item) => item.mode !== "subagent" && !item.hidden,
|
||||||
|
),
|
||||||
|
)
|
||||||
const agentsVisible = createMemo(() => settings.visibility.customAgents() || hasCustomAgent(list()))
|
const agentsVisible = createMemo(() => settings.visibility.customAgents() || hasCustomAgent(list()))
|
||||||
const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
|
const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
|
||||||
|
|
||||||
@@ -148,14 +153,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
|
|||||||
setStore("promoting", undefined)
|
setStore("promoting", undefined)
|
||||||
})
|
})
|
||||||
|
|
||||||
const configuredModel = () => {
|
|
||||||
const configured = sync().data.config.model
|
|
||||||
if (!configured) return
|
|
||||||
const [providerID, modelID] = configured.split("/")
|
|
||||||
const model = { providerID, modelID }
|
|
||||||
if (validModel(model)) return model
|
|
||||||
}
|
|
||||||
|
|
||||||
const recentModel = () => {
|
const recentModel = () => {
|
||||||
for (const item of models.recent.list()) {
|
for (const item of models.recent.list()) {
|
||||||
if (validModel(item)) return item
|
if (validModel(item)) return item
|
||||||
@@ -163,14 +160,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const defaultModel = () => {
|
const defaultModel = () => {
|
||||||
const defaults = providers.default()
|
|
||||||
for (const provider of providers.connected()) {
|
for (const provider of providers.connected()) {
|
||||||
const configured = defaults[provider.id]
|
|
||||||
if (configured) {
|
|
||||||
const model = { providerID: provider.id, modelID: configured }
|
|
||||||
if (validModel(model)) return model
|
|
||||||
}
|
|
||||||
|
|
||||||
const first = Object.values(provider.models)[0]
|
const first = Object.values(provider.models)[0]
|
||||||
if (!first) continue
|
if (!first) continue
|
||||||
const model = { providerID: provider.id, modelID: first.id }
|
const model = { providerID: provider.id, modelID: first.id }
|
||||||
@@ -178,7 +168,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const fallback = createMemo<ModelKey | undefined>(() => configuredModel() ?? recentModel() ?? defaultModel())
|
const fallback = createMemo<ModelKey | undefined>(() => recentModel() ?? defaultModel())
|
||||||
|
|
||||||
const agent = {
|
const agent = {
|
||||||
list,
|
list,
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user