@nextclaw/ui 0.12.11 → 0.12.12

package/src/shared/components/doc-browser/doc-browser.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DocBrowser } from "@/shared/components/doc-browser/doc-browser";
+
+const { docBrowserState } = vi.hoisted(() => ({
+  docBrowserState: {
+    isOpen: true,
+    mode: "docked" as "docked" | "floating",
+    tabs: [
+      {
+        id: "docs",
+        kind: "docs" as const,
+        title: "Docs",
+        currentUrl: "https://docs.nextclaw.io/en/guide/getting-started",
+        history: ["https://docs.nextclaw.io/en/guide/getting-started"],
+        historyIndex: 0,
+        navVersion: 0,
+      },
+    ],
+    activeTabId: "docs",
+    currentTab: {
+      id: "docs",
+      kind: "docs" as const,
+      title: "Docs",
+      currentUrl: "https://docs.nextclaw.io/en/guide/getting-started",
+      history: ["https://docs.nextclaw.io/en/guide/getting-started"],
+      historyIndex: 0,
+      navVersion: 0,
+    },
+    currentUrl: "https://docs.nextclaw.io/en/guide/getting-started",
+    navVersion: 0,
+    close: vi.fn(),
+    toggleMode: vi.fn(),
+    goBack: vi.fn(),
+    goForward: vi.fn(),
+    canGoBack: false,
+    canGoForward: false,
+    navigate: vi.fn(),
+    syncUrl: vi.fn(),
+    setActiveTab: vi.fn(),
+    closeTab: vi.fn(),
+    openNewTab: vi.fn(),
+  },
+}));
+
+vi.mock("@/shared/components/doc-browser/doc-browser-context", async () => {
+  const actual = await vi.importActual<
+    typeof import("@/shared/components/doc-browser/doc-browser-context")
+  >("@/shared/components/doc-browser/doc-browser-context");
+
+  return {
+    ...actual,
+    useDocBrowser: () => docBrowserState,
+  };
+});
+
+describe("DocBrowser", () => {
+  it("uses a full viewport panel without desktop resize controls in fullscreen mode", () => {
+    render(<DocBrowser displayMode="fullscreen" />);
+
+    const panel = screen.getByTestId("doc-browser-panel");
+
+    expect(panel.className).toContain("fixed");
+    expect(panel.className).toContain("inset-0");
+    expect(panel.className).toContain("w-screen");
+    expect(
+      screen.queryByTitle(/float/i) ?? screen.queryByTitle(/dock/i),
+    ).toBeNull();
+    expect(panel.querySelector(".cursor-ew-resize")).toBeNull();
+    expect(panel.querySelector(".cursor-se-resize")).toBeNull();
+  });
+});

package/src/{components/doc-browser/DocBrowser.tsx → shared/components/doc-browser/doc-browser.tsx}

