@nextclaw/ui 0.12.35-beta.6 → 0.12.35

package/src/features/panel-apps/managers/panel-app-bridge.manager.ts

@@ -1,6 +1,12 @@
 import { NextClawClientError } from '@nextclaw/client-sdk';
 import type {
+  PanelAppAgentCapabilityView,
+  PanelAppAgentGenerateObjectRequestView,
+  PanelAppAgentGenerateObjectResultView,
+  PanelAppAgentSendRequestView,
+  PanelAppAgentSendResultView,
   PanelAppBridgeSessionView,
+  PanelAppCapabilityGrantView,
   ServiceActionGrantView,
   ServiceActionInvokeResultView,
   ServiceActionListView,
@@ -12,10 +18,17 @@ import { nextclawClient } from '@/shared/lib/api';
 type PanelAppBridgeRequest = {
   type: 'nextclaw:panel-app-service-actions:request';
   requestId: string;
-  method: 'invoke' | 'list' | 'requestGrant' | 'revokeGrant';
+  method:
+    | 'agent.generateObject'
+    | 'agent.send'
+    | 'invoke'
+    | 'list'
+    | 'requestGrant'
+    | 'revokeGrant';
   payload?: {
     actionId?: string;
-    input?: Record<string, unknown>;
+    input?: unknown;
+    request?: unknown;
   };
 };
 
@@ -42,14 +55,14 @@ export class PanelAppBridgeManager {
 
   constructor(private readonly authorizationManager: ServiceActionAuthorizationManager) {}
 
-  handleIframeMessage = ({ event, iframe, tab }: DocBrowserIframeMessageParams): void => {
+  handleIframeMessage = ({ event, iframe, iframeInstanceId, tab }: DocBrowserIframeMessageParams): void => {
     if (!this.isBridgeRequest(event.data)) {
       return;
     }
     if (!iframe?.contentWindow || event.source !== iframe.contentWindow) {
       return;
     }
-    void this.handleBridgeRequest({ event, iframe, tab }, event.data);
+    void this.handleBridgeRequest({ event, iframe, iframeInstanceId, tab }, event.data);
   };
 
   private handleBridgeRequest = async (
@@ -79,6 +92,9 @@ export class PanelAppBridgeManager {
     session: PanelAppBridgeSessionView,
     request: PanelAppBridgeRequest,
   ): Promise<
+    | PanelAppAgentGenerateObjectResultView
+    | PanelAppAgentSendResultView
+    | PanelAppCapabilityGrantView
     | ServiceActionGrantView
     | ServiceActionInvokeResultView
     | ServiceActionListView
@@ -98,6 +114,10 @@ export class PanelAppBridgeManager {
         );
       case 'invoke':
         return await this.invokeWithAuthorization(session, request);
+      case 'agent.send':
+        return await this.sendAgentMessageWithAuthorization(session, request);
+      case 'agent.generateObject':
+        return await this.generateAgentObjectWithAuthorization(session, request);
       default:
         throw new Error(`Unsupported panel bridge method: ${String(request.method)}`);
     }
@@ -111,22 +131,89 @@ export class PanelAppBridgeManager {
     try {
       return await nextclawClient.serviceApps.invokeServiceAction(
         actionId,
-        request.payload?.input,
+        this.readOptionalRecord(request.payload?.input),
         { bridgeSessionToken: session.token },
       );
     } catch (error) {
       if (!(error instanceof NextClawClientError) || error.code !== 'AUTHORIZATION_REQUIRED') {
         throw error;
       }
-      await this.confirmAndGrant(session, actionId, request.payload?.input);
+      await this.confirmAndGrant(session, actionId, this.readOptionalRecord(request.payload?.input));
       return await nextclawClient.serviceApps.invokeServiceAction(
         actionId,
-        request.payload?.input,
+        this.readOptionalRecord(request.payload?.input),
         { bridgeSessionToken: session.token },
       );
     }
   };
 
+  private sendAgentMessageWithAuthorization = async (
+    session: PanelAppBridgeSessionView,
+    request: PanelAppBridgeRequest,
+  ): Promise<PanelAppAgentSendResultView> => {
+    try {
+      return await nextclawClient.panelApps.sendAgentMessage(
+        this.readAgentSendRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    } catch (error) {
+      if (!(error instanceof NextClawClientError) || error.code !== 'AUTHORIZATION_REQUIRED') {
+        throw error;
+      }
+      await this.confirmAndGrantAgentCapability(session, 'agent:send');
+      return await nextclawClient.panelApps.sendAgentMessage(
+        this.readAgentSendRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    }
+  };
+
+  private generateAgentObjectWithAuthorization = async (
+    session: PanelAppBridgeSessionView,
+    request: PanelAppBridgeRequest,
+  ): Promise<PanelAppAgentGenerateObjectResultView> => {
+    try {
+      return await nextclawClient.panelApps.generateAgentObject(
+        this.readGenerateObjectRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    } catch (error) {
+      if (!(error instanceof NextClawClientError) || error.code !== 'AUTHORIZATION_REQUIRED') {
+        throw error;
+      }
+      await this.confirmAndGrantAgentCapability(session, 'agent:generateObject');
+      return await nextclawClient.panelApps.generateAgentObject(
+        this.readGenerateObjectRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    }
+  };
+
+  private confirmAndGrantAgentCapability = async (
+    session: PanelAppBridgeSessionView,
+    capability: PanelAppAgentCapabilityView,
+  ): Promise<PanelAppCapabilityGrantView> => {
+    const allowed = await this.authorizationManager.requestAuthorization({
+      panelAppId: session.panelAppId,
+      actionId: capability,
+      actionTitle: capability === 'agent:send' ? 'Send agent message' : 'Generate object',
+      actionDescription: capability === 'agent:send'
+        ? 'Send a message to a NextClaw Agent session.'
+        : 'Send context to a NextClaw Agent session and receive a structured object.',
+      risk: 'write',
+    });
+    if (!allowed) {
+      throw new NextClawClientError({
+        code: 'AUTHORIZATION_REJECTED',
+        message: `Permission rejected for ${capability}.`,
+      });
+    }
+    return await nextclawClient.panelApps.grantAgentCapability(
+      capability,
+      { bridgeSessionToken: session.token },
+    );
+  };
+
   private confirmAndGrant = async (
     session: PanelAppBridgeSessionView,
     actionId: string,
@@ -160,7 +247,9 @@ export class PanelAppBridgeManager {
     const actions = await nextclawClient.serviceApps.listServiceActions({
       bridgeSessionToken: session.token,
     });
-    return actions.actions.find((action) => action.id === actionId);
+    return actions.actions.find(
+      (action: ServiceActionListView['actions'][number]) => action.id === actionId,
+    );
   };
 
   private createInputPreview = (input: Record<string, unknown> | undefined): string | undefined => {
@@ -179,7 +268,7 @@ export class PanelAppBridgeManager {
     params: DocBrowserIframeMessageParams,
   ): Promise<PanelAppBridgeSessionView> => {
     const panelAppId = this.readPanelAppId(params.tab.currentUrl);
-    const key = `${params.tab.id}:${panelAppId}`;
+    const key = `${params.iframeInstanceId}:${panelAppId}`;
     let session = this.sessions.get(key);
     if (!session) {
       session = nextclawClient.panelApps.createBridgeSession({
@@ -208,6 +297,32 @@ export class PanelAppBridgeManager {
     return actionId;
   };
 
+  private readOptionalRecord = (value: unknown): Record<string, unknown> | undefined => {
+    if (value === undefined) {
+      return undefined;
+    }
+    return this.requireRecord(value, 'input');
+  };
+
+  private readAgentSendRequest = (
+    request: PanelAppBridgeRequest,
+  ): PanelAppAgentSendRequestView => ({
+    payload: this.requireRecord(request.payload?.request, 'agent.send request') as PanelAppAgentSendRequestView['payload'],
+  });
+
+  private readGenerateObjectRequest = (
+    request: PanelAppBridgeRequest,
+  ): PanelAppAgentGenerateObjectRequestView => ({
+    input: this.requireRecord(request.payload?.input, 'generateObject input') as PanelAppAgentGenerateObjectRequestView['input'],
+  });
+
+  private requireRecord = (value: unknown, label: string): Record<string, unknown> => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+      throw new Error(`${label} is required.`);
+    }
+    return value as Record<string, unknown>;
+  };
+
   private postResponse = (
     params: DocBrowserIframeMessageParams,
     response: PanelAppBridgeResponse,
@@ -239,6 +354,8 @@ export class PanelAppBridgeManager {
       candidate.type === 'nextclaw:panel-app-service-actions:request' &&
       typeof candidate.requestId === 'string' &&
       (candidate.method === 'invoke' ||
+        candidate.method === 'agent.send' ||
+        candidate.method === 'agent.generateObject' ||
         candidate.method === 'list' ||
         candidate.method === 'requestGrant' ||
         candidate.method === 'revokeGrant')

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -4,11 +4,15 @@ import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-brows
 import { getPresenter } from '@/app/presenters/app.presenter';
 import { AppsPanel, type AppsPanelTab } from '@/features/apps';
 import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
+import {
+  DOC_BROWSER_APPS_TAB_KIND,
+  DOC_BROWSER_APPS_URL,
+  DOC_BROWSER_SERVICE_APPS_URL,
+} from '@/shared/components/doc-browser/utils/doc-browser-route-registry.utils';
 import { t } from '@/shared/lib/i18n';
 
-export const APPS_TAB_KIND = 'apps';
+export const APPS_TAB_KIND = DOC_BROWSER_APPS_TAB_KIND;
 export const PANEL_APP_TAB_KIND = 'panel-app';
-const APPS_URL = 'nextclaw://apps';
 const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'panel-apps';
 const PANEL_APP_IFRAME_SANDBOX = [
   'allow-scripts',
@@ -26,7 +30,7 @@ function isAppsPanelTab(value: unknown): value is AppsPanelTab {
 }
 
 export function createAppsPanelUrl(tab: AppsPanelTab = DEFAULT_APPS_PANEL_TAB): string {
-  return tab === DEFAULT_APPS_PANEL_TAB ? APPS_URL : `${APPS_URL}?tab=${tab}`;
+  return tab === DEFAULT_APPS_PANEL_TAB ? DOC_BROWSER_APPS_URL : DOC_BROWSER_SERVICE_APPS_URL;
 }
 
 export function getAppsPanelTabFromUrl(url: string): AppsPanelTab {

package/src/features/panel-apps/utils/panel-app-view.utils.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { getPanelAppViewEntries } from './panel-app-view.utils';
+
+function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
+  const createdAt = overrides.createdAt ?? '2026-05-01T00:00:00.000Z';
+  const updatedAt = overrides.updatedAt ?? createdAt;
+  return {
+    id: overrides.id ?? overrides.fileName ?? 'demo.panel.html',
+    fileName: overrides.fileName ?? 'demo.panel.html',
+    title: overrides.title ?? 'Demo',
+    contentPath: overrides.contentPath ?? '/api/panel-apps/demo/content',
+    createdAt,
+    updatedAt,
+    sizeBytes: overrides.sizeBytes ?? 12,
+    favorite: overrides.favorite ?? false,
+    openCount: overrides.openCount ?? 0,
+    ...overrides,
+  };
+}
+
+describe('panel app view sorting', () => {
+  it('orders smart view by the latest panel app activity before favorite state', () => {
+    const entries = [
+      createPanelAppEntry({
+        fileName: 'old-favorite.panel.html',
+        title: 'Old Favorite',
+        favorite: true,
+      }),
+      createPanelAppEntry({
+        fileName: 'newly-created.panel.html',
+        title: 'Newly Created',
+        createdAt: '2026-05-27T12:00:00.000Z',
+        updatedAt: '2026-05-01T00:00:00.000Z',
+      }),
+      createPanelAppEntry({
+        fileName: 'just-opened.panel.html',
+        title: 'Just Opened',
+        lastOpenedAt: '2026-05-28T08:00:00.000Z',
+      }),
+    ];
+
+    expect(getPanelAppViewEntries(entries, 'smart').map((entry) => entry.fileName)).toEqual([
+      'just-opened.panel.html',
+      'newly-created.panel.html',
+      'old-favorite.panel.html',
+    ]);
+  });
+
+  it('keeps the dedicated recent-open view scoped to apps that were opened', () => {
+    const entries = [
+      createPanelAppEntry({
+        fileName: 'newly-created.panel.html',
+        createdAt: '2026-05-27T12:00:00.000Z',
+      }),
+      createPanelAppEntry({
+        fileName: 'just-opened.panel.html',
+        lastOpenedAt: '2026-05-28T08:00:00.000Z',
+      }),
+    ];
+
+    expect(getPanelAppViewEntries(entries, 'recent-open').map((entry) => entry.fileName)).toEqual([
+      'just-opened.panel.html',
+    ]);
+  });
+});

package/src/features/panel-apps/utils/panel-app-view.utils.ts

@@ -27,9 +27,8 @@ function comparePanelApps(left: PanelAppEntryView, right: PanelAppEntryView, mod
     return compareByName(left, right);
   }
   return (
+    comparePanelAppActivityDesc(left, right) ||
     Number(right.favorite) - Number(left.favorite) ||
-    compareIsoDesc(left.lastOpenedAt, right.lastOpenedAt) ||
-    compareIsoDesc(left.updatedAt, right.updatedAt) ||
     compareByName(left, right)
   );
 }
@@ -38,6 +37,18 @@ function compareByName(left: PanelAppEntryView, right: PanelAppEntryView): numbe
   return left.title.localeCompare(right.title);
 }
 
+function comparePanelAppActivityDesc(left: PanelAppEntryView, right: PanelAppEntryView): number {
+  return resolvePanelAppActivityMs(right) - resolvePanelAppActivityMs(left);
+}
+
+function resolvePanelAppActivityMs(entry: PanelAppEntryView): number {
+  return Math.max(
+    new Date(entry.lastOpenedAt ?? 0).getTime(),
+    new Date(entry.createdAt).getTime(),
+    new Date(entry.updatedAt).getTime(),
+  );
+}
+
 function compareIsoDesc(left?: string, right?: string): number {
   return new Date(right ?? 0).getTime() - new Date(left ?? 0).getTime();
 }

package/src/index.css

@@ -91,6 +91,29 @@
     background: hsl(var(--gray-400) / 0.48);
   }
 
+  .doc-browser-tab-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--gray-300) / 0.34) transparent;
+  }
+
+  .doc-browser-tab-scrollbar::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+  }
+
+  .doc-browser-tab-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .doc-browser-tab-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-300) / 0.34);
+    border-radius: 999px;
+  }
+
+  .doc-browser-tab-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--gray-400) / 0.44);
+  }
+
   /* ========================================
      GLASSMORPHISM
      ======================================== */

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

@@ -160,6 +160,176 @@ describe('DocBrowserProvider dedupe keys', () => {
       kind: 'apps',
     });
   });
