@opencode/ui 2.0.23 → 2.0.25

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

@@ -8,7 +8,9 @@ const segmenter =
 
 function first(value: string) {
   if (!value) return ""
+
   if (!segmenter) return Array.from(value)[0] ?? ""
+
   return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
 }
 
@@ -33,14 +35,19 @@ 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" ||
@@ -53,12 +60,14 @@ export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
     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
 }
 
@@ -71,6 +80,7 @@ export interface ProjectAvatarProps extends ComponentProps<"div"> {
 
 export function ProjectAvatar(props: ProjectAvatarProps) {
   const [split, rest] = splitProps(props, ["fallback", "src", "variant", "unread", "class", "classList", "style"])
+
   return (
     <div
       {...rest}

package/src/feedback/loader/loader.tsx

@@ -3,6 +3,7 @@ import "./loader.css"
 
 export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+
   return (
     <svg
       {...rest}

package/src/feedback/toast/description.ts

@@ -5,5 +5,6 @@ export const toastDescriptionLimit = 2000
 
 export function boundToastDescription<T extends { description?: string }>(options: T): T {
   if (!options.description || options.description.length <= toastDescriptionLimit) return options
+
   return { ...options, description: `${options.description.slice(0, toastDescriptionLimit)}…` }
 }

package/src/forms/checkbox/checkbox.tsx

@@ -10,6 +10,7 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>>
 
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
+
   return (
     <Root {...others} data-component="checkbox">
       <Input data-slot="checkbox-checkbox-input" />

package/src/forms/field/field.tsx

@@ -31,9 +31,11 @@ const FieldContext = createContext<FieldContextValue>()
 
 function useField() {
   const ctx = useContext(FieldContext)
+
   if (!ctx) {
     throw new Error("Field subcomponents must be used within <Field>")
   }
+
   return ctx
 }
 
@@ -72,17 +74,22 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     unregisterSuffix: () => setSuffixCount((n) => Math.max(0, n - 1)),
     getDescribedBy: () => {
       const ids: string[] = []
+
       if (prefixCount() > 0) ids.push(prefixId)
+
       if (suffixCount() > 0) ids.push(suffixId)
+
       return ids.length > 0 ? ids.join(" ") : undefined
     },
   }
 
   const syncControlA11y = () => {
     const root = rootRef
+
     if (!root) return
 
     const control = root.querySelector(CONTROL_SELECTOR) as HTMLInputElement | HTMLTextAreaElement | null
+
     if (!control) return
 
     const shell = control.closest(
@@ -93,6 +100,7 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     control.setAttribute("aria-labelledby", labelId)
 
     const describedBy = ctx.getDescribedBy()
+
     if (describedBy) {
       control.setAttribute("aria-describedby", describedBy)
     } else {

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

@@ -10,11 +10,15 @@ export function InlineInput(props: InlineInputProps) {
 
   const style = () => {
     if (!local.style) return { width: local.width }
+
     if (typeof local.style === "string") {
       if (!local.width) return local.style
+
       return `${local.style};width:${local.width}`
     }
+
     if (!local.width) return local.style
+
     return { ...local.style, width: local.width }
   }
 

package/src/forms/radio/radio.tsx

@@ -21,6 +21,7 @@ export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>
 
 export function RadioGroup(props: RadioGroupProps) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
+
   return (
     <Root
       {...others}
@@ -54,6 +55,7 @@ export interface RadioItemProps extends ComponentProps<typeof Item> {
 
 export function RadioItem(props: RadioItemProps) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+
   return (
     <Item
       {...others}

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

@@ -244,6 +244,7 @@ const source = {
   "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",

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> = {

package/src/icons/catalog.ts

@@ -186,6 +186,38 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M4.14908 11.0081H1.76282V1.51758H9.1038V2.55588M14.2225 4.99681H6.75397V14.4873H14.2225V4.99681Z" stroke="currentColor"/>`,
   },
+  "outline-arrow-left": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M2.44442 7.99999H13.5555M6.22221 4.22222L2.44442 7.99999L6.22221 11.7778" stroke="currentColor"/>`,
+  },
+  "outline-arrow-right": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M13.5555 7.99999H2.4444M9.77773 11.7778L13.5555 7.99999L9.77773 4.22222" stroke="currentColor"/>`,
+  },
+  "outline-arrow-up-right": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M12.5 3.5L3.5 12.5M12.5 9.62L12.5 3.5L6.38 3.5" stroke="currentColor"/>`,
+  },
+  "outline-rotate-clockwise": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M14.1992 8C14.1992 9.18669 13.8473 10.3467 13.188 11.3334C12.5288 12.3201 11.5917 13.0892 10.4953 13.5433C9.39897 13.9974 8.19257 14.1162 7.02868 13.8847C5.86479 13.6532 4.7957 13.0818 3.95658 12.2426C3.11747 11.4035 2.54602 10.3344 2.31451 9.17054C2.083 8.00666 2.20182 6.80026 2.65594 5.7039C3.11007 4.60754 3.87911 3.67047 4.8658 3.01118C5.85249 2.35189 7.01253 2 8.19922 2C9.87922 2 11.4859 2.66667 12.6926 3.82667L14.1992 5.33333M10.866 5.33333L14.1992 5.33333L14.1993 2" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,
+  },
+  "outline-globe": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8.00001 14.4445C9.47277 14.4445 10.6667 11.5592 10.6667 8.00001C10.6667 4.44085 9.47277 1.55557 8.00001 1.55557M8.00001 14.4445C6.52725 14.4445 5.33335 11.5592 5.33335 8.00001C5.33335 4.44085 6.52725 1.55557 8.00001 1.55557M8.00001 14.4445C11.5592 14.4445 14.4444 11.5592 14.4444 8C14.4444 4.44083 11.5592 1.55557 8.00001 1.55557M8.00001 14.4445C4.44085 14.4445 1.55556 11.5592 1.55556 8C1.55556 4.44083 4.44085 1.55557 8.00001 1.55557M1.87203 6.00001H14.128M2.03555 10.4445H13.9644" stroke="currentColor"/>`,
+  },
+  "outline-globe-plus": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M7 12.6667C5.71133 12.6667 4.66667 10.1296 4.66667 7C4.66667 3.87039 5.71133 1.33333 7 1.33333C8.2426 1.33333 9.25833 3.69221 9.32933 6.66667" stroke="currentColor" stroke-miterlimit="10"/><path d="M12.6667 6.66667H1.33333" stroke="currentColor"/><path d="M12.6667 7.72825V7C12.6667 3.87039 10.1296 1.33333 7 1.33333C3.8704 1.33333 1.33333 3.87039 1.33333 7C1.33333 10.1296 3.8704 12.6667 7 12.6667H7.58694" stroke="currentColor" stroke-miterlimit="10"/><path d="M9.5 11.5H13.5M11.5 9.5V13.5" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
+  },
+  "outline-cookie": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M14 8.5A6 6 0 1 1 7.5 2a2 2 0 0 0 2.5 2.5 2 2 0 0 0 2.5 2.5c.4.6.9 1.1 1.5 1.5Z" stroke="currentColor" stroke-linejoin="round"/><path d="M5.5 6.5h.01M5.5 10h.01M8.5 9h.01M10.5 11.5h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`,
+  },
+  "outline-browser-annotate": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M10.6667 2H14V5.33333M2 5.33333V2H5.33333M2 10.6667V14H5.33333" stroke="currentColor" stroke-linecap="square"/><path d="M11.8571 11.8572L14 14M6.50008 6.50033L14.0001 9.00033L9.00008 14.0003L6.50008 6.50033Z" stroke="currentColor" stroke-linecap="square"/>`,
+  },
   "arrow-up-right": {
     viewBox: "0 0 16 16",
     body: `<path d="M11 9.56V5H6.44M11 5L5 11" stroke="currentColor"/>`,
@@ -222,6 +254,10 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
   },
+  "outline-undo": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M2 10L4.25193 7.76999C7.29213 4.7594 12.4119 5.77372 14.0747 9.71606" stroke="currentColor"/><path d="M2 6V10H6" stroke="currentColor" stroke-linecap="square"/>`,
+  },
   "outline-reset": {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,

package/src/icons/icon/icon.tsx

@@ -63,6 +63,8 @@ export function Icon(props: IconProps) {
       data-directional={
         iconName() === "arrow-left" ||
         iconName() === "arrow-right" ||
+        iconName() === "outline-arrow-left" ||
+        iconName() === "outline-arrow-right" ||
         iconName() === "chevron-left" ||
         iconName() === "chevron-right"
           ? ""

package/src/layout/divider/divider.tsx

@@ -5,6 +5,7 @@ export interface DividerProps extends ComponentProps<"div"> {}
 
 export function Divider(props: DividerProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <div
       {...rest}