@@ -1,7 +1,7 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { DOCS_DEFAULT_BASE_URL, isDocsUrl, useDocBrowser } from './DocBrowserContext';
-import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
+import { useState, useRef, useCallback, useEffect, type CSSProperties } from 'react';
+import { DOCS_DEFAULT_BASE_URL, isDocsUrl, useDocBrowser } from './doc-browser-context';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
 import {
   ArrowLeft,
   ArrowRight,
@@ -22,8 +22,44 @@ import {
  * - multi-tab browsing
  * - `docked`: right sidebar panel (horizontally resizable)
  * - `floating`: draggable, resizable overlay
+ * - `fullscreen`: full viewport overlay for narrow mobile shells
  */
-export function DocBrowser() {
+type DocBrowserProps = {
+  displayMode?: 'desktop' | 'fullscreen';
+};
+
+function getPanelClassName(isFullscreen: boolean, isDocked: boolean): string {
+  return cn(
+    'flex flex-col bg-white overflow-hidden relative',
+    isFullscreen
+      ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
+      : isDocked
+        ? 'h-full border-l border-gray-200 shrink-0'
+        : 'rounded-2xl shadow-2xl border border-gray-200',
+  );
+}
+
+function getPanelStyle(params: {
+  isFullscreen: boolean;
+  isDocked: boolean;
+  dockedWidth: number;
+  floatPos: { x: number; y: number };
+  floatSize: { w: number; h: number };
+}): CSSProperties | undefined {
+  const { isFullscreen, isDocked, dockedWidth, floatPos, floatSize } = params;
+  if (isFullscreen) return undefined;
+  if (isDocked) return { width: dockedWidth };
+  return {
+    position: 'fixed',
+    left: floatPos.x,
+    top: floatPos.y,
+    width: floatSize.w,
+    height: floatSize.h,
+    zIndex: 9999,
+  };
+}
+
+export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
   const {
     isOpen,
     mode,
@@ -236,29 +272,16 @@ export function DocBrowser() {
   if (!isOpen) return null;
 
   const isDocked = mode === 'docked';
+  const isFullscreen = displayMode === 'fullscreen';
+  const canDragPanel = !isDocked && !isFullscreen;
 
   const panel = (
     <div
-      className={cn(
-        'flex flex-col bg-white overflow-hidden relative',
-        isDocked
-          ? 'h-full border-l border-gray-200 shrink-0'
-          : 'rounded-2xl shadow-2xl border border-gray-200',
-      )}
-      style={
-        isDocked
-          ? { width: dockedWidth }
-          : {
-            position: 'fixed',
-            left: floatPos.x,
-            top: floatPos.y,
-            width: floatSize.w,
-            height: floatSize.h,
-            zIndex: 9999,
-          }
-      }
+      data-testid="doc-browser-panel"
+      className={getPanelClassName(isFullscreen, isDocked)}
+      style={getPanelStyle({ isFullscreen, isDocked, dockedWidth, floatPos, floatSize })}
     >
-      {isDocked && (
+      {isDocked && !isFullscreen && (
         <div
           className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
           onMouseDown={onDockResizeStart}
@@ -268,22 +291,25 @@ export function DocBrowser() {
       <div
         className={cn(
           'flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b border-gray-200 shrink-0 select-none',
-          !isDocked && 'cursor-grab active:cursor-grabbing',
+          canDragPanel && 'cursor-grab active:cursor-grabbing',
+          isFullscreen && 'pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]',
         )}
-        onMouseDown={!isDocked ? onDragStart : undefined}
+        onMouseDown={canDragPanel ? onDragStart : undefined}
       >
         <div className="flex items-center gap-2.5 min-w-0">
           <BookOpen className="w-4 h-4 text-primary shrink-0" />
           <span className="text-sm font-semibold text-gray-900 truncate">{t('docBrowserTitle')}</span>
         </div>
         <div className="flex items-center gap-1">
-          <button
-            onClick={toggleMode}
-            className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-            title={isDocked ? t('docBrowserFloatMode') : t('docBrowserDockMode')}
-          >
-            {isDocked ? <Maximize2 className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
-          </button>
+          {!isFullscreen ? (
+            <button
+              onClick={toggleMode}
+              className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+              title={isDocked ? t('docBrowserFloatMode') : t('docBrowserDockMode')}
+            >
+              {isDocked ? <Maximize2 className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
+            </button>
+          ) : null}
           <button
             onClick={close}
             className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
@@ -398,7 +424,7 @@ export function DocBrowser() {
         </div>
       )}
 
-      {!isDocked && (
+      {!isDocked && !isFullscreen && (
         <>
           <div className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onLeftResizeStart} />
           <div className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onResizeStart} data-axis="x" />

package/src/shared/components/doc-browser/index.ts

@@ -0,0 +1,3 @@
+export { DocBrowser } from './doc-browser';
+export { DocBrowserProvider, useDocBrowser, isDocsUrl } from './doc-browser-context';
+export { useDocLinkInterceptor } from './use-doc-link-interceptor';

package/src/{components/doc-browser/useDocLinkInterceptor.ts → shared/components/doc-browser/use-doc-link-interceptor.ts}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { isDocsUrl, useDocBrowser } from './DocBrowserContext';
+import { isDocsUrl, useDocBrowser } from './doc-browser-context';
 
 /**
  * Global click interceptor for docs links.

package/src/{components/config/ModelConfig.test.tsx → shared/components/model-config.test.tsx}

@@ -1,9 +1,9 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from 'react';
-import { ProviderScopedModelInput } from '@/components/common/ProviderScopedModelInput';
-import { ModelConfig } from '@/components/config/ModelConfig';
-import { setLanguage } from '@/lib/i18n';
+import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
+import { ModelConfig } from '@/shared/components/model-config';
+import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   mutate: vi.fn(),
@@ -46,7 +46,7 @@ const mocks = vi.hoisted(() => ({
   }
 }));
 
-vi.mock('@/hooks/useConfig', () => ({
+vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
   useConfigSchema: () => mocks.schemaQuery,

package/src/shared/components/model-config.tsx

@@ -0,0 +1,151 @@
+import { Button } from '@/shared/components/ui/button';
+import { Card } from '@/shared/components/ui/card';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { Skeleton } from '@/shared/components/ui/skeleton';
+import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
+import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/shared/hooks/use-config';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { t } from '@/shared/lib/i18n';
+import { buildProviderModelCatalog } from '@/shared/lib/provider-models';
+import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
+import { DOCS_DEFAULT_BASE_URL } from '@/shared/components/doc-browser/doc-browser-context';
+import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+const DEFAULT_MODEL_INPUT_PLACEHOLDER = 'provider/model';
+
+function ModelConfigForm(props: {
+  initialModel: string;
+  initialWorkspace: string;
+  isPending: boolean;
+  modelHelpText: string;
+  modelLabel: string;
+  modelPlaceholder: string;
+  onSubmit: (payload: { model: string; workspace: string }) => void;
+  providerCatalog: ReturnType<typeof buildProviderModelCatalog>;
+  workspaceLabel: string;
+  workspacePlaceholder: string;
+}) {
+  const { initialModel, initialWorkspace, isPending, modelHelpText, modelLabel, modelPlaceholder, onSubmit, providerCatalog, workspaceLabel, workspacePlaceholder } = props;
+  const [model, setModel] = useState(initialModel);
+  const [workspace, setWorkspace] = useState(initialWorkspace);
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSubmit({ model, workspace });
+      }}
+      className="space-y-8"
+    >
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
+          <div className="mb-8 flex items-center gap-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
+              <Sparkles className="h-5 w-5" />
+            </div>
+            <h3 className="text-lg font-bold text-gray-900">{t('defaultModel')}</h3>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="model" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+              {modelLabel}
+            </Label>
+            <ProviderScopedModelInput id="model" value={model} onChange={setModel} providerCatalog={providerCatalog} modelPlaceholder={modelPlaceholder} />
+            <p className="text-xs text-gray-400">{modelHelpText}</p>
+            <a href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+              <BookOpen className="h-3.5 w-3.5" />
+              {t('channelsGuideTitle')}
+            </a>
+          </div>
+        </div>
+        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
+          <div className="mb-8 flex items-center gap-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
+              <Folder className="h-5 w-5" />
+            </div>
+            <h3 className="text-lg font-bold text-gray-900">{t('workspace')}</h3>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="workspace" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+              {workspaceLabel}
+            </Label>
+            <Input id="workspace" value={workspace} onChange={(event) => setWorkspace(event.target.value)} placeholder={workspacePlaceholder} className="rounded-xl" />
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-end pt-4">
+        <Button type="submit" disabled={isPending} size="lg">
+          {isPending ? <Loader2 className="h-5 w-5 animate-spin" /> : t('saveChanges')}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export function ModelConfig() {
+  const { data: config, isLoading } = useConfig();
+  const { data: meta } = useConfigMeta();
+  const { data: schema } = useConfigSchema();
+  const updateModel = useUpdateModel();
+  const uiHints = schema?.uiHints;
+  const modelHint = hintForPath('agents.defaults.model', uiHints);
+  const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
+
+  const providerCatalog = useMemo(
+    () => buildProviderModelCatalog({ meta, config, onlyConfigured: true }),
+    [config, meta]
+  );
+  const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
+  const initialModel = (config?.agents?.defaults?.model || '').trim();
+  const initialWorkspace = config?.agents?.defaults?.workspace || '';
+
+  if (isLoading) {
+    return (
+      <div className="max-w-2xl space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <Card className="rounded-2xl border-gray-200 p-6">
+          <div className="mb-6 flex items-center gap-4">
+            <Skeleton className="h-12 w-12 rounded-xl" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-3 w-32" />
+            </div>
+          </div>
+          <Skeleton className="mb-2 h-4 w-20" />
+          <Skeleton className="h-10 w-full rounded-xl" />
+        </Card>
+        <Card className="rounded-2xl border-gray-200 p-6">
+          <Skeleton className="mb-2 h-5 w-24" />
+          <Skeleton className="h-10 w-full rounded-xl" />
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <PageLayout>
+      <PageHeader title={t('modelPageTitle')} description={t('modelPageDescription')} />
+      <ModelConfigForm
+        key={`${initialModel}::${initialWorkspace}`}
+        initialModel={initialModel}
+        initialWorkspace={initialWorkspace}
+        isPending={updateModel.isPending}
+        modelHelpText={modelHelpText}
+        modelLabel={modelHint?.label ?? 'Model Name'}
+        modelPlaceholder={modelHint?.placeholder ?? DEFAULT_MODEL_INPUT_PLACEHOLDER}
+        onSubmit={({ model, workspace }) =>
+          updateModel.mutate({
+            model,
+            workspace
+          })}
+        providerCatalog={providerCatalog}
+        workspaceLabel={workspaceHint?.label ?? 'Default Path'}
+        workspacePlaceholder={workspaceHint?.placeholder ?? '/path/to/workspace'}
+      />
+    </PageLayout>
+  );
+}

package/src/{components → shared/components}/path-picker/server-path-picker-dialog.test.tsx

@@ -1,14 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ServerPathPickerDialog } from '@/components/path-picker/server-path-picker-dialog';
-import { setLanguage } from '@/lib/i18n';
+import { ServerPathPickerDialog } from '@/shared/components/path-picker/server-path-picker-dialog';
+import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   useServerPathBrowse: vi.fn(),
   refetch: vi.fn(),
 }));
 
-vi.mock('@/hooks/server-path/use-server-path-browse', () => ({
+vi.mock('@/shared/hooks/use-server-path-browse', () => ({
   useServerPathBrowse: mocks.useServerPathBrowse,
 }));
 

package/src/{components → shared/components}/path-picker/server-path-picker-dialog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { ChevronRight, Folder, FolderUp, Home, RefreshCcw, Search } from 'lucide-react';
-import { useServerPathBrowse } from '@/hooks/server-path/use-server-path-browse';
-import { Button } from '@/components/ui/button';
+import { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
+import { Button } from '@/shared/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -9,11 +9,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { t } from '@/lib/i18n';
+} from '@/shared/components/ui/dialog';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { ScrollArea } from '@/shared/components/ui/scroll-area';
+import { t } from '@/shared/lib/i18n';
 
 type ServerPathPickerDialogProps = {
   open: boolean;

package/src/{components/config → shared/components}/provider-advanced-settings-section.tsx

@@ -1,25 +1,12 @@
-import { KeyValueEditor } from '@/components/common/KeyValueEditor';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { t } from '@/lib/i18n';
+import { KeyValueEditor } from '@/shared/components/common/key-value-editor';
+import { Label } from '@/shared/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
 import { ChevronDown, Settings2 } from 'lucide-react';
 import { ProviderPillSelector } from './provider-pill-selector';
 
 type WireApiType = 'auto' | 'chat' | 'responses';
-
-type ProviderAdvancedSettingsSectionProps = {
-  showAdvanced: boolean;
-  onShowAdvancedChange: (value: boolean) => void;
-  supportsWireApi: boolean;
-  wireApiLabel: string;
-  wireApi: WireApiType;
-  onWireApiChange: (value: WireApiType) => void;
-  shouldUseWireApiPills: boolean;
-  wireApiSelectOptions: Array<{ value: string; label: string }>;
-  extraHeadersLabel: string;
-  extraHeaders: Record<string, string> | null;
-  onExtraHeadersChange: (value: Record<string, string> | null) => void;
-};
+type ProviderAdvancedSettingsSectionProps = { showAdvanced: boolean; onShowAdvancedChange: (value: boolean) => void; supportsWireApi: boolean; wireApiLabel: string; wireApi: WireApiType; onWireApiChange: (value: WireApiType) => void; shouldUseWireApiPills: boolean; wireApiSelectOptions: Array<{ value: string; label: string }>; extraHeadersLabel: string; extraHeaders: Record<string, string> | null; onExtraHeadersChange: (value: Record<string, string> | null) => void };
 
 export function ProviderAdvancedSettingsSection(props: ProviderAdvancedSettingsSectionProps) {
   const {

package/src/{components/config → shared/components}/provider-auth-section.tsx

@@ -1,26 +1,11 @@
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { t } from '@/lib/i18n';
-import type { ProviderSpecView } from '@/api/types';
+import { Button } from '@/shared/components/ui/button';
+import { Label } from '@/shared/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
+import type { ProviderSpecView } from '@/shared/lib/api';
 import { ProviderPillSelector } from './provider-pill-selector';
 
-type ProviderAuthSectionProps = {
-  providerAuth: ProviderSpecView['auth'];
-  providerAuthNote: string;
-  providerAuthMethodOptions: Array<{ value: string; label: string }>;
-  providerAuthMethodsCount: number;
-  selectedAuthMethodHint: string;
-  shouldUseAuthMethodPills: boolean;
-  resolvedAuthMethodId: string;
-  onAuthMethodChange: (value: string) => void;
-  onStartProviderAuth: () => void;
-  onImportProviderAuthFromCli: () => void;
-  startPending: boolean;
-  importPending: boolean;
-  authSessionId: string | null;
-  authStatusMessage: string;
-};
+type ProviderAuthSectionProps = { providerAuth: ProviderSpecView['auth']; providerAuthNote: string; providerAuthMethodOptions: Array<{ value: string; label: string }>; providerAuthMethodsCount: number; selectedAuthMethodHint: string; shouldUseAuthMethodPills: boolean; resolvedAuthMethodId: string; onAuthMethodChange: (value: string) => void; onStartProviderAuth: () => void; onImportProviderAuthFromCli: () => void; startPending: boolean; importPending: boolean; authSessionId: string | null; authStatusMessage: string };
 
 export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   const {
@@ -40,9 +25,7 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
     authStatusMessage
   } = props;
 
-  if (providerAuth?.kind !== 'device_code') {
-    return null;
-  }
+  if (providerAuth?.kind !== 'device_code') return null;
 
   return (
     <div className="space-y-2 rounded-xl border border-primary/20 bg-primary-50/50 p-3">

package/src/{components/config → shared/components}/provider-enabled-field.tsx

@@ -1,15 +1,11 @@
-import { SettingRow } from "@/components/ui/setting-row";
-import { Switch } from "@/components/ui/switch";
-import { t } from "@/lib/i18n";
+import { SettingRow } from "@/shared/components/ui/setting-row";
+import { Switch } from "@/shared/components/ui/switch";
+import { t } from "@/shared/lib/i18n";
 
-type ProviderEnabledFieldProps = {
-  enabled: boolean;
-  onChange: (enabled: boolean) => void;
-};
+type ProviderEnabledFieldProps = { enabled: boolean; onChange: (enabled: boolean) => void };
 
 export function ProviderEnabledField(props: ProviderEnabledFieldProps) {
   const { enabled, onChange } = props;
-
   return (
     <SettingRow
       tone="muted"

package/src/{components/config → shared/components}/provider-pill-selector.tsx

@@ -1,13 +1,5 @@
-type PillSelectOption = {
-  value: string;
-  label: string;
-};
-
-type ProviderPillSelectorProps = {
-  value: string;
-  onChange: (value: string) => void;
-  options: PillSelectOption[];
-};
+type PillSelectOption = { value: string; label: string };
+type ProviderPillSelectorProps = { value: string; onChange: (value: string) => void; options: PillSelectOption[] };
 
 export type { PillSelectOption };
 
@@ -24,11 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
-              selected
-                ? 'border-primary bg-primary text-white shadow-sm'
-                : 'border-gray-200 bg-white text-gray-700 hover:border-primary/40 hover:text-primary'
-            }`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-primary bg-primary text-white shadow-sm' : 'border-gray-200 bg-white text-gray-700 hover:border-primary/40 hover:text-primary'}`}
           >
             {option.label}
           </button>

package/src/{components/config → shared/components}/provider-status-badge.tsx

@@ -1,5 +1,5 @@
-import { StatusDot } from '@/components/ui/status-dot';
-import { t } from '@/lib/i18n';
+import { StatusDot } from '@/shared/components/ui/status-dot';
+import { t } from '@/shared/lib/i18n';
 
 type ProviderStatusBadgeProps = {
   enabled: boolean;
@@ -11,11 +11,5 @@ export function ProviderStatusBadge(props: ProviderStatusBadgeProps) {
   if (!props.enabled) {
     return <StatusDot status="inactive" label={t('disabled')} className={props.className} />;
   }
-  return (
-    <StatusDot
-      status={props.apiKeySet ? 'ready' : 'setup'}
-      label={props.apiKeySet ? t('statusReady') : t('statusSetup')}
-      className={props.className}
-    />
-  );
+  return <StatusDot status={props.apiKeySet ? 'ready' : 'setup'} label={props.apiKeySet ? t('statusReady') : t('statusSetup')} className={props.className} />;
 }

package/src/{components/config/SearchConfig.test.tsx → shared/components/search-config.test.tsx}

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { SearchConfig } from '@/components/config/SearchConfig';
-import { setLanguage } from '@/lib/i18n';
+import { SearchConfig } from '@/shared/components/search-config';
+import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   mutate: vi.fn(),
@@ -69,7 +69,7 @@ const mocks = vi.hoisted(() => ({
   }
 }));
 
-vi.mock('@/hooks/useConfig', () => ({
+vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.useConfigData,
   useConfigMeta: () => mocks.useConfigMetaData,
   useUpdateSearch: () => ({