@nextclaw/ui 0.10.0 → 0.10.2

package/src/App.tsx

@@ -3,8 +3,10 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { AccountPanel } from '@/account/components/account-panel';
 import { appQueryClient } from '@/app-query-client';
 import { LoginPage } from '@/components/auth/login-page';
+import { Button } from '@/components/ui/button';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { useAuthStatus } from '@/hooks/use-auth';
+import { t } from '@/lib/i18n';
 import { useRealtimeQueryBridge } from '@/hooks/use-realtime-query-bridge';
 import { AppPresenterProvider } from '@/presenter/app-presenter-context';
 import { Toaster } from 'sonner';
@@ -31,6 +33,29 @@ function LazyRoute({ children }: { children: JSX.Element }) {
   return <Suspense fallback={<RouteFallback />}>{children}</Suspense>;
 }
 
+function AuthBootstrapErrorState(props: {
+  message: string;
+  retrying: boolean;
+  onRetry: () => void;
+}) {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-secondary px-6 py-10">
+      <div className="w-full max-w-lg rounded-3xl border border-gray-200 bg-white p-8 shadow-card">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-gray-500">{t('authBrand')}</p>
+        <h1 className="mt-3 text-2xl font-semibold text-gray-900">{t('authStatusLoadFailed')}</h1>
+        <p className="mt-3 text-sm leading-6 text-gray-600">
+          {props.message}
+        </p>
+        <div className="mt-6 flex gap-3">
+          <Button onClick={props.onRetry} disabled={props.retrying}>
+            {t('authRetryStatus')}
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}
+
 function ProtectedApp() {
   useRealtimeQueryBridge(appQueryClient);
 
@@ -75,6 +100,18 @@ function AuthGate() {
     return <RouteFallback />;
   }
 
+  if (authStatus.isError) {
+    return (
+      <AuthBootstrapErrorState
+        message={authStatus.error instanceof Error ? authStatus.error.message : t('authStatusLoadFailed')}
+        retrying={authStatus.isRefetching}
+        onRetry={() => {
+          void authStatus.refetch();
+        }}
+      />
+    );
+  }
+
   if (authStatus.data?.enabled && !authStatus.data.authenticated) {
     return <LoginPage username={authStatus.data.username} />;
   }

package/src/api/client.test.ts

@@ -30,6 +30,18 @@ describe('api/client', () => {
     });
   });
 
