@nextclaw/ui 0.15.25 → 0.15.27

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

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { AppPackageOperationStatus, AppPackageOperationView } from '@nextclaw/client-sdk';
+import { nextclawClient } from '@/shared/lib/api';
+import type { AppPackageOperationSettlementManager } from '@/features/apps/managers/app-package-operation-settlement.manager';
+
+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;
+const APP_PACKAGE_OPERATIONS_QUERY_KEY = ['app-package-operations'] as const;
+
+const ACTIVE_OPERATION_STATUSES = new Set<AppPackageOperationStatus>([
+  'queued',
+  'resolving',
+  'downloading',
+  'verifying',
+  'installing',
+  'finalizing',
+]);
+
+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 useAppPackageOperations() {
+  return useQuery({
+    queryKey: APP_PACKAGE_OPERATIONS_QUERY_KEY,
+    queryFn: () => nextclawClient.appPackages.listOperations(),
+    refetchInterval: (query) => {
+      const entries = query.state.data?.entries ?? [];
+      return entries.some((entry) => isAppPackageOperationActive(entry.status)) ? 500 : false;
+    },
+    staleTime: 0,
+  });
+}
+
+export function isAppPackageOperationActive(status: AppPackageOperationStatus): boolean {
+  return ACTIVE_OPERATION_STATUSES.has(status);
+}
+
+export function useAppPackageOperationSettlement({
+  isLoaded,
+  operations,
+  refetchPackages,
+  refetchPanels,
+  settlementManager,
+}: {
+  isLoaded: boolean;
+  operations: AppPackageOperationView[];
+  refetchPackages: () => Promise<unknown>;
+  refetchPanels: () => Promise<{
+    data?: { entries: Array<{ id: string; packageId?: string }> };
+  }>;
+  settlementManager: AppPackageOperationSettlementManager;
+}) {
+  useEffect(() => {
+    settlementManager.settle({
+      isLoaded,
+      operations,
+      refetchPackages,
+      refetchPanels,
+    });
+  }, [isLoaded, operations, refetchPackages, refetchPanels, settlementManager]);
+}
+
+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.startInstall({
+            source: input.source,
+            registryUrl: input.registryUrl,
+          });
+        case 'update':
+          return await nextclawClient.appPackages.startUpdate(input.appId);
+        case 'rollback':
+          return await nextclawClient.appPackages.startRollback(input.appId, input.version);
+        case 'uninstall':
+          return await nextclawClient.appPackages.startUninstall(
+            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 }),
+        queryClient.invalidateQueries({ queryKey: APP_PACKAGE_OPERATIONS_QUERY_KEY }),
+      ]);
+    },
+  });
+}

package/src/features/apps/index.ts

@@ -1 +1,2 @@
 export { AppsPanel, type AppsPanelTab } from './components/apps-panel';
+export { AppPackageOperationSettlementManager } from './managers/app-package-operation-settlement.manager';

package/src/features/apps/managers/__tests__/app-package-operation-settlement.manager.test.ts

