mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(desktop): prompt history nav, optimistic prompt dup

Browse source
This commit is contained in:
Adam 2025-12-18 09:38:35 -06:00
parent b0aaf04957
commit 268f37f8c9
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
7 changed files with 158 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

87
packages/desktop/src/components/prompt-input.tsx
View file

@ -21,6 +21,7 @@ import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid
import { useProviders } from "@/hooks/use-providers"
import { useCommand, formatKeybind } from "@/context/command"
import { persisted } from "@/utils/persist"
import { Identifier } from "@opencode-ai/util/identifier"
const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
@ -100,6 +101,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
dragging: boolean
imageAttachments: ImageAttachmentPart[]
mode: "normal" | "shell"
applyingHistory: boolean
}>({
popover: null,
historyIndex: -1,
@ -108,6 +110,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
dragging: false,
imageAttachments: [],
mode: "normal",
applyingHistory: false,
})
const MAX_HISTORY = 100
@ -135,10 +138,12 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
const applyHistoryPrompt = (p: Prompt, position: "start" | "end") => {
const length = position === "start" ? 0 : promptLength(p)
setStore("applyingHistory", true)
prompt.set(p, length)
requestAnimationFrame(() => {
editorRef.focus()
setCursorPosition(editorRef, length)
setStore("applyingHistory", false)
})
}
@ -429,21 +434,42 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
const rawParts = parseFromDOM()
const cursorPosition = getCursorPosition(editorRef)
const rawText = rawParts.map((p) => ("content" in p ? p.content : "")).join("")
const trimmed = rawText.replace(/\u200B/g, "").trim()
const hasNonText = rawParts.some((part) => part.type !== "text")
const shouldReset = trimmed.length === 0 && !hasNonText
const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/)
const slashMatch = rawText.match(/^\/(\S*)$/)
if (shouldReset) {
setStore("popover", null)
if (store.historyIndex >= 0 && !store.applyingHistory) {
setStore("historyIndex", -1)
setStore("savedPrompt", null)
}
if (prompt.dirty()) {
prompt.set(DEFAULT_PROMPT, 0)
}
return
}
if (atMatch) {
onInput(atMatch[1])
setStore("popover", "file")
} else if (slashMatch) {
slashOnInput(slashMatch[1])
setStore("popover", "slash")
const shellMode = store.mode === "shell"
if (!shellMode) {
const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/)
const slashMatch = rawText.match(/^\/(\S*)$/)
if (atMatch) {
onInput(atMatch[1])
setStore("popover", "file")
} else if (slashMatch) {
slashOnInput(slashMatch[1])
setStore("popover", "slash")
} else {
setStore("popover", null)
}
} else {
setStore("popover", null)
}
if (store.historyIndex >= 0) {
if (store.historyIndex >= 0 && !store.applyingHistory) {
setStore("historyIndex", -1)
setStore("savedPrompt", null)
}
@ -591,8 +617,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
}
}
if (store.mode === "shell") {
const cursorPosition = getCursorPosition(editorRef)
if ((event.key === "Backspace" && cursorPosition === 0) || event.key === "Escape") {
const { collapsed, cursorPosition, textLength } = getCaretState()
if (event.key === "Escape") {
setStore("mode", "normal")
event.preventDefault()
return
}
if (event.key === "Backspace" && collapsed && cursorPosition === 0 && textLength === 0) {
setStore("mode", "normal")
event.preventDefault()
return
@ -685,6 +716,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
? `?start=${attachment.selection.startLine}&end=${attachment.selection.endLine}`
: ""
return {
id: Identifier.ascending("part"),
type: "file" as const,
mime: "text/plain",
url: `file://${absolute}${query}`,
@ -702,6 +734,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
})
const imageAttachmentParts = store.imageAttachments.map((attachment) => ({
id: Identifier.ascending("part"),
type: "file" as const,
mime: attachment.mime,
url: attachment.dataUrl,
@ -747,14 +780,23 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
}
}
const messageID = Identifier.ascending("message")
const textPart = {
id: Identifier.ascending("part"),
type: "text" as const,
text,
}
const requestParts = [textPart, ...fileAttachmentParts, ...imageAttachmentParts]
const optimisticParts = requestParts.map((part) => ({
...part,
sessionID: existing.id,
messageID,
}))
sync.session.addOptimisticMessage({
sessionID: existing.id,
text,
parts: [
{ type: "text", text } as import("@opencode-ai/sdk/v2/client").Part,
...(fileAttachmentParts as import("@opencode-ai/sdk/v2/client").Part[]),
...(imageAttachmentParts as import("@opencode-ai/sdk/v2/client").Part[]),
],
messageID,
parts: optimisticParts,
agent,
model,
})
@ -763,14 +805,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
sessionID: existing.id,
agent,
model,
parts: [
{
type: "text",
text,
},
...fileAttachmentParts,
...imageAttachmentParts,
],
messageID,
parts: requestParts,
})
}
@ -911,6 +947,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
classList={{
"w-full px-5 py-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
"[&>[data-type=file]]:text-icon-info-active": true,
"font-mono!": store.mode === "shell",
}}
/>
<Show when={!prompt.dirty() && store.imageAttachments.length === 0}>

