@adecore/agents-react 0.35.4 → 0.36.0

package/dist/chat/ui/Pickers.js

@@ -13,11 +13,10 @@ import { ModelMarks } from './ModelMarks.js';
 import { pickerEntriesOf } from '../logic/picker-entries.js';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences.js';
 import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash.js';
-import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
+import { Button, Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
 import { useHostMachineLabel } from '../../host-hooks.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const triggerClass = 'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 text-xs text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text';
-const chipClass = 'flex h-6 min-w-0 shrink items-center gap-1.5 whitespace-nowrap rounded-md bg-surface-hover px-2 text-xs text-text hover:bg-surface-active data-[popup-open]:bg-surface-active';
 /*
  * Which model answers: a search field over one group per provider, with the legacy models behind an
  * expander. Before the first message the list carries every installed CLI, so picking another
@@ -251,7 +250,11 @@ export function ModelPicker(t0) {
   let t18;
   if ($[37] !== chip || $[38] !== current || $[39] !== provider || $[40] !== trigger) {
     t18 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
-      className: chipClass,
+      render: /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        size: "sm",
+        className: "min-w-0 shrink gap-1.5"
+      }),
       children: [chip.mark === "logo" ? /*#__PURE__*/_jsx(ProviderLogo, {
         provider: provider,
         size: 12

package/dist/chat/ui/RunSettings.js

@@ -422,7 +422,7 @@ export function RunSettings(t0) {
   } else {
     t19 = $[56];
   }
-  const t20 = open ? "border-accent bg-accent-soft" : "border-border hover:bg-surface-hover";
+  const t20 = open ? "border-accent bg-accent-soft" : "border-border hover:bg-surface-hover-edged";
   let t21;
   if ($[57] !== t20) {
     t21 = clsx("flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5", t20);
@@ -1611,7 +1611,7 @@ function OptionRow(t0) {
       value: value,
       onValueChange: t4,
       "aria-label": t5,
-      className: "flex gap-0.5 rounded-md bg-surface-sunken p-0.5",
+      className: "flex gap-0.5 rounded-md bg-surface-sunken p-0.5 dark:bg-surface-idle",
       children: t6
     });
     $[45] = option.label;

package/dist/chat/ui/composer/ComposerControls.js

@@ -67,7 +67,7 @@ export function ComposerControls(t0) {
       name: true,
       children: /*#__PURE__*/_jsx("button", {
         type: "button",
-        className: "grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50",
+        className: "grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover-edged hover:text-text disabled:opacity-50",
         disabled: !writable,
         onClick: () => fileInputRef.current?.click(),
         children: /*#__PURE__*/_jsx(Icon, {

package/dist/chat/ui/rows/MessageRows.js

@@ -129,7 +129,7 @@ function AttachmentLink(t0) {
       target: "_blank",
       rel: "noreferrer",
       "aria-disabled": t5,
-      className: "flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover",
+      className: "flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover-edged",
       children: [t7, t8, t10]
     });
     $[12] = attachment.name;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.35.4",
+  "version": "0.36.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.35.4",
-    "@adecore/editor": "0.35.4",
-    "@adecore/editor-react": "0.35.4",
-    "@adecore/intelligent-ui": "0.35.4",
-    "@adecore/merge": "0.35.4",
+    "@adecore/agent-contracts": "0.36.0",
+    "@adecore/editor": "0.36.0",
+    "@adecore/editor-react": "0.36.0",
+    "@adecore/intelligent-ui": "0.36.0",
+    "@adecore/merge": "0.36.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.35.4",
+    "@adecore/ui": "^0.36.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.35.4",
+    "@adecore/ui": "0.36.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/Pickers.tsx

@@ -13,15 +13,12 @@ import { ModelMarks } from './ModelMarks';
 import { pickerEntriesOf, type PickerEntry } from '../logic/picker-entries';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences';
 import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
-import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
+import { Button, Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
 import { useHostMachineLabel } from '../../host-hooks';
 
 const triggerClass =
     'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 text-xs text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text';
 
-const chipClass =
-    'flex h-6 min-w-0 shrink items-center gap-1.5 whitespace-nowrap rounded-md bg-surface-hover px-2 text-xs text-text hover:bg-surface-active data-[popup-open]:bg-surface-active';
-
 interface ModelPickerProps {
     /* Whose models may be picked: every installed chat CLI before the first message, the chat's own after it. */
     providers: ProviderInfo[];
@@ -35,7 +32,7 @@ interface ModelPickerProps {
     kbd?: string | null;
     /* Where the popup opens: over the composer by default, below the trigger in a form. */
     side?: 'top' | 'bottom';
-    /* `chip` names the provider beside the model, on a ground of its own, for a picker that sits in a card or a form. */
+    /* `chip` names the provider beside the model on a secondary button, for a picker that sits in a card or a form. */
     trigger?: 'plain' | 'chip';
     /* Where the focus goes when the popup closes; by default back to the trigger. */
     finalFocus?: RefObject<HTMLElement | null>;
@@ -149,7 +146,7 @@ export function ModelPicker({
         <Popover.Root open={open} onOpenChange={setOpen}>
             <Tooltip label={owner ? `${owner.name} · ${current}` : t('pickers.model.choose')} kbd={kbd ?? undefined}>
                 {trigger === 'chip' ? (
-                    <Popover.Trigger className={chipClass}>
+                    <Popover.Trigger render={<Button variant="secondary" size="sm" className="min-w-0 shrink gap-1.5" />}>
                         {chip.mark === 'logo' ? <ProviderLogo provider={provider as UsageProvider} size={12} /> : <AgentIcon kind={provider} size={12} />}
                         <span className="truncate">{chip.name}</span>
                         <span className="max-w-32 truncate text-text-muted">{chip.model}</span>

package/src/chat/ui/RunSettings.tsx

@@ -312,7 +312,7 @@ export function RunSettings({
                     disabled={disabled}
                     className={clsx(
                         'flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5',
-                        open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover'
+                        open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover-edged'
                     )}
                 >
                     <AgentIcon kind={provider} size={14} className="shrink-0" />
@@ -665,7 +665,7 @@ function OptionRow({ option, selection, onChange }: { option: ModelOptionDescrip
                 value={value}
                 onValueChange={(next: string) => onChange(next)}
                 aria-label={option.label}
-                className="flex gap-0.5 rounded-md bg-surface-sunken p-0.5"
+                className="flex gap-0.5 rounded-md bg-surface-sunken p-0.5 dark:bg-surface-idle"
             >
                 {option.choices.map((choice) => (
                     <Menu.RadioItem

package/src/chat/ui/composer/ComposerControls.tsx

@@ -76,7 +76,7 @@ export function ComposerControls({
                 <Tooltip label={t('composer.attach')} name>
                     <button
                         type="button"
-                        className="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50"
+                        className="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover-edged hover:text-text disabled:opacity-50"
                         disabled={!writable}
                         onClick={() => fileInputRef.current?.click()}
                     >

package/src/chat/ui/rows/MessageRows.tsx

@@ -65,7 +65,7 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
                 target="_blank"
                 rel="noreferrer"
                 aria-disabled={url === null}
-                className="flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover"
+                className="flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover-edged"
             >
                 <span className="flex h-6 min-w-6 items-center justify-center self-start rounded-md border border-border px-1.5 text-xs font-medium text-text-muted">
                     {badge ?? <Icon icon={File} size={12} />}