+  it('forwards timeout overrides to appClient.request', async () => {
+    mocks.request.mockResolvedValue({ ok: true });
+
+    await api.get<{ ok: boolean }>('/api/auth/status', { timeoutMs: 5000 });
+
+    expect(mocks.request).toHaveBeenCalledWith({
+      method: 'GET',
+      path: '/api/auth/status',
+      timeoutMs: 5000
+    });
+  });
+
   it('parses JSON request bodies before sending to appClient.request', async () => {
     mocks.request.mockResolvedValue({ success: true });
 

package/src/api/client.ts

@@ -3,13 +3,14 @@ import type { ApiResponse } from './types';
 
 export async function requestApiResponse<T>(
   endpoint: string,
-  options: RequestInit = {}
+  options: RequestInit & { timeoutMs?: number } = {}
 ): Promise<ApiResponse<T>> {
   const method = (options.method || 'GET').toUpperCase();
   try {
     const data = await appClient.request<T>({
       method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
       path: endpoint,
+      ...(options.timeoutMs !== undefined ? { timeoutMs: options.timeoutMs } : {}),
       ...(options.body !== undefined ? { body: parseRequestBody(options.body) } : {})
     });
     return {
@@ -32,7 +33,8 @@ export async function requestApiResponse<T>(
 }
 
 export const api = {
-  get: <T>(path: string) => requestApiResponse<T>(path, { method: 'GET' }),
+  get: <T>(path: string, options: RequestInit & { timeoutMs?: number } = {}) =>
+    requestApiResponse<T>(path, { ...options, method: 'GET' }),
   put: <T>(path: string, body: unknown) =>
     requestApiResponse<T>(path, {
       method: 'PUT',

package/src/api/config.ts

@@ -54,7 +54,7 @@ import type {
 
 // GET /api/auth/status
 export async function fetchAuthStatus(): Promise<AuthStatusView> {
-  const response = await api.get<AuthStatusView>('/api/auth/status');
+  const response = await api.get<AuthStatusView>('/api/auth/status', { timeoutMs: 5_000 });
   if (!response.ok) {
     throw new Error(response.error.message);
   }

package/src/components/chat/ChatSidebar.tsx

@@ -5,7 +5,7 @@ import { BrandHeader } from '@/components/common/BrandHeader';
 import { StatusBadge } from '@/components/common/StatusBadge';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
 import { useChatSessionLabelService } from '@/components/chat/chat-session-label.service';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
@@ -19,8 +19,9 @@ import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { useDocBrowser } from '@/components/doc-browser';
+import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
 import { useUiStore } from '@/stores/ui.store';
-import { NavLink, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import {
   AlarmClock,
   BookOpen,
@@ -284,28 +285,14 @@ export function ChatSidebar() {
       <div className="px-3 pb-2">
         <ul className="space-y-0.5">
           {navItems.map((item) => {
-            const Icon = item.icon;
             return (
               <li key={item.target}>
-                <NavLink
+                <SidebarNavLinkItem
                   to={item.target}
-                  className={({ isActive }) => cn(
-                    'group w-full flex items-center gap-3 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150',
-                    isActive
-                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                      : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-                  )}
-                >
-                  {({ isActive }) => (
-                    <>
-                      <Icon className={cn(
-                        'h-4 w-4 transition-colors',
-                        isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-                      )} />
-                      <span>{item.label()}</span>
-                    </>
-                  )}
-                </NavLink>
+                  label={item.label()}
+                  icon={item.icon}
+                  density="compact"
+                />
               </li>
             );
           })}
@@ -363,57 +350,42 @@ export function ChatSidebar() {
       </div>
 
       <div className="px-3 py-3 border-t border-gray-200/60 space-y-0.5">
-        <NavLink
+        <SidebarNavLinkItem
           to="/settings"
-          className={({ isActive }) => cn(
-            'group w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150',
-            isActive
-              ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-              : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-          )}
-        >
-          {({ isActive }) => (
-            <>
-              <Settings className={cn('h-4 w-4 transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
-              <span>{t('settings')}</span>
-            </>
-          )}
-        </NavLink>
-        <button
+          label={t('settings')}
+          icon={Settings}
+          density="compact"
+        />
+        <SidebarActionItem
           onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-          className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150 text-gray-600 hover:bg-gray-200/60 hover:text-gray-800"
+          icon={BookOpen}
+          label={t('docBrowserHelp')}
+          density="compact"
+        />
+        <SidebarSelectItem
+          value={theme}
+          onValueChange={(value) => setTheme(value as UiTheme)}
+          icon={Palette}
+          label={t('theme')}
+          valueLabel={currentThemeLabel}
+          density="compact"
         >
-          <BookOpen className="h-4 w-4 text-gray-400" />
-          <span>{t('docBrowserHelp')}</span>
-        </button>
-        <Select value={theme} onValueChange={(value) => setTheme(value as UiTheme)}>
-          <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
-            <div className="flex items-center gap-2.5 min-w-0">
-              <Palette className="h-4 w-4 text-gray-400" />
-              <span>{t('theme')}</span>
-            </div>
-            <span className="ml-auto text-[11px] text-gray-500">{currentThemeLabel}</span>
-          </SelectTrigger>
-          <SelectContent>
-            {THEME_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
-          <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
-            <div className="flex items-center gap-2.5 min-w-0">
-              <Languages className="h-4 w-4 text-gray-400" />
-              <span>{t('language')}</span>
-            </div>
-            <span className="ml-auto text-[11px] text-gray-500">{currentLanguageLabel}</span>
-          </SelectTrigger>
-          <SelectContent>
-            {LANGUAGE_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          {THEME_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
+          ))}
+        </SidebarSelectItem>
+        <SidebarSelectItem
+          value={language}
+          onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
+          icon={Languages}
+          label={t('language')}
+          valueLabel={currentLanguageLabel}
+          density="compact"
+        >
+          {LANGUAGE_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
+          ))}
+        </SidebarSelectItem>
       </div>
     </aside>
   );

package/src/components/chat/adapters/chat-input-bar.adapter.test.ts

@@ -1,4 +1,9 @@
-import { buildChatSlashItems, buildSelectedSkillItems, buildSkillPickerModel } from '@/components/chat/adapters/chat-input-bar.adapter';
+import {
+  buildChatSlashItems,
+  buildModelToolbarSelect,
+  buildSelectedSkillItems,
+  buildSkillPickerModel
+} from '@/components/chat/adapters/chat-input-bar.adapter';
 import type { ChatSkillRecord } from '@/components/chat/adapters/chat-input-bar.adapter';
 
 function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
@@ -78,3 +83,29 @@ describe('buildSkillPickerModel', () => {
     });
   });
 });
+
+describe('buildModelToolbarSelect', () => {
+  it('falls back to the first available option when the selected model is missing', () => {
+    const onValueChange = vi.fn();
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'minimax/MiniMax-M2.7',
+          modelLabel: 'MiniMax-M2.7',
+          providerLabel: 'MiniMax'
+        }
+      ],
+      selectedModel: 'dashscope/qwen3-coder-next',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onValueChange,
+      texts: {
+        modelSelectPlaceholder: 'Select model',
+        modelNoOptionsLabel: 'No models'
+      }
+    });
+
+    expect(select.value).toBe('minimax/MiniMax-M2.7');
+    expect(select.selectedLabel).toBe('MiniMax/MiniMax-M2.7');
+  });
+});

package/src/components/chat/adapters/chat-input-bar.adapter.ts

@@ -238,13 +238,16 @@ export function buildModelToolbarSelect(params: {
   texts: Pick<ChatInputBarAdapterTexts, 'modelSelectPlaceholder' | 'modelNoOptionsLabel'>;
 }): ChatToolbarSelect {
   const selectedModelOption = params.modelOptions.find((option) => option.value === params.selectedModel);
+  const fallbackModelOption = params.modelOptions[0];
+  const resolvedModelOption = selectedModelOption ?? fallbackModelOption;
+  const resolvedValue = params.hasModelOptions ? resolvedModelOption?.value : undefined;
 
   return {
     key: 'model',
-    value: params.hasModelOptions ? params.selectedModel : undefined,
+    value: resolvedValue,
     placeholder: params.texts.modelSelectPlaceholder,
-    selectedLabel: selectedModelOption
-      ? `${selectedModelOption.providerLabel}/${selectedModelOption.modelLabel}`
+    selectedLabel: resolvedModelOption
+      ? `${resolvedModelOption.providerLabel}/${resolvedModelOption.modelLabel}`
       : undefined,
     icon: 'sparkles',
     options: params.modelOptions.map((option) => ({

package/src/components/chat/adapters/chat-message.adapter.test.ts

@@ -6,183 +6,161 @@ function toSource(uiMessages: UiMessage[]): ChatMessageSource[] {
   return uiMessages as unknown as ChatMessageSource[];
 }
 
-describe("adaptChatMessages", () => {
-  it("maps markdown, reasoning, and tool parts into UI view models", () => {
-    const messages: UiMessage[] = [
-      {
-        id: "assistant-1",
-        role: "assistant",
-        meta: {
-          status: "final",
-          timestamp: "2026-03-17T10:00:00.000Z",
-        },
-        parts: [
-          { type: "text", text: "hello world" },
-          {
-            type: "reasoning",
-            reasoning: "internal reasoning",
-            details: [],
-          },
-          {
-            type: "tool-invocation",
-            toolInvocation: {
-              status: ToolInvocationStatus.RESULT,
-              toolCallId: "call-1",
-              toolName: "web_search",
-              args: '{"q":"hello"}',
-              result: { ok: true },
-            },
-          },
-        ],
-      },
-    ];
+const defaultTexts = {
+  roleLabels: {
+    user: "You",
+    assistant: "Assistant",
+    tool: "Tool",
+    system: "System",
+    fallback: "Message",
+  },
+  reasoningLabel: "Reasoning",
+  toolCallLabel: "Tool Call",
+  toolResultLabel: "Tool Result",
+  toolNoOutputLabel: "No output",
+  toolOutputLabel: "View Output",
+  imageAttachmentLabel: "Image attachment",
+  fileAttachmentLabel: "File attachment",
+  unknownPartLabel: "Unknown Part",
+};
 
-    const adapted = adaptChatMessages({
-      uiMessages: toSource(messages),
-      formatTimestamp: (value) => `formatted:${value}`,
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
-        },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
-
-    expect(adapted).toHaveLength(1);
-    expect(adapted[0]?.roleLabel).toBe("Assistant");
-    expect(adapted[0]?.timestampLabel).toBe(
-      "formatted:2026-03-17T10:00:00.000Z",
-    );
-    expect(adapted[0]?.parts.map((part) => part.type)).toEqual([
-      "markdown",
-      "reasoning",
-      "tool-card",
-    ]);
-    expect(adapted[0]?.parts[1]).toMatchObject({
-      type: "reasoning",
-      label: "Reasoning",
-      text: "internal reasoning",
-    });
-    expect(adapted[0]?.parts[2]).toMatchObject({
-      type: "tool-card",
-      card: {
-        titleLabel: "Tool Result",
-        outputLabel: "View Output",
-      },
-    });
+function adapt(uiMessages: ChatMessageSource[]) {
+  return adaptChatMessages({
+    uiMessages,
+    formatTimestamp: (value) => `formatted:${value}`,
+    texts: defaultTexts,
   });
+}
 
-  it("maps non-standard roles back to the generic message role", () => {
-    const adapted = adaptChatMessages({
-      uiMessages: [
+it("maps markdown, reasoning, and tool parts into UI view models", () => {
+  const messages: UiMessage[] = [
+    {
+      id: "assistant-1",
+      role: "assistant",
+      meta: {
+        status: "final",
+        timestamp: "2026-03-17T10:00:00.000Z",
+      },
+      parts: [
+        { type: "text", text: "hello world" },
         {
-          id: "data-1",
-          role: "data",
-          parts: [{ type: "text", text: "payload" }],
+          type: "reasoning",
+          reasoning: "internal reasoning",
+          details: [],
         },
-      ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => "formatted",
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "call-1",
+            toolName: "web_search",
+            args: '{"q":"hello"}',
+            result: { ok: true },
+          },
         },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
+      ],
+    },
+  ];
+
+  const adapted = adapt(toSource(messages));
+
+  expect(adapted).toHaveLength(1);
+  expect(adapted[0]?.roleLabel).toBe("Assistant");
+  expect(adapted[0]?.timestampLabel).toBe(
+    "formatted:2026-03-17T10:00:00.000Z",
+  );
+  expect(adapted[0]?.parts.map((part) => part.type)).toEqual([
+    "markdown",
+    "reasoning",
+    "tool-card",
+  ]);
+  expect(adapted[0]?.parts[1]).toMatchObject({
+    type: "reasoning",
+    label: "Reasoning",
+    text: "internal reasoning",
+  });
+  expect(adapted[0]?.parts[2]).toMatchObject({
+    type: "tool-card",
+    card: {
+      titleLabel: "Tool Result",
+      outputLabel: "View Output",
+    },
+  });
+});
+
+it("maps non-standard roles back to the generic message role", () => {
+  const adapted = adapt([
+    {
+      id: "data-1",
+      role: "data",
+      parts: [{ type: "text", text: "payload" }],
+    },
+  ] as unknown as ChatMessageSource[]);
 
-    expect(adapted[0]?.role).toBe("message");
-    expect(adapted[0]?.roleLabel).toBe("Message");
+  expect(adapted[0]?.role).toBe("message");
+  expect(adapted[0]?.roleLabel).toBe("Message");
+});
+
+it("maps unknown parts into a visible fallback part", () => {
+  const adapted = adapt([
+    {
+      id: "x-1",
+      role: "assistant",
+      parts: [{ type: "step-start", value: "x" }],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "unknown",
+    rawType: "step-start",
+    label: "Unknown Part",
   });
+});
 
-  it("maps unknown parts into a visible fallback part", () => {
-    const adapted = adaptChatMessages({
-      uiMessages: [
-        {
-          id: "x-1",
-          role: "assistant",
-          parts: [{ type: "step-start", value: "x" }],
-        },
-      ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => "formatted",
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
-        },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
+it("drops empty and zero-width text parts during adaptation", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-mixed",
+      role: "assistant",
+      parts: [
+        { type: "text", text: "   " },
+        { type: "text", text: "\u200B\u200B" },
+        { type: "text", text: "\u200Bhello\u200B" },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
 
-    expect(adapted[0]?.parts[0]).toMatchObject({
-      type: "unknown",
-      rawType: "step-start",
-      label: "Unknown Part",
-    });
+  expect(adapted).toHaveLength(1);
+  expect(adapted[0]?.id).toBe("assistant-mixed");
+  expect(adapted[0]?.parts).toHaveLength(1);
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "markdown",
+    text: "\u200Bhello\u200B",
   });
+});
 
-  it("drops empty and zero-width text parts during adaptation", () => {
-    const adapted = adaptChatMessages({
-      uiMessages: [
+it("maps file parts into previewable attachment view models", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-file",
+      role: "assistant",
+      parts: [
         {
-          id: "assistant-mixed",
-          role: "assistant",
-          parts: [
-            { type: "text", text: "   " },
-            { type: "text", text: "\u200B\u200B" },
-            { type: "text", text: "\u200Bhello\u200B" },
-          ],
-        },
-      ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => "formatted",
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
+          type: "file",
+          mimeType: "image/png",
+          data: "ZmFrZS1pbWFnZQ==",
         },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
 
-    expect(adapted).toHaveLength(1);
-    expect(adapted[0]?.id).toBe("assistant-mixed");
-    expect(adapted[0]?.parts).toHaveLength(1);
-    expect(adapted[0]?.parts[0]).toMatchObject({
-      type: "markdown",
-      text: "\u200Bhello\u200B",
-    });
+  expect(adapted[0]?.parts[0]).toEqual({
+    type: "file",
+    file: {
+      label: "Image attachment",
+      mimeType: "image/png",
+      dataUrl: "data:image/png;base64,ZmFrZS1pbWFnZQ==",
+      isImage: true,
+    },
   });
 });