@nextclaw/ui 0.15.24 → 0.15.26

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

@@ -0,0 +1,301 @@
+import { useState, type FormEvent, type ReactNode } from 'react';
+import type { AppPackageView } from '@nextclaw/client-sdk';
+import { Boxes, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
+import { AppMarketplaceDialog } from '@/features/apps/components/app-marketplace-dialog';
+import { AppPackageCard } from '@/features/apps/components/app-package-card';
+import {
+  useAppPackageMutation,
+  useAppPackages,
+  type AppPackageMutationInput,
+} from '@/features/apps/hooks/use-app-packages';
+import {
+  useGrantPanelAppClient,
+  usePanelApps,
+  useRecordPanelAppOpened,
+} from '@/features/panel-apps';
+import { Button } from '@/shared/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
+import { Input } from '@/shared/components/ui/input';
+import { Skeleton } from '@/shared/components/ui/skeleton';
+import { t } from '@/shared/lib/i18n';
+
+export function AppPackagesPanel({
+  headerContent,
+  onOpenPanelApp,
+}: {
+  headerContent?: ReactNode;
+  onOpenPanelApp: (entry: PanelAppEntryView) => void;
+}) {
+  const appPackages = useAppPackages();
+  const panelApps = usePanelApps();
+  const lifecycle = useAppPackageMutation();
+  const recordOpened = useRecordPanelAppOpened();
+  const grantClient = useGrantPanelAppClient();
+  const presenter = useAppPresenter();
+  const [installOpen, setInstallOpen] = useState(false);
+  const [installSource, setInstallSource] = useState('');
+  const [marketplaceOpen, setMarketplaceOpen] = useState(false);
+
+  const runMutation = (input: AppPackageMutationInput, onSuccess?: () => void) => {
+    lifecycle.reset();
+    lifecycle.mutate(input, { onSuccess });
+  };
+
+  const openPanelApp = async (entry: PanelAppEntryView) => {
+    if (entry.clientDeclared && !entry.clientGranted) {
+      const allowed = await presenter.serviceActionAuthorizationManager.requestAuthorization({
+        panelAppId: entry.appId,
+        actions: [{
+          actionId: 'nextclaw.client',
+          actionTitle: t('panelAppsClientGrantTitle'),
+          actionDescription: t('panelAppsClientGrantDescription'),
+          risk: 'dangerous',
+        }],
+      });
+      if (!allowed) return;
+      await grantClient.mutateAsync(entry.appId);
+    }
+    try {
+      onOpenPanelApp(await recordOpened.mutateAsync(entry.id));
+    } catch {
+      onOpenPanelApp(entry);
+    }
+  };
+
+  const submitInstall = (event: FormEvent) => {
+    event.preventDefault();
+    const source = installSource.trim();
+    if (!source) return;
+    runMutation({ action: 'install', source }, () => {
+      setInstallOpen(false);
+      setInstallSource('');
+    });
+  };
+
+  const refetch = () => {
+    void appPackages.refetch();
+    void panelApps.refetch();
+  };
+
+  return (
+    <div className="@container flex h-full min-h-0 flex-col bg-card text-card-foreground">
+      <div className="flex flex-col gap-2 border-b border-border/70 px-4 py-3 @[42rem]:flex-row @[42rem]:items-center @[42rem]:justify-between">
+        <div className="w-full min-w-0 overflow-x-auto @[42rem]:flex-1">{headerContent}</div>
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          <button
+            type="button"
+            onClick={refetch}
+            className="rounded-full p-2 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"
+            title={t('appPackagesRefresh')}
+            aria-label={t('appPackagesRefresh')}
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+          </button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              lifecycle.reset();
+              setMarketplaceOpen(true);
+            }}
+          >
+            <Store className="mr-1.5 h-3.5 w-3.5" />
+            {t('appPackagesBrowse')}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              lifecycle.reset();
+              setInstallOpen(true);
+            }}
+          >
+            <PackagePlus className="mr-1.5 h-3.5 w-3.5" />
+            {t('appPackagesInstall')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto w-full max-w-2xl p-3 sm:p-4">
+          <div className="mb-3 rounded-xl bg-gradient-to-br from-primary/[0.09] via-primary/[0.045] to-transparent px-3.5 py-3 ring-1 ring-primary/10">
+            <div className="flex items-start gap-2.5">
+              <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <Boxes className="h-4 w-4" />
+              </span>
+              <div>
+                <h1 className="text-sm font-semibold text-foreground">{t('appPackagesLibraryTitle')}</h1>
+                <p className="mt-0.5 text-xs leading-5 text-muted-foreground">
+                  {t('appPackagesLibraryDescription')}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {lifecycle.isError ? (
+            <div role="alert" className="mb-3 rounded-xl bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive ring-1 ring-destructive/15">
+              {lifecycle.error instanceof Error ? lifecycle.error.message : t('appPackagesActionFailed')}
+            </div>
+          ) : null}
+
+          <AppPackageLibrary
+            error={getPackageLoadError(appPackages.error, panelApps.error)}
+            isLoading={appPackages.isLoading || panelApps.isLoading}
+            isPending={lifecycle.isPending}
+            mutationAppId={'appId' in (lifecycle.variables ?? {})
+              ? (lifecycle.variables as { appId: string }).appId
+              : undefined}
+            packages={appPackages.data?.entries ?? []}
+            panelApps={panelApps.data?.entries ?? []}
+            onInstall={() => setInstallOpen(true)}
+            onMutate={runMutation}
+            onOpenPanelApp={(entry) => void openPanelApp(entry)}
+          />
+        </div>
+      </div>
+
+      <AppMarketplaceDialog
+        error={lifecycle.error instanceof Error ? lifecycle.error : null}
+        installedPackages={appPackages.data?.entries ?? []}
+        installingSource={lifecycle.variables?.action === 'install'
+          ? lifecycle.variables.source
+          : undefined}
+        isPending={lifecycle.isPending}
+        open={marketplaceOpen}
+        onOpenChange={setMarketplaceOpen}
+        onInstall={(source, registryUrl) => runMutation({
+          action: 'install',
+          source,
+          registryUrl,
+        }, () => setMarketplaceOpen(false))}
+      />
+
+      <Dialog open={installOpen} onOpenChange={setInstallOpen}>
+        <DialogContent className="max-w-md [&>:last-child]:hidden">
+          <form onSubmit={submitInstall}>
+            <DialogHeader>
+              <DialogTitle>{t('appPackagesInstallTitle')}</DialogTitle>
+              <DialogDescription>{t('appPackagesInstallDescription')}</DialogDescription>
+            </DialogHeader>
+            <div className="mt-4 space-y-3">
+              <Input
+                autoFocus
+                value={installSource}
+                onChange={(event) => setInstallSource(event.target.value)}
+                placeholder={t('appPackagesInstallPlaceholder')}
+                aria-label={t('appPackagesInstallSource')}
+              />
+              <div className="flex items-start gap-2 rounded-xl bg-muted/60 px-3 py-2.5 text-xs leading-5 text-muted-foreground">
+                <ShieldCheck className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                <span>{t('appPackagesInstallTrustHint')}</span>
+              </div>
+              {lifecycle.isError ? (
+                <p role="alert" className="text-xs text-destructive">
+                  {lifecycle.error instanceof Error ? lifecycle.error.message : t('appPackagesActionFailed')}
+                </p>
+              ) : null}
+            </div>
+            <DialogFooter className="mt-5 gap-2 sm:gap-0">
+              <Button type="button" variant="outline" onClick={() => setInstallOpen(false)}>
+                {t('cancel')}
+              </Button>
+              <Button type="submit" disabled={!installSource.trim() || lifecycle.isPending}>
+                {lifecycle.isPending ? t('appPackagesInstalling') : t('appPackagesInstall')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function AppPackageLibrary({
+  error,
+  isLoading,
+  isPending,
+  mutationAppId,
+  onInstall,
+  onMutate,
+  onOpenPanelApp,
+  packages,
+  panelApps,
+}: {
+  error?: string;
+  isLoading: boolean;
+  isPending: boolean;
+  mutationAppId?: string;
+  onInstall: () => void;
+  onMutate: (input: AppPackageMutationInput) => void;
+  onOpenPanelApp: (entry: PanelAppEntryView) => void;
+  packages: AppPackageView[];
+  panelApps: PanelAppEntryView[];
+}) {
+  if (isLoading) {
+    return (
+      <div className="space-y-2.5" aria-label={t('appPackagesLoading')}>
+        <Skeleton className="h-44 w-full rounded-2xl" />
+        <Skeleton className="h-32 w-full rounded-2xl" />
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-4 text-sm text-destructive">
+        {error}
+      </div>
+    );
+  }
+  if (packages.length === 0) {
+    return (
+      <div className="flex flex-col items-center rounded-2xl border border-dashed border-border px-6 py-10 text-center">
+        <PackagePlus className="h-7 w-7 text-muted-foreground" />
+        <h2 className="mt-3 text-sm font-semibold text-foreground">{t('appPackagesEmptyTitle')}</h2>
+        <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
+          {t('appPackagesEmptyDescription')}
+        </p>
+        <Button type="button" size="sm" className="mt-4" onClick={onInstall}>
+          {t('appPackagesInstall')}
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <div className="space-y-2.5">
+      {packages.map((appPackage) => (
+        <AppPackageCard
+          key={appPackage.id}
+          appPackage={appPackage}
+          panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
+          isPending={isPending && mutationAppId === appPackage.id}
+          onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
+          onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
+          onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
+          onRollback={(version) => onMutate({
+            action: 'rollback',
+            appId: appPackage.id,
+            version,
+          })}
+          onUninstall={() => onMutate({ action: 'uninstall', appId: appPackage.id })}
+          onOpenPanelApp={onOpenPanelApp}
+        />
+      ))}
+    </div>
+  );
+}
+
+function getPackageLoadError(...errors: unknown[]): string | undefined {
+  const error = errors.find((candidate): candidate is Error => candidate instanceof Error);
+  return error?.message || (errors.some(Boolean) ? t('appPackagesLoadFailed') : undefined);
+}

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

@@ -1,11 +1,12 @@
-import { AppWindow, Server } from 'lucide-react';
+import { AppWindow, Boxes, Server } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
+import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
 import { PanelAppsList } from '@/features/panel-apps';
 import { ServiceAppsPanel } from '@/features/service-apps';
 import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
 import { t } from '@/shared/lib/i18n';
 
-export type AppsPanelTab = 'panel-apps' | 'service-apps';
+export type AppsPanelTab = 'apps' | 'panel-apps' | 'service-apps';
 
 export function AppsPanel({
   activeTab,
@@ -18,7 +19,11 @@ export function AppsPanel({
 }) {
   const headerTabs = (
     <Tabs value={activeTab} onValueChange={(value) => onActiveTabChange(value as AppsPanelTab)}>
-      <TabsList className="grid h-auto w-[min(340px,100%)] grid-cols-2 rounded-lg bg-gray-100/70 p-0.5">
+      <TabsList className="grid h-auto w-[min(390px,100%)] grid-cols-3 rounded-lg bg-muted/70 p-0.5">
+        <TabsTrigger value="apps" className="gap-1.5 px-2 py-1.5 text-xs">
+          <Boxes className="h-3.5 w-3.5" />
+          {t('appsTitle')}
+        </TabsTrigger>
         <TabsTrigger value="panel-apps" className="gap-1.5 px-2 py-1.5 text-xs">
           <AppWindow className="h-3.5 w-3.5" />
           {t('panelAppsTitle')}
@@ -33,7 +38,9 @@ export function AppsPanel({
 
   return (
     <div className="h-full min-h-0 bg-white">
-      {activeTab === 'panel-apps' ? (
+      {activeTab === 'apps' ? (
+        <AppPackagesPanel headerContent={headerTabs} onOpenPanelApp={onOpenPanelApp} />
+      ) : activeTab === 'panel-apps' ? (
         <PanelAppsList headerContent={headerTabs} onOpenPanelApp={onOpenPanelApp} />
       ) : (
         <ServiceAppsPanel headerContent={headerTabs} />

package/src/features/apps/hooks/use-app-marketplace.ts

@@ -0,0 +1,95 @@
+import { useQuery } from '@tanstack/react-query';
+
+const APP_MARKETPLACE_QUERY_KEY = ['app-marketplace'] as const;
+const APP_MARKETPLACE_BASE_URL = 'https://apps-registry.nextclaw.io';
+
+export type AppMarketplaceItemView = {
+  id: string;
+  slug: string;
+  appId: string;
+  name: string;
+  summary: string;
+  summaryI18n: Record<string, string>;
+  tags: string[];
+  latestVersion: string;
+  featured: boolean;
+  publisher: {
+    id: string;
+    name: string;
+    url?: string;
+  };
+  install: {
+    kind: 'registry';
+    spec: string;
+    registry: string;
+  };
+  webUrl: string;
+};
+
+export type AppMarketplaceListView = {
+  total: number;
+  items: AppMarketplaceItemView[];
+};
+
+export function useAppMarketplace(enabled: boolean) {
+  return useQuery({
+    queryKey: APP_MARKETPLACE_QUERY_KEY,
+    queryFn: fetchAppMarketplace,
+    enabled,
+    retry: 1,
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+async function fetchAppMarketplace(): Promise<AppMarketplaceListView> {
+  const response = await fetch(
+    `${APP_MARKETPLACE_BASE_URL}/api/v1/apps/items?page=1&pageSize=100`,
+    { headers: { accept: 'application/json' } },
+  );
+  if (!response.ok) {
+    throw new Error(`Marketplace request failed (${response.status})`);
+  }
+
+  const payload: unknown = await response.json();
+  if (!isRecord(payload) || payload.ok !== true || !isRecord(payload.data)) {
+    throw new Error('Marketplace returned an invalid response');
+  }
+
+  const items = Array.isArray(payload.data.items)
+    ? payload.data.items.filter(isAppMarketplaceItem)
+    : [];
+  return {
+    total: typeof payload.data.total === 'number' ? payload.data.total : items.length,
+    items,
+  };
+}
+
+function isAppMarketplaceItem(value: unknown): value is AppMarketplaceItemView {
+  if (!isRecord(value) || !isRecord(value.install) || !isRecord(value.publisher)) {
+    return false;
+  }
+  return typeof value.id === 'string'
+    && typeof value.slug === 'string'
+    && typeof value.appId === 'string'
+    && typeof value.name === 'string'
+    && typeof value.summary === 'string'
+    && isStringRecord(value.summaryI18n)
+    && Array.isArray(value.tags)
+    && value.tags.every((tag) => typeof tag === 'string')
+    && typeof value.latestVersion === 'string'
+    && typeof value.featured === 'boolean'
+    && typeof value.publisher.id === 'string'
+    && typeof value.publisher.name === 'string'
+    && value.install.kind === 'registry'
+    && typeof value.install.spec === 'string'
+    && typeof value.install.registry === 'string'
+    && typeof value.webUrl === 'string';
+}
+
+function isStringRecord(value: unknown): value is Record<string, string> {
+  return isRecord(value) && Object.values(value).every((entry) => typeof entry === 'string');
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}

package/src/features/apps/hooks/use-app-packages.ts

@@ -0,0 +1,59 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { nextclawClient } from '@/shared/lib/api';
+
+const APP_PACKAGES_QUERY_KEY = ['app-packages'] as const;
+const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
+const SERVICE_APPS_QUERY_KEY = ['service-apps'] as const;
+const SERVICE_ACTIONS_QUERY_KEY = ['service-actions'] as const;
+
+export type AppPackageMutationInput =
+  | { action: 'enable'; appId: string }
+  | { action: 'disable'; appId: string }
+  | { action: 'install'; source: string; registryUrl?: string }
+  | { action: 'update'; appId: string }
+  | { action: 'rollback'; appId: string; version: string }
+  | { action: 'uninstall'; appId: string; purgeData?: boolean };
+
+export function useAppPackages() {
+  return useQuery({
+    queryKey: APP_PACKAGES_QUERY_KEY,
+    queryFn: () => nextclawClient.appPackages.list(),
+    staleTime: 0,
+  });
+}
+
+export function useAppPackageMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (input: AppPackageMutationInput) => {
+      switch (input.action) {
+        case 'enable':
+          return await nextclawClient.appPackages.enable(input.appId);
+        case 'disable':
+          return await nextclawClient.appPackages.disable(input.appId);
+        case 'install':
+          return await nextclawClient.appPackages.install({
+            source: input.source,
+            registryUrl: input.registryUrl,
+          });
+        case 'update':
+          return await nextclawClient.appPackages.update(input.appId);
+        case 'rollback':
+          return await nextclawClient.appPackages.rollback(input.appId, input.version);
+        case 'uninstall':
+          return await nextclawClient.appPackages.uninstall(
+            input.appId,
+            input.purgeData ?? false,
+          );
+      }
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: APP_PACKAGES_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
+      ]);
+    },
+  });
+}

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -1,3 +1,4 @@
+import { Clock3, Folder } from 'lucide-react';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 
@@ -5,22 +6,44 @@ type ChatSidebarListModeSwitchProps = { isProjectFirstView: boolean; onSelectMod
 
 export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }: ChatSidebarListModeSwitchProps) {
   return (
-    <div className="flex items-center gap-1.5 text-[11px]">
+    <div
+      role="group"
+      aria-label={t('chatSidebarViewMode')}
+      className="relative grid h-7 grid-cols-2 rounded-full bg-foreground/[0.04] p-0.5 text-[11px]"
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'pointer-events-none absolute bottom-0.5 left-0.5 top-0.5 w-[calc(50%-2px)] rounded-full bg-gray-200/70 transition-transform duration-200 ease-out motion-reduce:transition-none',
+          isProjectFirstView && 'translate-x-full',
+        )}
+      />
       <button
         type="button"
         aria-pressed={!isProjectFirstView}
         onClick={() => onSelectMode('time-first')}
-        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
+        className={cn(
+          'relative z-10 inline-flex h-6 items-center justify-center gap-1 rounded-full px-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+          isProjectFirstView
+            ? 'text-muted-foreground hover:text-foreground'
+            : 'font-medium text-foreground',
+        )}
       >
+        <Clock3 aria-hidden="true" className="h-3.5 w-3.5" />
         {t('chatSidebarViewTime')}
       </button>
-      <span className="text-muted-foreground/35">/</span>
       <button
         type="button"
         aria-pressed={isProjectFirstView}
         onClick={() => onSelectMode('project-first')}
-        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
+        className={cn(
+          'relative z-10 inline-flex h-6 items-center justify-center gap-1 rounded-full px-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+          isProjectFirstView
+            ? 'font-medium text-foreground'
+            : 'text-muted-foreground hover:text-foreground',
+        )}
       >
+        <Folder aria-hidden="true" className="h-3.5 w-3.5" />
         {t('chatSidebarViewProject')}
       </button>
     </div>

package/src/features/chat/components/layout/__tests__/chat-sidebar-session-area.test.tsx

@@ -25,13 +25,34 @@ function renderSessionArea(isProjectFirstView: boolean) {
 }
 
 describe("ChatSidebarSessionArea", () => {
-  it("reserves the action-row height while switching list modes", () => {
+  it("renders an accessible animated segmented control for list modes", () => {
     const { onSelectMode } = renderSessionArea(false);
+    const modeGroup = screen.getByRole("group", { name: "Session list view" });
+    const timeButton = screen.getByRole("button", { name: "Time" });
+    const projectButton = screen.getByRole("button", { name: "Project" });
 
-    expect(
-      screen.getByRole("button", { name: "Time" }).parentElement?.parentElement?.className,
-    ).toContain("h-7");
-    fireEvent.click(screen.getByRole("button", { name: "Project" }));
+    expect(modeGroup.className).toContain("h-7");
+    expect(modeGroup.className).toContain("rounded-full");
+    expect(modeGroup.className).toContain("bg-foreground/[0.04]");
+    expect(modeGroup.className).not.toContain("border");
+    expect(modeGroup.className).not.toContain("shadow-inner");
+    const modeIndicator = modeGroup.querySelector("span[aria-hidden='true']");
+    expect(modeIndicator?.className).toContain("rounded-full");
+    expect(modeIndicator?.className).toContain("bg-gray-200/70");
+    expect(modeIndicator?.className).not.toContain("shadow-");
+    expect(modeIndicator?.className).not.toContain("ring-");
+    expect(modeIndicator?.className).toContain("transition-transform");
+    expect(timeButton.getAttribute("aria-pressed")).toBe("true");
+    expect(projectButton.getAttribute("aria-pressed")).toBe("false");
+    expect(timeButton.className).toContain("rounded-full");
+    expect(projectButton.className).toContain("rounded-full");
+    expect(timeButton.querySelector("svg")).not.toBeNull();
+    expect(projectButton.querySelector("svg")).not.toBeNull();
+    expect(modeGroup.parentElement?.className).toContain("justify-end");
+    expect(modeGroup.parentElement?.className).toContain("h-8");
+    expect(modeGroup.parentElement?.lastElementChild).toBe(modeGroup);
+
+    fireEvent.click(projectButton);
 
     expect(onSelectMode).toHaveBeenCalledWith("project-first");
   });
@@ -39,12 +60,22 @@ describe("ChatSidebarSessionArea", () => {
   it("uses a folder-plus icon for the add-project action", () => {
     const { onAddProject } = renderSessionArea(true);
     const addProjectButton = screen.getByRole("button", { name: "Add Project" });
+    const modeIndicator = screen
+      .getByRole("group", { name: "Session list view" })
+      .querySelector("span[aria-hidden='true']");
 
     expect(
       addProjectButton
         .querySelector("svg")
         ?.classList.contains("lucide-folder-plus"),
     ).toBe(true);
+    expect(addProjectButton.className).toContain("hover:bg-gray-200/60");
+    expect(modeIndicator?.className).toContain("translate-x-full");
+    expect(modeIndicator?.className).toContain("motion-reduce:transition-none");
+    expect(screen.getByRole("button", { name: "Project" }).getAttribute("aria-pressed")).toBe(
+      "true",
+    );
+    expect(modeIndicator?.parentElement?.previousElementSibling).toBe(addProjectButton);
     fireEvent.click(addProjectButton);
 
     expect(onAddProject).toHaveBeenCalledOnce();

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -165,20 +165,19 @@ export function ChatSidebarSessionArea({
 
   return (
     <>
-      <div className="flex items-center justify-end px-4 pb-1 pt-2">
-        <div className="flex h-7 items-center gap-1.5">
-          {isProjectFirstView ? (
-            <IconActionButton
-              icon={<FolderPlus className="h-3.5 w-3.5" />}
-              label={t("chatProjectAdd")}
-              onClick={onAddProject}
-            />
-          ) : null}
-          <ChatSidebarListModeSwitch
-            isProjectFirstView={isProjectFirstView}
-            onSelectMode={onSelectMode}
+      <div className="flex h-8 items-center justify-end gap-1 px-3">
+        {isProjectFirstView ? (
+          <IconActionButton
+            icon={<FolderPlus className="h-3.5 w-3.5" />}
+            label={t("chatProjectAdd")}
+            tone="surface"
+            onClick={onAddProject}
           />
-        </div>
+        ) : null}
+        <ChatSidebarListModeSwitch
+          isProjectFirstView={isProjectFirstView}
+          onSelectMode={onSelectMode}
+        />
       </div>
 
       <div