@nextclaw/ui 0.15.20 → 0.15.22

package/src/features/notifications/components/app-notification-toast.tsx

@@ -0,0 +1,80 @@
+import { Link } from "react-router-dom";
+
+export type AppNotificationToastProps = {
+  title: string;
+  description?: string;
+  href?: string;
+  iconSrc?: string;
+  ariaLabel?: string;
+  onDismiss: () => void;
+};
+
+const NOTIFICATION_CARD_CLASS =
+  "group ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] items-center gap-3 rounded-[20px] border border-border/80 bg-background px-[18px] py-3 text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+
+function AppNotificationContent({
+  title,
+  description,
+  iconSrc,
+}: Pick<AppNotificationToastProps, "title" | "description" | "iconSrc">) {
+  return (
+    <>
+      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-border/80 bg-background p-[3px]">
+        <img
+          aria-hidden="true"
+          alt=""
+          src={iconSrc ?? "/logo.svg"}
+          className="h-full w-full object-contain"
+        />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[15px] font-semibold leading-5 tracking-[-0.01em]">
+          {title}
+        </span>
+        {description ? (
+          <span className="mt-0.5 block truncate text-[14px] leading-5 text-muted-foreground">
+            {description}
+          </span>
+        ) : null}
+      </span>
+    </>
+  );
+}
+
+export function AppNotificationToast({
+  title,
+  description,
+  href,
+  iconSrc,
+  ariaLabel,
+  onDismiss,
+}: AppNotificationToastProps) {
+  const accessibleLabel = ariaLabel ?? [title, description].filter(Boolean).join(": ");
+
+  if (href) {
+    return (
+      <Link
+        to={href}
+        aria-label={accessibleLabel}
+        className={NOTIFICATION_CARD_CLASS}
+        onClick={onDismiss}
+      >
+        <AppNotificationContent
+          title={title}
+          description={description}
+          iconSrc={iconSrc}
+        />
+      </Link>
+    );
+  }
+
+  return (
+    <div role="status" aria-label={accessibleLabel} className={NOTIFICATION_CARD_CLASS}>
+      <AppNotificationContent
+        title={title}
+        description={description}
+        iconSrc={iconSrc}
+      />
+    </div>
+  );
+}

package/src/features/notifications/index.ts

@@ -0,0 +1,8 @@
+export {
+  AppNotificationToast,
+  type AppNotificationToastProps,
+} from "./components/app-notification-toast";
+export {
+  AppNotificationManager,
+  type AppNotification,
+} from "./managers/app-notification.manager";

package/src/features/notifications/managers/__tests__/app-notification.manager.test.ts

@@ -0,0 +1,75 @@
+import { isValidElement } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  AppNotificationManager,
+  AppNotificationToast,
+  type AppNotificationToastProps,
+} from "@/features/notifications";
+
+const mocks = vi.hoisted(() => ({
+  custom: vi.fn(),
+  dismiss: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    custom: mocks.custom,
+    dismiss: mocks.dismiss,
+  },
+}));
+
+describe("AppNotificationManager", () => {
+  beforeEach(() => {
+    mocks.custom.mockReset();
+    mocks.dismiss.mockReset();
+    mocks.custom.mockReturnValue("toast-result");
+  });
+
+  it("uses the shared custom notification surface and stable lifecycle defaults", () => {
+    const manager = new AppNotificationManager();
+    const result = manager.show({
+      id: "reply:message-1",
+      title: "Research complete",
+      description: "The findings are ready.",
+      href: "/chat/session-1",
+    });
+
+    expect(result).toBe("toast-result");
+    expect(mocks.custom).toHaveBeenCalledWith(expect.any(Function), {
+      id: "reply:message-1",
+      duration: 8_000,
+      unstyled: true,
+    });
+
+    const renderer = mocks.custom.mock.calls[0]?.[0] as (
+      id: string | number,
+    ) => unknown;
+    const element = renderer("toast-rendered");
+    expect(isValidElement<AppNotificationToastProps>(element)).toBe(true);
+    if (!isValidElement<AppNotificationToastProps>(element)) {
+      throw new Error("Expected AppNotificationToast element");
+    }
+    expect(element.type).toBe(AppNotificationToast);
+    expect(element.props).toEqual(expect.objectContaining({
+      title: "Research complete",
+      description: "The findings are ready.",
+      href: "/chat/session-1",
+    }));
+
+    element.props.onDismiss();
+    expect(mocks.dismiss).toHaveBeenCalledWith("toast-rendered");
+  });
+
+  it("supports a caller-owned duration and explicit dismiss", () => {
+    const manager = new AppNotificationManager();
+    manager.show({ title: "Saved", durationMs: 2_500 });
+    manager.dismiss("saved-toast");
+
+    expect(mocks.custom).toHaveBeenCalledWith(expect.any(Function), {
+      id: undefined,
+      duration: 2_500,
+      unstyled: true,
+    });
+    expect(mocks.dismiss).toHaveBeenCalledWith("saved-toast");
+  });
+});

