@opencode-ai/ui 0.0.0-dev-17746 → 0.0.0-dev-202608201751

package/src/i18n/th.ts

@@ -151,6 +151,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} ค้นหาเว็บ",
   "ui.tool.shell": "เชลล์",
   "ui.tool.patch": "แพตช์",
+  "ui.tool.todos": "รายการงาน",
+  "ui.tool.todos.read": "อ่านรายการงาน",
   "ui.tool.questions": "คำถาม",
   "ui.tool.questions.numbered": "คำถาม {{number}}",
   "ui.tool.agent": "เอเจนต์ {{type}}",

package/src/i18n/tk.ts

@@ -143,6 +143,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} Web gözlegi",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "Patch",
+  "ui.tool.todos": "Edilmeli işler",
+  "ui.tool.todos.read": "Edilmeli zatlary okaň",
   "ui.tool.questions": "Soraglar",
   "ui.tool.questions.numbered": "Soraglar {{number}}",
   "ui.tool.agent": "{{type}} Agenti",

package/src/i18n/tr.ts

@@ -157,6 +157,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} Web araması",
   "ui.tool.shell": "Kabuk",
   "ui.tool.patch": "Yama",
+  "ui.tool.todos": "Görevler",
+  "ui.tool.todos.read": "Görevleri oku",
   "ui.tool.questions": "Sorular",
   "ui.tool.questions.numbered": "Sorular {{number}}",
   "ui.tool.agent": "{{type}} ajanı",

package/src/i18n/uk.ts

@@ -167,6 +167,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} Веб-пошук",
   "ui.tool.shell": "Оболонка",
   "ui.tool.patch": "Патч",
+  "ui.tool.todos": "Завдання",
+  "ui.tool.todos.read": "Читати завдання",
   "ui.tool.questions": "Запитання",
   "ui.tool.questions.numbered": "Запитання {{number}}",
   "ui.tool.agent": "Агент {{type}}",

package/src/i18n/ur.ts

@@ -144,6 +144,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} ویب تلاش",
   "ui.tool.shell": "شیل",
   "ui.tool.patch": "پیچ",
+  "ui.tool.todos": "زیر التوا کام",
+  "ui.tool.todos.read": "زیر التوا کام پڑھیں",
   "ui.tool.questions": "سوالات",
   "ui.tool.questions.numbered": "سوالات {{number}}",
   "ui.tool.agent": "{{type}} ایجنٹ",

package/src/i18n/uz.ts

@@ -146,6 +146,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} veb-qidiruv",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "Yamoq",
+  "ui.tool.todos": "Vazifalar",
+  "ui.tool.todos.read": "Vazifalarni o'qing",
   "ui.tool.questions": "Savollar",
   "ui.tool.questions.numbered": "Savollar {{number}}",
   "ui.tool.agent": "{{type}} agenti",

package/src/i18n/vi.ts

@@ -143,6 +143,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} Tìm kiếm trên web",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "Bản vá",
+  "ui.tool.todos": "Việc cần làm",
+  "ui.tool.todos.read": "Đọc việc cần làm",
   "ui.tool.questions": "Câu hỏi",
   "ui.tool.questions.numbered": "Câu hỏi {{number}}",
   "ui.tool.agent": "Tác nhân {{type}}",

package/src/i18n/zh.ts

@@ -153,6 +153,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} 网页搜索",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "补丁",
+  "ui.tool.todos": "待办",
+  "ui.tool.todos.read": "读取待办",
   "ui.tool.questions": "问题",
   "ui.tool.questions.numbered": "问题 {{number}}",
   "ui.tool.agent": "{{type}} 智能体",

package/src/i18n/zht.ts

@@ -153,6 +153,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} 網頁搜尋",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "修補",
+  "ui.tool.todos": "待辦",
+  "ui.tool.todos.read": "讀取待辦",
   "ui.tool.questions": "問題",
   "ui.tool.questions.numbered": "問題 {{number}}",
   "ui.tool.agent": "{{type}} 代理程式",