@@ -0,0 +1,81 @@
+import type { AppPackageOperationView } from '@nextclaw/client-sdk';
+import { describe, expect, it, vi } from 'vitest';
+import { AppPackageOperationSettlementManager } from '@/features/apps/managers/app-package-operation-settlement.manager';
+
+const mocks = vi.hoisted(() => ({
+  error: vi.fn(),
+  success: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({ toast: mocks }));
+
+function operation(
+  id: string,
+  overrides: Partial<AppPackageOperationView> = {},
+): AppPackageOperationView {
+  return {
+    id,
+    action: 'update',
+    appId: 'nextclaw.personal-organizer',
+    status: 'succeeded',
+    completedSteps: 5,
+    totalSteps: 5,
+    createdAt: '2026-08-12T00:00:00.000Z',
+    updatedAt: '2026-08-12T00:00:01.000Z',
+    completedAt: '2026-08-12T00:00:01.000Z',
+    result: {
+      appId: 'nextclaw.personal-organizer',
+      activeVersion: '0.1.1',
+      changed: true,
+    },
+    ...overrides,
+  };
+}
+
+describe('AppPackageOperationSettlementManager', () => {
+  it('ignores historical terminal operations and settles each new operation once', async () => {
+    const reloadByDedupeKeys = vi.fn();
+    const refetchPackages = vi.fn(async () => undefined);
+    const refetchPanels = vi.fn(async () => ({
+      data: {
+        entries: [
+          { id: 'todos', packageId: 'nextclaw.personal-organizer' },
+          { id: 'other', packageId: 'nextclaw.other' },
+        ],
+      },
+    }));
+    const manager = new AppPackageOperationSettlementManager({
+      reloadByDedupeKeys,
+    } as never);
+    const historical = operation('historical');
+
+    manager.settle({
+      isLoaded: true,
+      operations: [historical],
+      refetchPackages,
+      refetchPanels,
+    });
+    expect(mocks.success).not.toHaveBeenCalled();
+
+    const completed = operation('completed');
+    manager.settle({
+      isLoaded: true,
+      operations: [completed, historical],
+      refetchPackages,
+      refetchPanels,
+    });
+    manager.settle({
+      isLoaded: true,
+      operations: [completed, historical],
+      refetchPackages,
+      refetchPanels,
+    });
+
+    await vi.waitFor(() => {
+      expect(refetchPackages).toHaveBeenCalledTimes(1);
+      expect(refetchPanels).toHaveBeenCalledTimes(1);
+      expect(reloadByDedupeKeys).toHaveBeenCalledWith(['panel-app:todos']);
+    });
+    expect(mocks.success).toHaveBeenCalledTimes(1);
+  });
+});

package/src/features/apps/managers/app-package-operation-settlement.manager.ts

@@ -0,0 +1,80 @@
+import type { AppPackageOperationView } from '@nextclaw/client-sdk';
+import { toast } from 'sonner';
+import type { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
+import { t } from '@/shared/lib/i18n';
+import { isAppPackageOperationActive } from '@/features/apps/hooks/use-app-packages';
+
+type RefetchPanels = () => Promise<{
+  data?: { entries: Array<{ id: string; packageId?: string }> };
+}>;
+
+export class AppPackageOperationSettlementManager {
+  private initialized = false;
+  private readonly knownTerminalOperationIds = new Set<string>();
+
+  constructor(private readonly docBrowserManager: DocBrowserManager) {}
+
+  readonly settle = ({
+    isLoaded,
+    operations,
+    refetchPackages,
+    refetchPanels,
+  }: {
+    isLoaded: boolean;
+    operations: AppPackageOperationView[];
+    refetchPackages: () => Promise<unknown>;
+    refetchPanels: RefetchPanels;
+  }): void => {
+    if (!isLoaded) return;
+    const terminal = operations.filter(
+      (entry) => !isAppPackageOperationActive(entry.status),
+    );
+    if (!this.initialized) {
+      terminal.forEach((entry) => this.knownTerminalOperationIds.add(entry.id));
+      this.initialized = true;
+      return;
+    }
+    terminal.forEach((operation) => {
+      if (this.knownTerminalOperationIds.has(operation.id)) return;
+      this.knownTerminalOperationIds.add(operation.id);
+      this.settleOperation(operation, refetchPackages, refetchPanels);
+    });
+  };
+
+  private readonly settleOperation = (
+    operation: AppPackageOperationView,
+    refetchPackages: () => Promise<unknown>,
+    refetchPanels: RefetchPanels,
+  ): void => {
+    if (operation.status === 'succeeded') {
+      toast.success(operationSuccessLabel(operation));
+      void Promise.all([refetchPackages(), refetchPanels()]).then(([, panelsResult]) => {
+        if (operation.action !== 'rollback' && operation.action !== 'update') return;
+        this.docBrowserManager.reloadByDedupeKeys(
+          panelsResult.data?.entries
+            .filter((entry) => entry.packageId === operation.appId)
+            .map((entry) => `panel-app:${entry.id}`) ?? [],
+        );
+      });
+      return;
+    }
+    if (operation.status === 'failed' || operation.status === 'interrupted') {
+      void refetchPackages();
+      void refetchPanels();
+      toast.error(operation.error ?? t('appPackagesActionFailed'));
+    }
+  };
+}
+
+function operationSuccessLabel(operation: AppPackageOperationView): string {
+  switch (operation.action) {
+    case 'install': return t('appPackagesInstallCompleted');
+    case 'update': return operation.result?.changed === false
+      ? t('appPackagesAlreadyCurrent')
+      : t('appPackagesUpdateCompleted');
+    case 'rollback': return operation.result?.changed === false
+      ? t('appPackagesAlreadyOnVersion')
+      : t('appPackagesRollbackCompleted');
+    case 'uninstall': return t('appPackagesUninstallCompleted');
+  }
+}

package/src/features/apps/services/app-marketplace.service.ts

@@ -0,0 +1,223 @@
+import type {
+  AppMarketplaceCatalogParams,
+  AppMarketplaceCatalogView,
+  AppMarketplaceDetailView,
+  AppMarketplaceItemView,
+} from '@/features/apps/types/app-marketplace.types';
+
+const APP_MARKETPLACE_BASE_URL = 'https://apps-registry.nextclaw.io';
+const UNSUPPORTED_CATALOG_STATUSES = new Set([404, 405, 501]);
+const EXPLICIT_DEV_PREVIEW_COVER_BASE_URL = import.meta.env
+  .VITE_APP_MARKETPLACE_PREVIEW_COVER_BASE_URL?.replace(/\/$/, '');
+const DEFAULT_DEV_PREVIEW_COVER_BASE_URL = import.meta.env.DEV && !import.meta.env.VITEST
+  ? '/__app-marketplace-preview'
+  : undefined;
+const DEV_PREVIEW_COVERS = new Set([
+  'hello-notes',
+  'personal-organizer',
+  'starter-card',
+  'workspace-glance',
+]);
+
+type AppMarketplaceRequestParams = AppMarketplaceCatalogParams & {
+  cursor?: string;
+  limit?: number;
+};
+
+export async function fetchAppMarketplace(
+  params: AppMarketplaceRequestParams = {},
+  signal?: AbortSignal,
+): Promise<AppMarketplaceCatalogView> {
+  const response = await fetchAppMarketplaceV2(params, signal);
+  if (UNSUPPORTED_CATALOG_STATUSES.has(response.status)) {
+    return await fetchLegacyAppMarketplace(params, signal);
+  }
+  return await readAppMarketplaceCatalogResponse(response);
+}
+
+export async function fetchAppMarketplaceDetail(
+  slug: string,
+  signal?: AbortSignal,
+): Promise<AppMarketplaceDetailView> {
+  const response = await fetch(
+    `${APP_MARKETPLACE_BASE_URL}/api/v1/apps/items/${encodeURIComponent(slug)}`,
+    { headers: { accept: 'application/json' }, signal },
+  );
+  if (!response.ok) {
+    throw new Error(`Marketplace detail 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 app detail');
+  }
+  const { data: item } = payload;
+  const rawDetail = item as Record<string, unknown>;
+  if (!isAppMarketplaceItem(item) || !isRecord(rawDetail.manifest) || !isRecord(rawDetail.permissions)) {
+    throw new Error('Marketplace returned an invalid app detail');
+  }
+  const { manifest, permissions } = rawDetail;
+  const components = Array.isArray(manifest.components)
+    ? manifest.components.filter((component: unknown): component is { kind: 'panel' | 'service'; path: string } =>
+        isRecord(component)
+        && (component.kind === 'panel' || component.kind === 'service')
+        && typeof component.path === 'string')
+    : undefined;
+  return {
+    ...withDevPreviewCover(item),
+    description: typeof rawDetail.description === 'string' ? rawDetail.description : undefined,
+    descriptionI18n: isStringRecord(rawDetail.descriptionI18n) ? rawDetail.descriptionI18n : undefined,
+    manifest: {
+      schemaVersion: manifest.schemaVersion === 2 ? 2 : 1,
+      icon: typeof manifest.icon === 'string' ? manifest.icon : undefined,
+      engines: isRecord(manifest.engines) && typeof manifest.engines.nextclaw === 'string'
+        ? { nextclaw: manifest.engines.nextclaw }
+        : undefined,
+      components,
+    },
+    permissions: permissions as AppMarketplaceDetailView['permissions'],
+  };
+}
+
+export function withDevPreviewCover<T extends AppMarketplaceItemView>(item: T): T {
+  if (item.coverUrl) {
+    return item;
+  }
+  const previewCoverUrl = readDevPreviewCoverUrl(item.slug);
+  if (item.publisher.id !== 'nextclaw' || !previewCoverUrl) {
+    return item;
+  }
+  return {
+    ...item,
+    coverUrl: previewCoverUrl,
+    coverPreview: true,
+  };
+}
+
+async function fetchAppMarketplaceV2(
+  params: AppMarketplaceRequestParams,
+  signal?: AbortSignal,
+): Promise<Response> {
+  const { cursor, featured, limit, publisher, q, sort, tag, tags } = params;
+  const search = new URLSearchParams();
+  if (q) search.set('q', q);
+  if (tag) search.set('tag', tag);
+  if (tags?.length) search.set('tags', tags.join(','));
+  if (publisher) search.set('publisher', publisher);
+  if (featured !== undefined) search.set('featured', String(featured));
+  if (sort) search.set('sort', sort);
+  if (cursor) search.set('cursor', cursor);
+  search.set('limit', String(limit ?? 24));
+  return await fetch(`${APP_MARKETPLACE_BASE_URL}/api/v2/apps/items?${search}`, {
+    headers: { accept: 'application/json' },
+    signal,
+  });
+}
+
+async function readAppMarketplaceCatalogResponse(
+  response: Response,
+): Promise<AppMarketplaceCatalogView> {
+  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 {
+    items: items.map(withDevPreviewCover),
+    nextCursor: typeof payload.data.nextCursor === 'string' ? payload.data.nextCursor : undefined,
+    hasMore: payload.data.hasMore === true,
+    query: typeof payload.data.query === 'string' ? payload.data.query : undefined,
+    tag: typeof payload.data.tag === 'string' ? payload.data.tag : undefined,
+    featured: typeof payload.data.featured === 'boolean' ? payload.data.featured : undefined,
+    sort: payload.data.sort === 'updated' || payload.data.sort === 'featured'
+      ? payload.data.sort
+      : 'relevance',
+  };
+}
+
+async function fetchLegacyAppMarketplace(
+  params: AppMarketplaceRequestParams,
+  signal?: AbortSignal,
+): Promise<AppMarketplaceCatalogView> {
+  const { featured, publisher, q, sort, tag, tags } = params;
+  const search = new URLSearchParams({ page: '1', pageSize: '100' });
+  if (q) search.set('q', q);
+  if (tag) search.set('tag', tag);
+  const response = await fetch(`${APP_MARKETPLACE_BASE_URL}/api/v1/apps/items?${search}`, {
+    headers: { accept: 'application/json' },
+    signal,
+  });
+  if (!response.ok) {
+    throw new Error(`Marketplace compatibility 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 compatibility response');
+  }
+
+  const items = Array.isArray(payload.data.items)
+    ? payload.data.items.filter(isAppMarketplaceItem)
+    : [];
+  const requiredTags = new Set(tags ?? []);
+  return {
+    items: items
+      .filter((item) => !publisher || item.publisher.id === publisher)
+      .filter((item) => featured === undefined || item.featured === featured)
+      .filter((item) => requiredTags.size === 0 || item.tags.some((tag) => requiredTags.has(tag)))
+      .map(withDevPreviewCover),
+    hasMore: false,
+    query: q,
+    tag,
+    tags,
+    featured,
+    sort: sort ?? (q ? 'relevance' : 'featured'),
+  };
+}
+
+function readDevPreviewCoverUrl(slug: string): string | undefined {
+  const baseUrl = EXPLICIT_DEV_PREVIEW_COVER_BASE_URL ?? DEFAULT_DEV_PREVIEW_COVER_BASE_URL;
+  if (baseUrl && DEV_PREVIEW_COVERS.has(slug)) {
+    return `${baseUrl}/${encodeURIComponent(slug)}.webp`;
+  }
+  return undefined;
+}
+
+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'
+    && (value.iconUrl === undefined || typeof value.iconUrl === 'string')
+    && (value.coverUrl === undefined || typeof value.coverUrl === 'string')
+    && (value.coverPreview === undefined || typeof value.coverPreview === 'boolean')
+    && (value.accentColor === undefined || typeof value.accentColor === '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/types/app-marketplace.types.ts

@@ -0,0 +1,75 @@
+export type AppMarketplaceItemView = {
+  id: string;
+  slug: string;
+  appId: string;
+  name: string;
+  iconUrl?: string;
+  coverUrl?: string;
+  coverPreview?: boolean;
+  accentColor?: 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 AppMarketplaceCatalogView = {
+  items: AppMarketplaceItemView[];
+  nextCursor?: string;
+  hasMore: boolean;
+  query?: string;
+  tag?: string;
+  tags?: string[];
+  featured?: boolean;
+  sort: 'relevance' | 'featured' | 'updated';
+};
+
+export type AppMarketplaceListView = {
+  items: AppMarketplaceItemView[];
+  hasMore: boolean;
+};
+
+export type AppMarketplaceDetailView = AppMarketplaceItemView & {
+  description?: string;
+  descriptionI18n?: Record<string, string>;
+  manifest: {
+    schemaVersion: 1 | 2;
+    icon?: string;
+    engines?: { nextclaw?: string };
+    components?: Array<{
+      kind: 'panel' | 'service';
+      path: string;
+    }>;
+  };
+  permissions: {
+    documentAccess?: Array<{
+      id: string;
+      mode: string;
+      description?: string;
+    }>;
+    allowedDomains?: string[];
+    storage?: { namespace?: string };
+    capabilities?: { hostBridge?: boolean };
+  };
+};
+
+export type AppMarketplaceCatalogParams = {
+  q?: string;
+  tag?: string;
+  tags?: string[];
+  featured?: boolean;
+  publisher?: string;
+  sort?: 'relevance' | 'featured' | 'updated';
+};

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>