package/src/features/notifications/managers/app-notification.manager.ts

@@ -0,0 +1,41 @@
+import { createElement } from "react";
+import { toast } from "sonner";
+import { AppNotificationToast } from "@/features/notifications/components/app-notification-toast";
+
+export type AppNotification = {
+  id?: string | number;
+  title: string;
+  description?: string;
+  href?: string;
+  iconSrc?: string;
+  ariaLabel?: string;
+  durationMs?: number;
+};
+
+const DEFAULT_NOTIFICATION_DURATION_MS = 8_000;
+
+export class AppNotificationManager {
+  show = (notification: AppNotification): string | number =>
+    toast.custom(
+      (toastId) =>
+        createElement(AppNotificationToast, {
+          title: notification.title,
+          description: notification.description,
+          href: notification.href,
+          iconSrc: notification.iconSrc,
+          ariaLabel: notification.ariaLabel,
+          onDismiss: () => {
+            toast.dismiss(toastId);
+          },
+        }),
+      {
+        id: notification.id,
+        duration: notification.durationMs ?? DEFAULT_NOTIFICATION_DURATION_MS,
+        unstyled: true,
+      },
+    );
+
+  dismiss = (id: string | number): void => {
+    toast.dismiss(id);
+  };
+}

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -118,7 +118,7 @@ function PanelAppMenuItem({
       type="button"
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -17,7 +17,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onOpenApps}
-        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         title={t('appsTitle')}
         aria-label={t('appsTitle')}
       >
@@ -32,7 +32,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onRefresh}
-        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         title={t('panelAppsRefreshCurrent')}
         aria-label={t('panelAppsRefreshCurrent')}
       >

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -104,7 +104,7 @@ export function PanelAppsList({
             <TooltipProvider delayDuration={250}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-accent hover:text-accent-foreground" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
+                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" className="max-w-[320px] break-all font-mono text-xs">{panelApps.data.panelsPath}</TooltipContent>
               </Tooltip>
@@ -114,7 +114,7 @@ export function PanelAppsList({
         <button
           type="button"
           onClick={() => void panelApps.refetch()}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
           title={t('panelAppsRefresh')}
           aria-label={t('panelAppsRefresh')}
         >
@@ -204,7 +204,7 @@ function PanelAppsEmptyGuide({
         <button
           type="button"
           onClick={onRefresh}
-          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
         >
           <RefreshCw className="h-3.5 w-3.5" />
           {t('panelAppsRefresh')}
@@ -245,7 +245,7 @@ function PanelAppsEmptyGuideStep({
       <button
         type="button"
         onClick={onAction}
-        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
       >
         {content}
       </button>

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -463,7 +463,7 @@ function ServiceAppMenuItem({
       type="button"
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}

package/src/features/settings/components/config/provider-auth-section.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/shared/components/ui/button';
+import { MaskedInput } from '@/shared/components/common/masked-input';
 import { Label } from '@/shared/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { t } from '@/shared/lib/i18n';
@@ -6,6 +7,10 @@ import type { ProviderTemplateView } from '@/shared/lib/api';
 import { ProviderPillSelector } from './provider-pill-selector';
 
 type ProviderAuthSectionProps = {
+  apiKey: string;
+  apiKeyRequired: boolean;
+  apiKeySet: boolean;
+  apiKeyPlaceholder: string;
   providerAuth: ProviderTemplateView['auth'];
   providerAuthNote: string;
   providerAuthMethodOptions: Array<{ value: string; label: string }>;
@@ -20,10 +25,15 @@ type ProviderAuthSectionProps = {
   importPending: boolean;
   authSessionId: string | null;
   authStatusMessage: string;
+  onApiKeyChange: (value: string) => void;
 };
 
 export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   const {
+    apiKey,
+    apiKeyRequired,
+    apiKeySet,
+    apiKeyPlaceholder,
     providerAuth,
     providerAuthNote,
     providerAuthMethodOptions,
@@ -37,75 +47,96 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
     startPending,
     importPending,
     authSessionId,
-    authStatusMessage
+    authStatusMessage,
+    onApiKeyChange
   } = props;
 
-  if (providerAuth?.kind !== 'device_code') return null;
+  const apiKeyField = apiKeyRequired ? (
+    <div className='space-y-2'>
+      <Label htmlFor='apiKey' className='text-sm font-medium text-foreground'>
+        {t('apiKey')}
+      </Label>
+      <MaskedInput
+        id='apiKey'
+        value={apiKey}
+        isSet={apiKeySet}
+        onChange={(event) => onApiKeyChange(event.target.value)}
+        placeholder={apiKeyPlaceholder}
+        className='rounded-xl'
+      />
+      <p className='text-xs text-muted-foreground'>{t('leaveBlankToKeepUnchanged')}</p>
+    </div>
+  ) : null;
+
+  if (providerAuth?.kind !== 'device_code') return apiKeyField;
 
   return (
-    <div className='space-y-2 rounded-xl bg-muted/45 p-3'>
-      <Label className='text-sm font-medium text-foreground'>
-        {providerAuth.displayName || t('providerAuthSectionTitle')}
-      </Label>
-      {providerAuthNote ? <p className='text-xs text-muted-foreground'>{providerAuthNote}</p> : null}
-      {providerAuthMethodsCount > 1 ? (
-        <div className='space-y-2'>
-          <Label className='text-xs font-medium text-foreground'>{t('providerAuthMethodLabel')}</Label>
-          {shouldUseAuthMethodPills ? (
-            <ProviderPillSelector
-              value={resolvedAuthMethodId}
-              onChange={onAuthMethodChange}
-              options={providerAuthMethodOptions}
-            />
-          ) : (
-            <Select value={resolvedAuthMethodId} onValueChange={onAuthMethodChange}>
-              <SelectTrigger className='h-8 rounded-lg'>
-                <SelectValue placeholder={t('providerAuthMethodPlaceholder')} />
-              </SelectTrigger>
-              <SelectContent>
-                {providerAuthMethodOptions.map((method) => (
-                  <SelectItem key={method.value} value={method.value}>
-                    {method.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-          {selectedAuthMethodHint ? <p className='text-xs text-muted-foreground'>{selectedAuthMethodHint}</p> : null}
-        </div>
-      ) : null}
-      <div className='flex flex-wrap items-center gap-2'>
-        <Button
-          type='button'
-          variant='outline'
-          size='sm'
-          onClick={onStartProviderAuth}
-          disabled={startPending || Boolean(authSessionId)}
-        >
-          {startPending
-            ? t('providerAuthStarting')
-            : authSessionId
-              ? t('providerAuthAuthorizing')
-              : t('providerAuthAuthorizeInBrowser')}
-        </Button>
-        {providerAuth.supportsCliImport ? (
+    <>
+      {apiKeyField}
+      <div className='space-y-2 rounded-xl bg-muted/45 p-3'>
+        <Label className='text-sm font-medium text-foreground'>
+          {providerAuth.displayName || t('providerAuthSectionTitle')}
+        </Label>
+        {providerAuthNote ? <p className='text-xs text-muted-foreground'>{providerAuthNote}</p> : null}
+        {providerAuthMethodsCount > 1 ? (
+          <div className='space-y-2'>
+            <Label className='text-xs font-medium text-foreground'>{t('providerAuthMethodLabel')}</Label>
+            {shouldUseAuthMethodPills ? (
+              <ProviderPillSelector
+                value={resolvedAuthMethodId}
+                onChange={onAuthMethodChange}
+                options={providerAuthMethodOptions}
+              />
+            ) : (
+              <Select value={resolvedAuthMethodId} onValueChange={onAuthMethodChange}>
+                <SelectTrigger className='h-8 rounded-lg'>
+                  <SelectValue placeholder={t('providerAuthMethodPlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {providerAuthMethodOptions.map((method) => (
+                    <SelectItem key={method.value} value={method.value}>
+                      {method.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            {selectedAuthMethodHint ? <p className='text-xs text-muted-foreground'>{selectedAuthMethodHint}</p> : null}
+          </div>
+        ) : null}
+        <div className='flex flex-wrap items-center gap-2'>
           <Button
             type='button'
             variant='outline'
             size='sm'
-            onClick={onImportProviderAuthFromCli}
-            disabled={importPending}
+            onClick={onStartProviderAuth}
+            disabled={startPending || Boolean(authSessionId)}
           >
-            {importPending ? t('providerAuthImporting') : t('providerAuthImportFromCli')}
+            {startPending
+              ? t('providerAuthStarting')
+              : authSessionId
+                ? t('providerAuthAuthorizing')
+                : t('providerAuthAuthorizeInBrowser')}
           </Button>
-        ) : null}
-        {authSessionId ? (
-          <span className='text-xs text-muted-foreground'>
-            {t('providerAuthSessionLabel')}: {authSessionId.slice(0, 8)}…
-          </span>
-        ) : null}
+          {providerAuth.supportsCliImport ? (
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={onImportProviderAuthFromCli}
+              disabled={importPending}
+            >
+              {importPending ? t('providerAuthImporting') : t('providerAuthImportFromCli')}
+            </Button>
+          ) : null}
+          {authSessionId ? (
+            <span className='text-xs text-muted-foreground'>
+              {t('providerAuthSessionLabel')}: {authSessionId.slice(0, 8)}…
+            </span>
+          ) : null}
+        </div>
+        {authStatusMessage ? <p className='text-xs text-muted-foreground'>{authStatusMessage}</p> : null}
       </div>
-      {authStatusMessage ? <p className='text-xs text-muted-foreground'>{authStatusMessage}</p> : null}
-    </div>
+    </>
   );
 }

package/src/features/settings/components/config/provider-form.tsx

@@ -9,7 +9,6 @@ import {
   useTestProviderConnection,
   useUpdateProvider
 } from '@/shared/hooks/use-config';
-import { MaskedInput } from '@/shared/components/common/masked-input';
 import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
@@ -445,7 +444,11 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
             >
               <Trash2 className='h-4 w-4' />
             </button>
-            <ProviderStatusBadge enabled={context.currentEnabled} apiKeySet={context.resolvedProviderConfig.apiKeySet} />
+            <ProviderStatusBadge
+              enabled={context.currentEnabled}
+              apiKeyRequired={context.resolvedProviderConfig.apiKeyRequired}
+              apiKeySet={context.resolvedProviderConfig.apiKeySet}
+            />
           </div>
         </div>
       </ConfigSplitPaneHeader>
@@ -467,22 +470,11 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
             <p className='text-xs text-muted-foreground'>{t('providerDisplayNameHelpShort')}</p>
           </div>
 
-          <div className='space-y-2'>
-            <Label htmlFor='apiKey' className='text-sm font-medium text-foreground'>
-              {t('apiKey')}
-            </Label>
-            <MaskedInput
-              id='apiKey'
-              value={apiKey}
-              isSet={context.resolvedProviderConfig.apiKeySet}
-              onChange={(e) => onApiKeyChange(e.target.value)}
-              placeholder={context.apiKeyHint?.placeholder ?? t('enterApiKey')}
-              className='rounded-xl'
-            />
-            <p className='text-xs text-muted-foreground'>{t('leaveBlankToKeepUnchanged')}</p>
-          </div>
-
           <ProviderAuthSection
+            apiKey={apiKey}
+            apiKeyRequired={context.resolvedProviderConfig.apiKeyRequired !== false}
+            apiKeySet={context.resolvedProviderConfig.apiKeySet}
+            apiKeyPlaceholder={context.apiKeyHint?.placeholder ?? t('enterApiKey')}
             providerAuth={context.providerAuth}
             providerAuthNote={context.providerAuth?.note?.[language] || context.providerAuth?.note?.en || context.providerAuth?.displayName || ''}
             providerAuthMethodOptions={context.providerAuthMethodOptions}
@@ -497,6 +489,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
             importPending={importPending}
             authSessionId={authSessionId}
             authStatusMessage={authStatusMessage}
+            onApiKeyChange={onApiKeyChange}
           />
 
           <div className='space-y-2'>

package/src/features/settings/components/config/provider-status-badge.tsx

@@ -3,13 +3,15 @@ import { t } from '@/shared/lib/i18n';
 
 type ProviderStatusBadgeProps = {
   enabled: boolean;
+  apiKeyRequired?: boolean;
   apiKeySet: boolean;
   className?: string;
 };
 
-export function ProviderStatusBadge({ apiKeySet, className, enabled }: ProviderStatusBadgeProps) {
+export function ProviderStatusBadge({ apiKeyRequired = true, apiKeySet, className, enabled }: ProviderStatusBadgeProps) {
   if (!enabled) {
     return <StatusDot status="inactive" label={t('disabled')} className={className} />;
   }
-  return <StatusDot status={apiKeySet ? 'ready' : 'setup'} label={apiKeySet ? t('statusReady') : t('statusSetup')} className={className} />;
+  const isReady = !apiKeyRequired || apiKeySet;
+  return <StatusDot status={isReady ? 'ready' : 'setup'} label={isReady ? t('statusReady') : t('statusSetup')} className={className} />;
 }

package/src/features/settings/pages/__tests__/providers-config-page.test.tsx

@@ -11,6 +11,7 @@ const mocks = vi.hoisted(() => ({
       providers: {
         openai: { enabled: true, apiKeySet: true },
         anthropic: { enabled: true, apiKeySet: true },
+        opencode: { enabled: true, apiKeyRequired: false, apiKeySet: false },
         nextclaw: { enabled: true, apiKeySet: true },
       },
     },
@@ -22,6 +23,7 @@ const mocks = vi.hoisted(() => ({
         { name: 'nextclaw', displayName: 'NextClaw Builtin', defaultApiBase: 'https://ai-gateway-api.nextclaw.io/v1' },
         { name: 'openai', displayName: 'OpenAI', defaultApiBase: 'https://api.openai.com/v1' },
         { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' },
+        { name: 'opencode', displayName: 'OpenCode Zen Free Trial', defaultApiBase: 'https://opencode.ai/zen/v1' },
       ],
     },
   },
@@ -46,6 +48,7 @@ vi.mock('@/shared/hooks/use-config', () => ({
             isBuiltInType: providerId === 'nextclaw',
             isCustom: false,
             enabled: provider.enabled,
+            apiKeyRequired: 'apiKeyRequired' in provider ? provider.apiKeyRequired : undefined,
             apiKeySet: provider.apiKeySet,
           },
         ]),
@@ -108,4 +111,13 @@ describe('ProvidersConfigPage', () => {
       expect.stringContaining('NextClaw Builtin'),
     ]);
   });
+
+  it('shows an enabled provider without a required API key as ready', () => {
+    const { container } = render(<ProvidersConfigPage />);
+    const opencodeCard = Array.from(container.querySelectorAll('[role="button"]'))
+      .find((element) => element.textContent?.includes('OpenCode Zen Free Trial'));
+
+    expect(opencodeCard?.textContent).toContain('Ready');
+    expect(opencodeCard?.textContent).not.toContain('Setup');
+  });
 });

package/src/features/settings/pages/providers-config-page.tsx

@@ -17,6 +17,7 @@ import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
 import { StatusDot } from '@/shared/components/status/status-dot';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
+import { isProviderConfigured } from '@/shared/lib/provider-models';
 import { ProviderForm } from '@/features/settings/components/config/provider-form';
 import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
@@ -232,7 +233,7 @@ export function ProvidersConfigPage() {
             {filteredProviders.map((provider) => {
               const template = provider.providerType ? templateByType.get(provider.providerType) : null;
               const isEnabled = provider.enabled !== false;
-              const isReady = Boolean(isEnabled && provider.apiKeySet);
+              const isReady = isProviderConfigured(provider);
               const providerLabel = provider.displayName?.trim() || template?.displayName || provider.providerId;
               const description =
                 formatBasePreview(provider.apiBase || template?.defaultApiBase || '') ||

package/src/platforms/mobile/components/__tests__/mobile-app-shell.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/app/components/i18n-provider";
@@ -9,14 +10,19 @@ vi.mock("@/shared/components/doc-browser", () => ({
 }));
 
 function renderShell(pathname: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
   const view = render(
-    <I18nProvider>
-      <MemoryRouter initialEntries={[pathname]}>
-        <MobileAppShell pathname={pathname} isDocBrowserOpen={false}>
-          <div>Content</div>
-        </MobileAppShell>
-      </MemoryRouter>
-    </I18nProvider>,
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider>
+        <MemoryRouter initialEntries={[pathname]}>
+          <MobileAppShell pathname={pathname} isDocBrowserOpen={false}>
+            <div>Content</div>
+          </MobileAppShell>
+        </MemoryRouter>
+      </I18nProvider>
+    </QueryClientProvider>,
   );
   return {
     ...view,