1
packages/desktop/src/components/terminal.tsx
View file

@ -148,6 +148,7 @@ export const Terminal = (props: TerminalProps) => {
<div
ref={container}
data-component="terminal"
data-prevent-autofocus
classList={{
...(local.classList ?? {}),
"size-full px-6 py-3 font-mono": true,

14
packages/desktop/src/context/sync.tsx
View file

@ -33,14 +33,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
},
addOptimisticMessage(input: {
sessionID: string
text: string
messageID: string
parts: Part[]
agent: string
model: { providerID: string; modelID: string }
}) {
const messageID = crypto.randomUUID()
const message: Message = {
id: messageID,
id: input.messageID,
sessionID: input.sessionID,
role: "user",
time: { created: Date.now() },
@ -53,15 +52,10 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
if (!messages) {
draft.message[input.sessionID] = [message]
} else {
const result = Binary.search(messages, messageID, (m) => m.id)
const result = Binary.search(messages, input.messageID, (m) => m.id)
messages.splice(result.index, 0, message)
}
draft.part[messageID] = input.parts.map((part, i) => ({
...part,
id: `${messageID}-${i}`,
sessionID: input.sessionID,
messageID,
}))
draft.part[input.messageID] = input.parts.slice()
}),
)
},

2
packages/desktop/src/pages/layout.tsx
View file

