@opencode/ui 2.0.21 → 2.0.23

package/src/context/dialog.tsx

@@ -37,35 +37,66 @@ export function useDialogLayer() {
 
 function init() {
   const [stack, setStack] = createSignal<Active[]>([])
-  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
+  // A dialog is closing from the moment its close starts until its exit animation ends and it is disposed.
+  const closing = new Map<string, ReturnType<typeof setTimeout> | undefined>()
+  // The same ids, reactive, so the top dialog that stays open owns the focus trap during an exit animation.
+  const [exiting, setExiting] = createSignal<ReadonlySet<string>>(new Set())
   const lock = { value: false }
+  const state = { disposed: false }
+
+  // Detach the stack before disposing, so cleanups that close dialogs find nothing to admit. Every dialog is
+  // drained even when one throws. A replaced dialog that was not already closing still hears onClose.
+  const disposeAll = (notify: boolean) => {
+    const items = stack()
+    const exited = new Set(closing.keys())
+    setStack([])
+    closing.forEach((timer) => clearTimeout(timer))
+    closing.clear()
+    setExiting(new Set<string>())
+    items.forEach((item) => {
+      if (notify && !exited.has(item.id)) isolate(() => item.onClose?.())
+      isolate(item.dispose)
+    })
+  }
 
   onCleanup(() => {
-    if (timer.current === undefined) return
-    clearTimeout(timer.current)
-    timer.current = undefined
+    state.disposed = true
+    disposeAll(false)
   })
 
-  const close = (id?: string) => {
-    const items = stack()
-    const current = id ? items.find((item) => item.id === id) : items.at(-1)
-    if (!current || lock.value) return
-    lock.value = true
-    current.onClose?.()
+  const finish = (current: Active) => {
+    // Scheduled first, so the dialog still goes away when a callback throws.
+    closing.set(
+      current.id,
+      setTimeout(() => {
+        closing.delete(current.id)
+        if (closing.size === 0) lock.value = false
+        setExiting((ids) => new Set([...ids].filter((id) => id !== current.id)))
+        setStack((items) => items.filter((item) => item.id !== current.id))
+        current.dispose()
+      }, 100),
+    )
+    setExiting((ids) => new Set([...ids, current.id]))
+    isolate(() => current.onClose?.())
     current.setClosing(true)
+  }
 
-    const closed = current.id
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
+  /** Programmatic close. Without an id it closes the top dialog, one at a time; with an id it never waits. */
+  const close = (id?: string) => {
+    const current = id ? stack().find((item) => item.id === id) : stack().at(-1)
+    if (!current || closing.has(current.id) || (!id && lock.value)) return
+    closing.set(current.id, undefined)
+    lock.value = true
+    finish(current)
+  }
 
-    timer.current = setTimeout(() => {
-      timer.current = undefined
-      current.dispose()
-      setStack((items) => items.filter((item) => item.id !== closed))
-      lock.value = false
-    }, 100)
+  /** Escape, a backdrop click, or Kobalte dismissing: only the top dialog, and one per exit animation. */
+  const dismiss = (id?: string) => {
+    const current = stack().at(-1)
+    if (!current || (id && current.id !== id) || closing.has(current.id) || lock.value) return
+    closing.set(current.id, undefined)
+    lock.value = true
+    finish(current)
   }
 
   createEffect(() => {
@@ -73,7 +104,7 @@ function init() {
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return
-      close()
+      dismiss()
       event.preventDefault()
       event.stopPropagation()
     }
@@ -81,9 +112,17 @@ function init() {
     makeEventListener(window, "keydown", onKeyDown, { capture: true })
   })
 
-  const mount = (element: DialogElement, owner: Owner, onClose: (() => void) | undefined, layer: number) => {
-    const id = Math.random().toString(36).slice(2)
-    const zIndex = 50 + layer * 10
+  const mount = (element: DialogElement, owner: Owner, onClose: (() => void) | undefined, key?: string) => {
+    // A deferred open (e.g. from a focus callback) must not mount after the provider is gone.
+    if (state.disposed) return
+    const id = key ?? Math.random().toString(36).slice(2)
+    // The layer follows the dialog's current place in the stack, so a new top dialog always renders above.
+    const layer = () =>
+      Math.max(
+        0,
+        stack().findIndex((item) => item.id === id),
+      )
+    const zIndex = () => String(50 + layer() * 10)
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
 
@@ -96,27 +135,26 @@ function init() {
         setClosing = setClosingSignal
         return (
           <Kobalte
-            modal={stack().at(-1)?.id === id}
+            modal={stack().findLast((item) => !exiting().has(item.id))?.id === id}
             open={!closing()}
             onOpenChange={(open: boolean) => {
-              if (open || stack().at(-1)?.id !== id) return
-              close(id)
+              if (!open) dismiss(id)
             }}
           >
             <Kobalte.Portal>
               <Kobalte.Overlay
                 data-component="dialog-overlay"
-                style={{ "z-index": String(zIndex) }}
+                style={{ "z-index": zIndex() }}
                 onClick={() => {
-                  if (backdropDismiss()) close(id)
+                  if (backdropDismiss()) dismiss(id)
                 }}
               />
               <div
-                data-dialog-layer={layer}
+                data-dialog-layer={layer()}
                 style={{
                   position: "fixed",
                   inset: "0",
-                  "z-index": String(zIndex),
+                  "z-index": zIndex(),
                   display: "flex",
                   "align-items": "center",
                   "justify-content": "center",
@@ -137,24 +175,15 @@ function init() {
     setStack((items) => [...items, active])
   }
 
-  const push = (element: DialogElement, owner: Owner, onClose?: () => void) => {
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
+  const push = (element: DialogElement, owner: Owner, onClose?: () => void, id?: string) => {
     lock.value = false
-    mount(element, owner, onClose, stack().length)
+    mount(element, owner, onClose, id)
   }
 
-  const show = (element: DialogElement, owner: Owner, onClose?: () => void) => {
-    for (const item of stack()) item.dispose()
-    setStack([])
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
+  const show = (element: DialogElement, owner: Owner, onClose?: () => void, id?: string) => {
+    disposeAll(true)
     lock.value = false
-    mount(element, owner, onClose, 0)
+    mount(element, owner, onClose, id)
   }
 
   return {
@@ -164,6 +193,14 @@ function init() {
     push,
   }
 }
+/** Runs a dialog callback so its throw is reported without stopping the caller's cleanup. */
+function isolate(fn: () => void) {
+  try {
+    fn()
+  } catch (error) {
+    console.error("[dialog]", error)
+  }
+}
 
 export function DialogProvider(props: ParentProps) {
   const ctx = init()
@@ -192,16 +229,26 @@ export function useDialog() {
     get active() {
       return ctx.stack().at(-1)
     },
-    show(element: DialogElement, onClose?: () => void) {
+    /**
+     * id lets the caller close this dialog later rather than whichever is on top. Opening is deferred; once
+     * signal aborts, the open neither mounts nor replaces anything and onClose runs as for a replaced dialog.
+     */
+    show(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
-      return startTransition(() => ctx.show(element, base, onClose))
+      return startTransition(() => {
+        if (signal?.aborted) return isolate(() => onClose?.())
+        ctx.show(element, base, onClose, id)
+      })
     },
-    push(element: DialogElement, onClose?: () => void) {
+    push(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
-      return startTransition(() => ctx.push(element, base, onClose))
+      return startTransition(() => {
+        if (signal?.aborted) return isolate(() => onClose?.())
+        ctx.push(element, base, onClose, id)
+      })
     },
-    close() {
-      ctx.close()
+    close(id?: string) {
+      ctx.close(id)
     },
   }
 }

package/src/data-display/accordion/accordion.tsx

@@ -2,17 +2,27 @@ import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
-export interface AccordionProps extends ComponentProps<typeof Root> {}
+export interface AccordionProps extends Omit<ComponentProps<typeof Root>, "value"> {
+  /** Controlled expanded items. Kobalte reads this iterable into its own selection; it never mutates this array. */
+  value?: readonly string[]
+}
+
 export interface AccordionItemProps extends ComponentProps<typeof Item> {}
+
 export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
+
 export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
+
 export interface AccordionContentProps extends ComponentProps<typeof Content> {}
 
 function AccordionRoot(props: AccordionProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
+  const [split, rest] = splitProps(props, ["class", "classList", "value"])
+
+  // SAFETY: Kobalte's createMultipleSelectionState copies selectedKeys into a Selection before changing it.
   return (
     <Root
       {...rest}
+      value={split.value as string[] | undefined}
       data-component="accordion"
       classList={{
         ...split.classList,
@@ -24,6 +34,7 @@ function AccordionRoot(props: AccordionProps) {
 
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Item
       {...rest}
@@ -38,6 +49,7 @@ function AccordionItem(props: AccordionItemProps) {
 
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Header
       {...rest}
@@ -54,6 +66,7 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Trigger
       {...rest}
@@ -70,6 +83,7 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Content
       {...rest}

package/src/data-display/project-avatar/project-avatar.tsx

@@ -29,6 +29,39 @@ export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
 // "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
 export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
 
+const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
+
+export function getProjectAvatarSource(id?: string, icon?: { color?: string; url?: string; override?: string }) {
+  if (id === OPENCODE_PROJECT_ID) return "https://opencode.ai/favicon.svg"
+  if (icon?.override) return icon.override
+  if (icon?.color) return undefined
+  return icon?.url
+}
+
+export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
+  if (key === "mint") return "cyan"
+  if (key === "lime") return "green"
+  if (
+    key === "orange" ||
+    key === "yellow" ||
+    key === "cyan" ||
+    key === "green" ||
+    key === "red" ||
+    key === "pink" ||
+    key === "blue" ||
+    key === "purple" ||
+    key === "gray"
+  )
+    return key
+  return "gray"
+}
+
+export const displayName = (project: { name?: string; worktree: string }) => {
+  const trimmed = project.worktree.replace(/[/\\]+$/, "")
+  const filename = trimmed.slice(Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\")) + 1)
+  return project.name || filename || project.worktree
+}
+
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string

package/src/feedback/toast/toast.tsx

@@ -21,9 +21,12 @@ function ToastRegion(props: ToastRegionProps) {
         element.tabIndex = hidden ? -1 : 0
       })
     }
+
     let connected = false
+
     const connect = () => {
       const regions = document.querySelectorAll(".toast-v2-region")
+
       if (!regions.length) return
       observer.disconnect()
       regions.forEach((region) => {
@@ -37,14 +40,17 @@ function ToastRegion(props: ToastRegionProps) {
       connected = true
       sync()
     }
+
     const observer = new MutationObserver(() => {
       if (!connected) connect()
       else sync()
     })
+
     observer.observe(document.body, { subtree: true, childList: true })
     queueMicrotask(connect)
     onCleanup(() => observer.disconnect())
   })
+
   return (
     <Portal>
       <Toaster
@@ -55,7 +61,7 @@ function ToastRegion(props: ToastRegionProps) {
         duration={5000}
         swipeDirections={["bottom"]}
         className={["toast-v2-region", local.className, local.class].filter(Boolean).join(" ")}
-        style={{ "--width": "320px", ...local.style } as JSX.CSSProperties}
+        style={{ "--width": "320px", ...local.style }}
         toastOptions={{
           ...local.toastOptions,
           unstyled: true,
@@ -103,6 +109,7 @@ function ToastCloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
   const toastId = useContext(ToastContext)
   const [local, rest] = splitProps(props, ["children", "onClick"])
+
   return (
     <button
       type="button"
@@ -110,7 +117,8 @@ function ToastCloseButton(props: ComponentProps<"button">) {
       aria-label={i18n.t("ui.common.dismiss")}
       {...rest}
       onClick={(event) => {
-        if (typeof local.onClick === "function") local.onClick(event)
+        if (local.onClick instanceof Function) local.onClick(event)
+
         if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
       }}
     >
@@ -147,7 +155,7 @@ export const toaster = {
       duration?: number
       persistent?: boolean
       /** Reactive value the toast's height depends on; sonner re-measures when it changes. */
-      resize?: () => unknown
+      resize?: () => void
     },
   ) {
     const toastId = --toastV2Id
@@ -162,10 +170,12 @@ export const toaster = {
       description: options?.resize
         ? (): JSX.Element => {
             options.resize?.()
+
             return undefined
           }
         : undefined,
     })
+
     return toastId
   },
   dismiss(toastId?: number) {
@@ -175,6 +185,7 @@ export const toaster = {
     } else {
       releaseToast(activeToastById.get(toastId))
     }
+
     return toast.dismiss(toastId)
   },
 }
@@ -188,7 +199,8 @@ export interface ToastAction {
 export interface ToastOptions {
   title?: string
   description?: string
-  icon?: JSX.Element
+  /** An element, or a render function the toast calls under its own owner, for icons created from imperative code. */
+  icon?: JSX.Element | (() => JSX.Element)
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
@@ -203,10 +215,14 @@ interface ActiveToast {
 }
 
 const activeToastByKey = new Map<string, ActiveToast>()
+
 const activeToastById = new Map<number, ActiveToast>()
 
 export function showToast(options: ToastOptions | string) {
+  // SAFETY: `options` is declared `ToastOptions | string`; `typeof` separates the string shorthand from the object.
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- see SAFETY above
   const opts = boundToastDescription(typeof options === "string" ? { description: options } : options)
+
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -215,6 +231,7 @@ export function showToast(options: ToastOptions | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
+
   const active = activeToastByKey.get(key)
   const toasts = toast.getToasts()
 
@@ -222,6 +239,7 @@ export function showToast(options: ToastOptions | string) {
     active.options = opts
     publishToast(active)
     pulseToast(active.id)
+
     return active.id
   }
 
@@ -233,6 +251,7 @@ export function showToast(options: ToastOptions | string) {
   activeToastByKey.set(key, entry)
   activeToastById.set(entry.id, entry)
   publishToast(entry)
+
   return entry.id
 }
 
@@ -241,7 +260,9 @@ function publishToast(entry: ActiveToast) {
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
-    icon: entry.options.icon,
+    // SAFETY: solid-sonner inserts `icon` as a JSX child, and Solid calls a function child under the toast's render
+    // owner; solid-sonner's type omits function children.
+    icon: entry.options.icon as JSX.Element,
     action: entry.actions,
     closeButton: true,
     duration: entry.options.persistent ? Number.POSITIVE_INFINITY : entry.options.duration,
@@ -255,6 +276,7 @@ function publishToast(entry: ActiveToast) {
 
 function createToastActions(entry: ActiveToast) {
   if (!entry.options.actions?.length) return undefined
+
   return (
     <Toast.Actions>
       {/* Static map, not <For>: this JSX is created imperatively outside any Solid
@@ -268,7 +290,8 @@ function createToastActions(entry: ActiveToast) {
           data-action-variant={action.variant ?? "primary"}
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
-            if (typeof onClick === "function") onClick()
+
+            if (onClick && onClick !== "dismiss") onClick()
             toaster.dismiss(entry.id)
           }}
         >
@@ -283,6 +306,7 @@ function pulseToast(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
+
     if (!element || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
     element.animate([{ scale: 1 }, { scale: 1.025 }, { scale: 1 }], { duration: 160, easing: "ease-out" })
   })
@@ -290,7 +314,9 @@ function pulseToast(toastId: number) {
 
 function releaseToast(entry: ActiveToast | undefined) {
   if (!entry) return
+
   if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
+
   if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
 }
 

package/src/i18n/en.ts

@@ -108,6 +108,7 @@ const source = {
   "ui.messagePart.questions.dismissed": "Questions dismissed",
   "ui.messagePart.compaction": "Session compacted",
   "ui.messagePart.compaction.started": "Session compaction started",
+  "ui.messagePart.compaction.queued": "Session compaction queued",
   "ui.messagePart.compaction.running": "Compacting",
   "ui.messagePart.compaction.failed": "Session compaction failed",
   "ui.messagePart.compaction.cancelled": "Session compaction cancelled",
@@ -242,12 +243,15 @@ const source = {
   "ui.message.copyMessage": "Copy message",
   "ui.message.forkMessage": "Fork to new session",
   "ui.message.revertMessage": "Revert message",
+  "ui.message.moveToQueue": "Move to queue",
+  "ui.message.deletePending": "Delete",
   "ui.message.copyResponse": "Copy response",
   "ui.message.copied": "Copied",
   "ui.message.thought": "Thought",
   "ui.message.duration.seconds": "{{count}}s",
   "ui.message.duration.minutesSeconds": "{{minutes}}m {{seconds}}s",
   "ui.message.interrupted": "Interrupted",
+  "ui.message.modelVariant": "{{model}} ({{variant}})",
   "ui.sessionTimeline.notice.model": "Model",
   "ui.sessionTimeline.notice.modelSwitched": "Switched to {{model}}",
   "ui.sessionTimeline.notice.agentChanged": "Agent changed",
@@ -275,10 +279,15 @@ const source = {
 } satisfies Record<string, string>
 
 export type Key = keyof typeof source
+
 export type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other"
+
 export type PluralKey = {
   [Entry in Key]: Entry extends `${infer Base}.other` ? (`${Base}.one` extends Key ? Base : never) : never
 }[Key]
+
 export type PluralLookupKey = `${PluralKey}.${PluralCategory}`
+
 export type LocaleKey = Key | PluralLookupKey
+
 export const dict: typeof source & Record<string, string> = source