package/src/styles/index.css

@@ -6,31 +6,47 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../data-display/accordion/accordion.css" layer(components);
+@import "../components/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
+@import "../components/avatar.css" layer(components);
+@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../forms/checkbox/checkbox.css" layer(components);
+@import "../components/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
+@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
+@import "../components/dropdown-menu.css" layer(components);
+@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
+@import "../components/icon.css" layer(components);
+@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../forms/inline-input/inline-input.css" layer(components);
+@import "../components/keybind.css" layer(components);
 @import "../components/text-field.css" layer(components);
+@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
+@import "../components/progress-circle.css" layer(components);
+@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
+@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
+@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../navigation/tabs/tabs.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tag.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
+@import "../components/text-shimmer.css" layer(components);
+@import "../components/toast.css" layer(components);
+@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/index.css

@@ -1,21 +1,7 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source(none);
-@source "../../../../app/src";
-@source "../../../../app/index.html";
-@source not "../../../../app/src/i18n";
-@source not "../../../../app/src/**/*.test.{ts,tsx}";
-@source "../../../../desktop/src/renderer";
-@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
-@source "../../../../enterprise/src";
-@source "../../../../session-ui/src";
-@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
-@source "../../../../storybook";
-@source "../../../src";
-@source not "../../../src/assets";
-@source not "../../../src/i18n";
-@source not "../../../src/**/*.test.{ts,tsx}";
+@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
 @import "./utilities.css";
 
 @import "../index.css";

package/src/theme/context.tsx

@@ -84,9 +84,8 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
-  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
-  return "oc-2"
+function normalize(id: string | null | undefined) {
+  return id === "oc-1" ? "oc-2" : id
 }
 
 function read(key: string) {
@@ -178,12 +177,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-    const themeId = resolveStoredTheme(rawTheme)
-    if (rawTheme && rawTheme !== themeId) {
-      write(STORAGE_KEYS.THEME_ID, themeId)
-      clear()
-    }
+    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -200,7 +194,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -239,11 +233,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = resolveStoredTheme(e.newValue, store.themes)
-        if (next !== e.newValue) {
-          write(STORAGE_KEYS.THEME_ID, next)
-          clear()
-        }
+        const next = normalize(e.newValue)
+        if (!next) return
+        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -270,8 +262,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
+      const rawTheme = read(STORAGE_KEYS.THEME_ID)
+      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -293,7 +285,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -333,7 +325,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = id
+        const next = normalize(id)
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)

package/src/theme/themes/oc-2.json

@@ -25,7 +25,7 @@
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
-      "icon-weak-base": "C7C7C7",
+      "icon-weak-base": "#C7C7C7",
       "surface-raised-base": "#F3F3F3",
       "surface-raised-base-hover": "#EDEDED",
       "surface-base": "#F8F8F8",

package/src/v2/components/accordion-v2.css