@ -358,7 +358,7 @@ export default function Layout(props: ParentProps) {
const opencode = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
return (
<div class="relative size-5 shrink-0 rounded-sm overflow-hidden">
<div class="relative size-5 shrink-0 rounded-sm">
<Avatar
fallback={name()}
src={props.project.id === opencode ? "https://opencode.ai/favicon.svg" : props.project.icon?.url}

10
packages/desktop/src/pages/session.tsx
View file

@ -327,11 +327,15 @@ export default function Page() {
])
const handleKeyDown = (event: KeyboardEvent) => {
if ((document.activeElement as HTMLElement)?.dataset?.component === "terminal") return
const activeElement = document.activeElement as HTMLElement | undefined
if (activeElement) {
const isProtected = activeElement.closest("[data-prevent-autofocus]")
const isInput = /^(INPUT|TEXTAREA|SELECT)$/.test(activeElement.tagName) || activeElement.isContentEditable
if (isProtected || isInput) return
}
if (dialog.active) return
const focused = document.activeElement === inputRef
if (focused) {
if (activeElement === inputRef) {
if (event.key === "Escape") inputRef?.blur()
return
}

74
packages/opencode/src/id/id.ts
View file

@ -1,73 +1,19 @@
import z from "zod"
import { randomBytes } from "crypto"
import { Identifier as SharedIdentifier } from "@opencode-ai/util/identifier"
export namespace Identifier {
const prefixes = {
session: "ses",
message: "msg",
permission: "per",
user: "usr",
part: "prt",
pty: "pty",
} as const
export type Prefix = SharedIdentifier.Prefix
export function schema(prefix: keyof typeof prefixes) {
return z.string().startsWith(prefixes[prefix])
export const schema = (prefix: Prefix) => SharedIdentifier.schema(prefix)
export function ascending(prefix: Prefix, given?: string) {
return SharedIdentifier.ascending(prefix, given)
}
const LENGTH = 26
// State for monotonic ID generation
let lastTimestamp = 0
let counter = 0
export function ascending(prefix: keyof typeof prefixes, given?: string) {
return generateID(prefix, false, given)
export function descending(prefix: Prefix, given?: string) {
return SharedIdentifier.descending(prefix, given)
}
export function descending(prefix: keyof typeof prefixes, given?: string) {
return generateID(prefix, true, given)
}
function generateID(prefix: keyof typeof prefixes, descending: boolean, given?: string): string {
if (!given) {
return create(prefix, descending)
}
if (!given.startsWith(prefixes[prefix])) {
throw new Error(`ID ${given} does not start with ${prefixes[prefix]}`)
}
return given
}
function randomBase62(length: number): string {
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
let result = ""
const bytes = randomBytes(length)
for (let i = 0; i < length; i++) {
result += chars[bytes[i] % 62]
}
return result
}
export function create(prefix: keyof typeof prefixes, descending: boolean, timestamp?: number): string {
const currentTimestamp = timestamp ?? Date.now()
if (currentTimestamp !== lastTimestamp) {
lastTimestamp = currentTimestamp
counter = 0
}
counter++
let now = BigInt(currentTimestamp) * BigInt(0x1000) + BigInt(counter)
now = descending ? ~now : now
const timeBytes = Buffer.alloc(6)
for (let i = 0; i < 6; i++) {
timeBytes[i] = Number((now >> BigInt(40 - 8 * i)) & BigInt(0xff))
}
return prefixes[prefix] + "_" + timeBytes.toString("hex") + randomBase62(LENGTH - 12)
export function create(prefix: Prefix, descending: boolean, timestamp?: number) {
return SharedIdentifier.createPrefixed(prefix, descending, timestamp)
}
}

95
packages/util/src/identifier.ts
View file

@ -1,48 +1,99 @@
import { randomBytes } from "crypto"
import z from "zod"
export namespace Identifier {
const LENGTH = 26
const prefixes = {
session: "ses",
message: "msg",
permission: "per",
user: "usr",
part: "prt",
pty: "pty",
} as const
export type Prefix = keyof typeof prefixes
type CryptoLike = {
getRandomValues<T extends ArrayBufferView>(array: T): T
}
const TOTAL_LENGTH = 26
const RANDOM_LENGTH = TOTAL_LENGTH - 12
const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
// State for monotonic ID generation
let lastTimestamp = 0
let counter = 0
export function ascending() {
return create(false)
const fillRandomBytes = (buffer: Uint8Array) => {
const cryptoLike = (globalThis as { crypto?: CryptoLike }).crypto
if (cryptoLike?.getRandomValues) {
cryptoLike.getRandomValues(buffer)
return buffer
}
for (let i = 0; i < buffer.length; i++) {
buffer[i] = Math.floor(Math.random() * 256)
}
return buffer
}
export function descending() {
return create(true)
}
function randomBase62(length: number): string {
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
const randomBase62 = (length: number) => {
const bytes = fillRandomBytes(new Uint8Array(length))
let result = ""
const bytes = randomBytes(length)
for (let i = 0; i < length; i++) {
result += chars[bytes[i] % 62]
result += BASE62[bytes[i] % BASE62.length]
}
return result
}
export function create(descending: boolean, timestamp?: number): string {
const createSuffix = (descending: boolean, timestamp?: number) => {
const currentTimestamp = timestamp ?? Date.now()
if (currentTimestamp !== lastTimestamp) {
lastTimestamp = currentTimestamp
counter = 0
}
counter++
counter += 1
let now = BigInt(currentTimestamp) * BigInt(0x1000) + BigInt(counter)
let value = BigInt(currentTimestamp) * 0x1000n + BigInt(counter)
if (descending) value = ~value
now = descending ? ~now : now
const timeBytes = Buffer.alloc(6)
const timeBytes = new Uint8Array(6)
for (let i = 0; i < 6; i++) {
timeBytes[i] = Number((now >> BigInt(40 - 8 * i)) & BigInt(0xff))
timeBytes[i] = Number((value >> BigInt(40 - 8 * i)) & 0xffn)
}
const hex = Array.from(timeBytes)
.map((byte) => byte.toString(16).padStart(2, "0"))
.join("")
return hex + randomBase62(RANDOM_LENGTH)
}
return timeBytes.toString("hex") + randomBase62(LENGTH - 12)
const generateID = (prefix: Prefix, descending: boolean, given?: string, timestamp?: number) => {
if (given) {
const expected = `${prefixes[prefix]}_`
if (!given.startsWith(expected)) throw new Error(`ID ${given} does not start with ${expected}`)
return given
}
return `${prefixes[prefix]}_${createSuffix(descending, timestamp)}`
}
export const schema = (prefix: Prefix) => z.string().startsWith(`${prefixes[prefix]}_`)
export function ascending(): string
export function ascending(prefix: Prefix, given?: string): string
export function ascending(prefix?: Prefix, given?: string) {
if (prefix) return generateID(prefix, false, given)
return create(false)
}
export function descending(): string
export function descending(prefix: Prefix, given?: string): string
export function descending(prefix?: Prefix, given?: string) {
if (prefix) return generateID(prefix, true, given)
return create(true)
}
export function create(descending: boolean, timestamp?: number) {
return createSuffix(descending, timestamp)
}
export function createPrefixed(prefix: Prefix, descending: boolean, timestamp?: number) {
return generateID(prefix, descending, undefined, timestamp)
}
}