@nextclaw/ui 0.15.21 → 0.15.22

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,

package/src/platforms/mobile/components/__tests__/mobile-bottom-nav.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, 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";
@@ -11,15 +12,24 @@ vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({ open: vi.fn() }),
 }));
 
-describe("MobileBottomNav", () => {
-  it("highlights the settings tab for nested settings routes", () => {
-    render(
+function renderBottomNav(pathname: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
       <I18nProvider>
-        <MemoryRouter initialEntries={["/providers"]}>
+        <MemoryRouter initialEntries={[pathname]}>
           <MobileBottomNav />
         </MemoryRouter>
-      </I18nProvider>,
-    );
+      </I18nProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("MobileBottomNav", () => {
+  it("highlights the settings tab for nested settings routes", () => {
+    renderBottomNav("/providers");
 
     expect(
       screen.getByRole("link", { name: /settings/i }).getAttribute("aria-current"),
@@ -37,13 +47,7 @@ describe("MobileBottomNav", () => {
   });
 
   it("highlights the chat tab for chat routes", () => {
-    render(
-      <I18nProvider>
-        <MemoryRouter initialEntries={["/chat/demo-session"]}>
-          <MobileBottomNav />
-        </MemoryRouter>
-      </I18nProvider>,
-    );
+    renderBottomNav("/chat/demo-session");
 
     expect(
       screen.getByRole("link", { name: /chat/i }).getAttribute("aria-current"),
@@ -51,13 +55,7 @@ describe("MobileBottomNav", () => {
   });
 
   it("opens the apps panel from the mobile navigation", () => {
-    render(
-      <I18nProvider>
-        <MemoryRouter initialEntries={["/chat"]}>
-          <MobileBottomNav />
-        </MemoryRouter>
-      </I18nProvider>,
-    );
+    renderBottomNav("/chat");
 
     fireEvent.click(screen.getByRole("button", { name: "Apps" }));
 

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -55,7 +55,7 @@ export function DocBrowserAddressToolbar({
           onChange={(e) => onUrlInputChange(e.target.value)}
           aria-label={t('docBrowserAddressLabel')}
           placeholder={placeholder}
-          className="h-8 w-full rounded-lg border border-border/75 bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-border focus:outline-none focus:ring-0"
+          className="h-8 w-full rounded-lg border border-border/75 bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:outline-none focus:ring-0"
         />
       </form>
       <IconActionButton

package/src/shared/components/path-picker/server-path-picker-directory-list.tsx

@@ -63,7 +63,7 @@ export function ServerPathPickerDirectoryList({
                     'grid w-full grid-cols-[minmax(0,1fr)_8rem] items-center rounded-sm border border-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors',
                     selected
                       ? 'border-primary/25 bg-primary/15'
-                      : 'hover:bg-accent/70 focus-visible:border-primary/35 focus-visible:bg-accent/70',
+                      : 'hover:bg-[var(--interaction-hover)] focus-visible:border-primary/35 focus-visible:bg-accent/70',
                   )}
                   onClick={() => onSelect(entry.path)}
                   onDoubleClick={() => onOpen(entry.path)}

package/src/shared/components/path-picker/server-path-picker-locations.tsx

@@ -112,7 +112,7 @@ export function ServerPathPickerLocations({
         type="button"
         className={cn(
           'flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
-          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-accent',
+          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-[var(--interaction-hover)]',
         )}
         aria-current={active ? 'location' : undefined}
         onClick={() => onNavigate(item.path)}

package/src/shared/components/path-picker/server-path-picker-navigation-bar.tsx

@@ -99,7 +99,7 @@ export function ServerPathPickerNavigationBar({
         disabled={!canGoUp || disabled}
       />
 
-      <div className="ml-1 flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-border bg-background shadow-sm focus-within:ring-1 focus-within:ring-primary/50">
+      <div className="ml-1 flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-border bg-background shadow-sm">
         {editingAddress ? (
           <Input
             value={addressDraft}
@@ -136,7 +136,7 @@ export function ServerPathPickerNavigationBar({
                           <>
                             <button
                               type="button"
-                              className="rounded px-1.5 py-1 text-sm text-muted-foreground hover:bg-accent"
+                              className="rounded px-1.5 py-1 text-sm text-muted-foreground hover:bg-[var(--interaction-hover)]"
                               aria-label={t('pathPickerShowFullAddress')}
                               onClick={beginAddressEdit}
                             >
@@ -149,7 +149,7 @@ export function ServerPathPickerNavigationBar({
                     ) : null}
                     <button
                       type="button"
-                      className="max-w-40 truncate rounded px-1.5 py-1 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                      className="max-w-40 truncate rounded px-1.5 py-1 text-sm text-foreground hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                       onClick={() => onNavigate(breadcrumb.path)}
                       disabled={disabled}
                     >

package/src/shared/components/ui/actions/__tests__/icon-action-button.test.tsx

@@ -31,7 +31,7 @@ describe('IconActionButton', () => {
     const button = screen.getByRole('button', { name: 'More' });
     expect(button.className).toContain('h-7');
     expect(button.className).toContain('w-7');
-    expect(button.className).toContain('hover:bg-accent');
+    expect(button.className).toContain('hover:bg-[var(--interaction-hover)]');
   });
 
   it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -31,7 +31,7 @@ const SIZE_CLASS: Record<IconActionButtonSize, string> = {
 
 const TONE_CLASS: Record<IconActionButtonTone, string> = {
   default:
-    'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+    'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
   strong:
     'text-muted-foreground hover:bg-black/10 hover:text-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
 };

package/src/shared/components/ui/button.tsx

@@ -9,12 +9,12 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-muted text-foreground hover:bg-accent hover:text-accent-foreground',
-        ghost: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-border bg-card text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+        secondary: 'bg-muted text-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+        ghost: 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         primary: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
-        subtle: 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        subtle: 'bg-muted text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         'primary-outline': 'border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground'
       },
       size: {

package/src/shared/components/ui/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 transition-all duration-fast hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 transition-all duration-fast hover:bg-[var(--interaction-hover)] hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">
         <X className="h-4 w-4 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

package/src/shared/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 focus:border-border disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/shared/components/ui/scroll-area.tsx

@@ -5,6 +5,8 @@ interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
+export const SCROLL_BOTTOM_EDGE_FADE_CLASS = '[mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)]';
+
 const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
   ({ className, children, ...props }, ref) => (
     <div

package/src/shared/components/ui/select.tsx

@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-[var(--interaction-hover)]",
             className
         )}
         {...props}

package/src/shared/components/ui/switch.tsx

@@ -18,7 +18,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         ref={ref}
         className={cn(
           'switch-track peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'border-primary/70 bg-primary' : 'border-border/60 bg-muted hover:bg-accent',
+          checked ? 'border-primary/70 bg-primary' : 'border-border/60 bg-muted hover:bg-[var(--interaction-hover)]',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}

package/src/shared/components/ui/tabs.tsx

@@ -67,7 +67,7 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
         'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none disabled:opacity-50',
         isActive
           ? 'bg-card text-foreground shadow-sm'
-          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         className
       )}
     >

package/src/shared/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => (
     <textarea
       className={cn(
-        "flex min-h-28 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 focus:border-border disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-28 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}

package/src/shared/lib/api/ncp-session.types.ts

@@ -39,6 +39,7 @@ export type SessionContextWindowView = {
 export type SessionActivityPreviewView = {
   state: "running" | "completed" | "failed" | "cancelled" | "idle";
   timestamp: string;
+  statusKind?: "thinking" | "tool-running" | "tool-completed" | "run-failed" | "run-interrupted";
   statusText?: string;
   replyText?: string;
 };

package/src/shared/lib/api/types.ts

@@ -68,6 +68,7 @@ export type ProviderInstanceView = {
   isCustom: boolean;
   enabled: boolean;
   displayName?: string;
+  apiKeyRequired?: boolean;
   apiKeySet: boolean;
   apiKeyMasked?: string;
   apiBase?: string | null;
@@ -621,6 +622,7 @@ export type ProviderTemplateView = {
   envKey: string;
   isGateway?: boolean;
   isLocal?: boolean;
+  apiKeyRequired?: boolean;
   defaultApiBase?: string;
   logo?: string;
   apiBaseHelp?: {