+
+  it('opens the built-in start page without falling back to docs', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.openNewTab();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'nextclaw://new-tab',
+      kind: 'home',
+      title: 'Start Page',
+    });
+  });
+
+  it('infers built-in apps routes without component-level options', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('nextclaw://apps?tab=service-apps');
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'nextclaw://apps?tab=service-apps',
+      dedupeKey: 'apps',
+      kind: 'apps',
+      title: 'Service Apps',
+    });
+  });
+
+  it('uses managed history for non-doc routes', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        kind: 'content',
+        title: 'A',
+      });
+    });
+    act(() => {
+      result.current.navigate('data:text/html,B');
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'data:text/html,B',
+      historyIndex: 1,
+      kind: 'content',
+    });
+
+    act(() => {
+      result.current.goBack();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'data:text/html,A',
+      historyIndex: 0,
+      kind: 'content',
+    });
+  });
+
+  it('stops back and forward navigation at browser history boundaries', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        kind: 'content',
+        title: 'A',
+      });
+      result.current.navigate('data:text/html,B');
+    });
+
+    act(() => {
+      result.current.goBack();
+      result.current.goBack();
+      result.current.goBack();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      kind: 'docs',
+    });
+    expect(result.current.activeHistoryIndex).toBe(0);
+
+    act(() => {
+      result.current.goForward();
+      result.current.goForward();
+      result.current.goForward();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'data:text/html,B',
+      historyIndex: 1,
+      history: ['data:text/html,A', 'data:text/html,B'],
+    });
+    expect(result.current.activeHistoryIndex).toBe(2);
+  });
+
+  it('records active tab switching in the top-level browser history', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        kind: 'content',
+        title: 'A',
+      });
+      result.current.openNewTab();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'nextclaw://new-tab',
+      kind: 'home',
+    });
+
+    act(() => {
+      result.current.goBack();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'data:text/html,A',
+      kind: 'content',
+    });
+
+    act(() => {
+      result.current.goForward();
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'nextclaw://new-tab',
+      kind: 'home',
+    });
+  });
+
+  it('truncates forward history before appending manual navigation after going back', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        kind: 'content',
+        title: 'A',
+      });
+      result.current.navigate('data:text/html,B');
+      result.current.navigate('data:text/html,C');
+      result.current.goBack();
+      result.current.navigate('data:text/html,D');
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'data:text/html,D',
+      historyIndex: 2,
+      history: ['data:text/html,A', 'data:text/html,B', 'data:text/html,D'],
+    });
+  });
+
+  it('deduplicates consecutive manual navigation to the current URL', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        kind: 'content',
+        title: 'A',
+      });
+      result.current.navigate('data:text/html,B');
+      result.current.navigate('data:text/html,B');
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'data:text/html,B',
+      historyIndex: 1,
+      history: ['data:text/html,A', 'data:text/html,B'],
+    });
+  });
 });
 
 describe('DocBrowserProvider persistence', () => {

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

@@ -14,6 +14,8 @@ export type {
   DocBrowserTabKind,
 } from '@/shared/components/doc-browser/types/doc-browser.types';
 export {
+  DOC_BROWSER_HOME_TAB_KIND,
+  DOC_BROWSER_HOME_URL,
   DOCS_DEFAULT_BASE_URL,
   isDocsUrl,
 } from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
@@ -37,6 +39,7 @@ export function DocBrowserProvider({ children }: { children: ReactNode }) {
     ...snapshot,
     currentTab,
     open: docBrowserManager.open,
+    openNewTab: docBrowserManager.openNewTab,
     close: docBrowserManager.close,
     toggleMode: docBrowserManager.toggleMode,
     navigate: docBrowserManager.navigate,

package/src/shared/components/doc-browser/doc-browser-home-page.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+import {
+  BookOpen,
+  Boxes,
+  BrainCircuit,
+  Grid3X3,
+  Wrench,
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import type { DocBrowserContextValue } from './doc-browser-context';
+import {
+  docBrowserRouteRegistry,
+  type DocBrowserHomeNavigationItem,
+  type DocBrowserNavigationTarget,
+} from './utils/doc-browser-route-registry.utils';
+import { cn } from '@/shared/lib/utils';
+
+type DocBrowserHomePageProps = {
+  open: DocBrowserContextValue['open'];
+};
+
+type DocBrowserHomeItem = {
+  accentClassName: string;
+  icon: ReactNode;
+};
+
+const HOME_ITEM_VIEW_BY_ID: Record<string, DocBrowserHomeItem> = {
+  apps: {
+    accentClassName: 'bg-emerald-50 text-emerald-700 border-emerald-100',
+    icon: <Boxes className="h-5 w-5" />,
+  },
+  'service-apps': {
+    accentClassName: 'bg-sky-50 text-sky-700 border-sky-100',
+    icon: <Grid3X3 className="h-5 w-5" />,
+  },
+  docs: {
+    accentClassName: 'bg-amber-50 text-amber-700 border-amber-100',
+    icon: <BookOpen className="h-5 w-5" />,
+  },
+  'skill-marketplace': {
+    accentClassName: 'bg-rose-50 text-rose-700 border-rose-100',
+    icon: <BrainCircuit className="h-5 w-5" />,
+  },
+  'mcp-marketplace': {
+    accentClassName: 'bg-indigo-50 text-indigo-700 border-indigo-100',
+    icon: <Wrench className="h-5 w-5" />,
+  },
+};
+
+function resolveHomeItemView(item: DocBrowserHomeNavigationItem): DocBrowserHomeItem {
+  return HOME_ITEM_VIEW_BY_ID[item.id] ?? {
+    accentClassName: 'bg-gray-50 text-gray-700 border-gray-100',
+    icon: <Boxes className="h-5 w-5" />,
+  };
+}
+
+export function DocBrowserHomePage({ open }: DocBrowserHomePageProps) {
+  const navigate = useNavigate();
+  const items = docBrowserRouteRegistry.getHomeNavigationItems();
+
+  const openTarget = (target: DocBrowserNavigationTarget) => {
+    if (target.type === 'app-route') {
+      navigate(target.path);
+      return;
+    }
+    open(target.url, target.options);
+  };
+
+  return (
+    <div className="h-full overflow-auto bg-[#fbfaf7] px-5 py-6">
+      <div className="mx-auto w-full max-w-[640px]">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(88px,1fr))] gap-x-3 gap-y-5">
+          {items.map((item) => {
+            const view = resolveHomeItemView(item);
+            return (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => openTarget(item.target)}
+                className="group flex min-h-[82px] flex-col items-center gap-2 rounded-lg px-2 py-2 text-center transition-colors hover:bg-white/80"
+              >
+                <span className={cn('flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border shadow-[0_1px_2px_rgba(30,20,10,0.04)] transition-transform group-hover:scale-[1.03]', view.accentClassName)}>
+                  {view.icon}
+                </span>
+                <span className="min-w-0 max-w-full">
+                  <span className="line-clamp-2 block text-xs font-medium leading-snug text-gray-800">{item.label}</span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}