@@ -0,0 +1,139 @@
+[data-component="accordion-v2"] {
+  --accordion-v2-fg: var(--v2-text-text-base);
+  --accordion-v2-icon: var(--v2-icon-icon-base);
+  --accordion-v2-border: var(--v2-border-border-strong);
+  --accordion-v2-bg: var(--v2-background-bg-base);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
+  overflow: hidden;
+
+  color: var(--accordion-v2-fg);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="accordion-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-item"]:last-child {
+  box-shadow: none;
+}
+
+[data-slot="accordion-v2-header"] {
+  display: flex;
+  margin: 0;
+}
+
+[data-component="accordion-v2-trigger"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  width: 100%;
+  min-height: 30px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: default;
+  user-select: none;
+
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--accordion-v2-fg);
+  text-align: left;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 30px;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--accordion-v2-icon);
+  transition: transform 150ms ease;
+}
+
+[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
+  transform: rotate(180deg);
+}
+
+[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-trigger"][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-component="accordion-v2-content"] {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 140%;
+  color: var(--accordion-v2-fg);
+}
+
+[data-component="accordion-v2-content"][data-expanded] {
+  animation: accordion-v2-down 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"][data-closed] {
+  animation: accordion-v2-up 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding: 12px;
+}
+
+@keyframes accordion-v2-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes accordion-v2-up {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/v2/components/accordion-v2.tsx

@@ -0,0 +1,86 @@
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
+import "./accordion-v2.css"
+
+const ChevronDown: Component = () => (
+  <svg
+    data-slot="accordion-v2-chevron"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
+  </svg>
+)
+
+export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
+export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideChevron?: boolean
+}
+export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
+}
+
+function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.Item
+      {...r}
+      data-component="accordion-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+      {s.children}
+    </Kobalte.Header>
+  )
+}
+
+function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
+  return (
+    <Kobalte.Trigger
+      {...r}
+      data-component="accordion-v2-trigger"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
+      <Show when={!s.hideChevron}>
+        <ChevronDown />
+      </Show>
+    </Kobalte.Trigger>
+  )
+}
+
+function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...r}
+      data-component="accordion-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <div data-slot="accordion-v2-content-inner">{s.children}</div>
+    </Kobalte.Content>
+  )
+}
+
+export const AccordionV2 = Object.assign(AccordionV2Root, {
+  Item: AccordionV2Item,
+  Header: AccordionV2Header,
+  Trigger: AccordionV2Trigger,
+  Content: AccordionV2Content,
+})

package/src/{data-display/avatar/avatar.tsx → v2/components/avatar-v2.tsx}

@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./avatar.css"
+import "./avatar-v2.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl

package/src/{data-display/badge/badge.css → v2/components/badge-v2.css}

@@ -31,22 +31,3 @@
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
-
-[data-component="tag"][data-appearance="standard"] {
-  height: 18px;
-  padding: 0 6px;
-  border-radius: var(--radius-xs);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-  letter-spacing: var(--letter-spacing-normal);
-  font-variant-numeric: normal;
-}
-
-[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
-  border: 0.5px solid var(--border-weak-base);
-  background: var(--surface-raised-base);
-  color: var(--text-base);
-}

package/src/{data-display/badge/badge.tsx → v2/components/badge-v2.tsx}

@@ -1,18 +1,16 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./badge.css"
+import "./badge-v2.css"
 
-export interface BadgeProps extends ComponentProps<"span"> {
-  appearance?: "standard" | "compact"
+export interface TagProps extends ComponentProps<"span"> {
   variant?: "neutral" | "accent"
 }
 
-export function Badge(props: BadgeProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
-      data-appearance={split.appearance ?? "compact"}
       data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,

package/src/{actions/button/button.tsx → v2/components/button-v2.tsx}

@@ -1,21 +1,21 @@
-import { Root } from "@kobalte/core/button"
+import { Button as Kobalte } from "@kobalte/core/button"
 import { type ComponentProps, Show, createMemo, splitProps } from "solid-js"
-import { Icon, type IconProps } from "@opencode-ai/ui/icon"
-import "./button.css"
+import { Icon, type IconProps } from "./icon"
+import "./button-v2.css"
 
-export interface ButtonProps
-  extends ComponentProps<typeof Root>,
+export interface ButtonV2Props
+  extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
   variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
   icon?: IconProps["name"]
 }
 
-export function Button(props: ButtonProps) {
+export function ButtonV2(props: ButtonV2Props) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
   const resolvedIcon = createMemo(() => split.icon)
   return (
-    <Root
+    <Kobalte
       {...rest}
       data-component="button-v2"
       data-size={split.size || "normal"}
@@ -30,6 +30,6 @@ export function Button(props: ButtonProps) {
         <Icon name={resolvedIcon()!} />
       </Show>
       {props.children}
-    </Root>
+    </Kobalte>
   )
 }