@opencode/ui 2.0.22 → 2.0.24

package/src/forms/select/select.tsx

@@ -17,13 +17,17 @@ function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category:
   if (!groupBy) {
     return [{ category: "", options }]
   }
+
   const map = new Map<string, T[]>()
+
   for (const opt of options) {
     const key = groupBy(opt)
     const arr = map.get(key)
+
     if (arr) arr.push(opt)
     else map.set(key, [opt])
   }
+
   return [...map.entries()].map(([category, opts]) => ({ category, options: opts }))
 }
 
@@ -110,11 +114,15 @@ export function Select<T>(props: SelectProps<T>) {
 
   const move = (item: T | undefined) => {
     if (!local.onHighlight) return
+
     if (!item) {
       stop()
+
       return
     }
+
     const key = keyFor(item)
+
     if (state.key === key) return
     state.cleanup?.()
     state.cleanup = local.onHighlight(item)
@@ -178,6 +186,7 @@ export function Select<T>(props: SelectProps<T>) {
       }}
       onOpenChange={(open) => {
         local.onOpenChange?.(open)
+
         if (!open) stop()
       }}
     >
@@ -200,7 +209,9 @@ export function Select<T>(props: SelectProps<T>) {
           <Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
             {(st) => {
               const selected = st.selectedOption()
+
               if (local.label && selected != null) return local.label(selected)
+
               return selected != null ? (selected as string) : ""
             }}
           </Value>

package/src/forms/switch/switch.tsx

@@ -12,6 +12,7 @@ export interface SwitchProps extends ParentProps<ComponentProps<typeof Root>> {
 
 export function Switch(props: SwitchProps) {
   const [local, others] = splitProps(props, ["children", "class", "appearance", "hideLabel", "description"])
+
   return (
     <Root {...others} class={local.class} data-component="switch" data-appearance={local.appearance ?? "compact"}>
       <Input data-slot="switch-input" />

package/src/forms/text-input/text-input.tsx

@@ -29,6 +29,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
 
 export function TextInput(props: TextInputProps) {
   const i18n = useI18n()
+
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
@@ -89,8 +90,10 @@ export function TextInput(props: TextInputProps) {
           onClick={(event) => {
             if (local.showClearButton) {
               local.onClearClick?.(event)
+
               return
             }
+
             local.onCopyClick?.(event)
           }}
         >

package/src/hooks/create-auto-scroll.tsx

@@ -53,10 +53,12 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const isAuto = (el: HTMLElement) => {
     const a = auto
+
     if (!a) return false
 
     if (Date.now() - a.time > 1500) {
       auto = undefined
+
       return false
     }
 
@@ -65,10 +67,13 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const scrollToBottomNow = (behavior: ScrollBehavior) => {
     const el = store.scrollRef
+
     if (!el) return
     markAuto(el)
+
     if (behavior === "smooth") {
       el.scrollTo({ top: el.scrollHeight, behavior })
+
       return
     }
 
@@ -82,13 +87,16 @@ export function createAutoScroll(options: AutoScrollOptions) {
     if (force && store.userScrolled) setStore("userScrolled", false)
 
     const el = store.scrollRef
+
     if (!el) return
 
     if (!force && store.userScrolled) return
 
     const distance = distanceFromBottom(el)
+
     if (distance < 2) {
       markAuto(el)
+
       return
     }
 
@@ -99,11 +107,15 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const stop = () => {
     const el = store.scrollRef
+
     if (!el) return
+
     if (!canScroll(el)) {
       if (store.userScrolled) setStore("userScrolled", false)
+
       return
     }
+
     if (store.userScrolled) return
 
     setStore("userScrolled", true)
@@ -118,27 +130,32 @@ export function createAutoScroll(options: AutoScrollOptions) {
     const el = store.scrollRef
     const target = e.target instanceof Element ? e.target : undefined
     const nested = target?.closest("[data-scrollable]")
+
     if (el && nested && nested !== el) return
     stop()
   }
 
   const handleScroll = () => {
     const el = store.scrollRef
+
     if (!el) return
 
     if (!canScroll(el)) {
       if (store.userScrolled) setStore("userScrolled", false)
+
       return
     }
 
     if (distanceFromBottom(el) < threshold()) {
       if (store.userScrolled) setStore("userScrolled", false)
+
       return
     }
 
     // Ignore scroll events triggered by our own scrollToBottom calls.
     if (!store.userScrolled && isAuto(el)) {
       scrollToBottom(false)
+
       return
     }
 
@@ -148,6 +165,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
   const handleInteraction = () => {
     if (!active()) return
     const selection = window.getSelection()
+
     if (selection && selection.toString().length > 0) {
       stop()
     }
@@ -158,11 +176,13 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
     if (mode === "none") {
       el.style.overflowAnchor = "none"
+
       return
     }
 
     if (mode === "auto") {
       el.style.overflowAnchor = "auto"
+
       return
     }
 
@@ -173,11 +193,15 @@ export function createAutoScroll(options: AutoScrollOptions) {
     () => store.contentRef,
     () => {
       const el = store.scrollRef
+
       if (el && !canScroll(el)) {
         if (store.userScrolled) setStore("userScrolled", false)
+
         return
       }
+
       if (!active()) return
+
       if (store.userScrolled) return
       // ResizeObserver fires after layout, before paint.
       // Keep the bottom locked in the same frame to avoid visible
@@ -188,20 +212,26 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   createEffect(() => {
     const el = store.scrollRef
+
     if (!el) return
     const root = el.closest("main")
+
     if (!root) return
     let connected = el.isConnected
     const contains = (node: Node) => node === el || (node instanceof Element && node.contains(el))
+
     const observer = new MutationObserver((records) => {
       records.forEach((record) => {
         if ([...record.removedNodes].some(contains)) connected = false
+
         if (!record.addedNodes.length || ![...record.addedNodes].some(contains)) return
         const reattached = !connected
         connected = true
+
         if (reattached) scrollToBottom(false)
       })
     })
+
     observer.observe(root, { childList: true })
     onCleanup(() => observer.disconnect())
   })
@@ -209,11 +239,13 @@ export function createAutoScroll(options: AutoScrollOptions) {
   createEffect(
     on(options.working, (working: boolean) => {
       settling = false
+
       if (settleTimer) clearTimeout(settleTimer)
       settleTimer = undefined
 
       if (working) {
         if (!store.userScrolled) scrollToBottom(true)
+
         return
       }
 
@@ -229,6 +261,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
     // update overflow anchoring once the element exists.
     store.userScrolled
     const el = store.scrollRef
+
     if (!el) return
     updateOverflowAnchor(el)
   })
@@ -237,6 +270,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   onCleanup(() => {
     if (settleTimer) clearTimeout(settleTimer)
+
     if (autoTimer) clearTimeout(autoTimer)
   })
 

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./use-filtered-list"
+
 export * from "./create-auto-scroll"

package/src/hooks/use-filtered-list.tsx

@@ -21,6 +21,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
   const [store, setStore] = createStore<{ filter: string }>({ filter: "" })
 
   type Group = { category: string; items: [T, ...T[]] }
+
   const empty: Group[] = []
 
   const [grouped, { refetch }] = createResource(
@@ -32,6 +33,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
       const query = filter ?? ""
       const needle = query.toLowerCase()
       const all = (await Promise.resolve(items)) || []
+
       const result = pipe(
         all,
         (x) => {
@@ -39,10 +41,12 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
           const skipFilter = props.skipFilter
           const filterable = skipFilter ? x.filter((item) => !skipFilter(item)) : x
           const skipped = skipFilter ? x.filter(skipFilter) : []
+
           const filtered =
             !props.filterKeys && Array.isArray(filterable) && filterable.every((e) => typeof e === "string")
               ? (fuzzysort.go(needle, filterable).map((x) => x.target) as T[])
               : fuzzysort.go(needle, filterable, { keys: props.filterKeys! }).map((x) => x.obj)
+
           return skipped.length ? [...filtered, ...skipped] : filtered
         },
         groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
@@ -50,6 +54,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
         map(([k, v]) => ({ category: k, items: props.sortBy ? v.sort(props.sortBy) : v })),
         (groups) => (props.sortGroupsBy ? groups.sort(props.sortGroupsBy) : groups),
       )
+
       return result
     },
     { initialValue: empty },
@@ -64,10 +69,13 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
 
   function initialActive() {
     if (props.noInitialSelection) return ""
+
     if (props.current) return props.key(props.current)
 
     const items = flat()
+
     if (items.length === 0) return ""
+
     return props.key(items[0])
   }
 
@@ -80,9 +88,12 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
   const reset = () => {
     if (props.noInitialSelection) {
       list.setActive("")
+
       return
     }
+
     const all = flat()
+
     if (all.length === 0) return
     list.setActive(props.key(all[0]))
   }
@@ -92,14 +103,17 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
       event.preventDefault()
       const selectedIndex = flat().findIndex((x) => props.key(x) === list.active())
       const selected = flat()[selectedIndex]
+
       if (selected) props.onSelect?.(selected, selectedIndex)
     } else if (event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
       if (event.key === "n" || event.key === "p") {
         event.preventDefault()
+
         const navEvent = new KeyboardEvent("keydown", {
           key: event.key === "n" ? "ArrowDown" : "ArrowUp",
           bubbles: true,
         })
+
         list.onKeyDown(navEvent)
       }
     } else {

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,16 @@ 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.pending": "Pending",
+  "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 +280,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

package/src/i18n/no.ts

@@ -1,4 +1,5 @@
 import { dict as en } from "./en"
+
 type Keys = keyof typeof en
 
 export const dict: Record<Keys, string> = {