@nextclaw/ui 0.12.35-beta.6 → 0.12.35-beta.7

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>
+  );
+}

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -1,37 +1,16 @@
 import type { ReactNode, Ref } from 'react';
 import {
-  ArrowLeft,
-  ArrowRight,
-  BookOpen,
   ExternalLink,
-  Maximize2,
-  PanelRightOpen,
   Search,
-  X,
 } from 'lucide-react';
 import {
   isDocsUrl,
   type DocBrowserTab,
 } from './doc-browser-context';
-import type { DocBrowserCustomTabRenderer } from './doc-browser-renderer.types';
-import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
 
-type DocBrowserPanelHeaderProps = {
-  currentTab?: DocBrowserTab;
-  customRenderer?: DocBrowserCustomTabRenderer;
-  isDocked: boolean;
-  isFullscreen: boolean;
-  onClose: () => void;
-  onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
-  onToggleMode: () => void;
-};
-
 type DocBrowserDocsToolbarProps = {
-  currentTab?: DocBrowserTab;
   isDocsTab: boolean;
-  onBack: () => void;
-  onForward: () => void;
   onSubmit: (e: React.FormEvent) => void;
   onUrlInputChange: (value: string) => void;
   urlInput: string;
@@ -50,62 +29,8 @@ type DocBrowserFrameContentProps = {
   navVersion: number;
 };
 
-export function DocBrowserPanelHeader({
-  currentTab,
-  customRenderer,
-  isDocked,
-  isFullscreen,
-  onClose,
-  onDragStart,
-  onToggleMode,
-}: DocBrowserPanelHeaderProps) {
-  const title = currentTab && customRenderer?.getTitle
-    ? customRenderer.getTitle(currentTab)
-    : t('docBrowserTitle');
-  const icon = currentTab && customRenderer?.renderIcon
-    ? customRenderer.renderIcon(currentTab)
-    : <BookOpen className="w-4 h-4 text-primary shrink-0" />;
-
-  return (
-    <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 && !isFullscreen && 'cursor-grab active:cursor-grabbing',
-        isFullscreen && 'pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]',
-      )}
-      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-    >
-      <div className="flex items-center gap-2.5 min-w-0">
-        {icon}
-        <span className="text-sm font-semibold text-gray-900 truncate">{title}</span>
-      </div>
-      <div className="flex items-center gap-1">
-        {!isFullscreen ? (
-          <button
-            onClick={onToggleMode}
-            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={onClose}
-          className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-          title={t('docBrowserClose')}
-        >
-          <X className="w-3.5 h-3.5" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
 export function DocBrowserDocsToolbar({
-  currentTab,
   isDocsTab,
-  onBack,
-  onForward,
   onSubmit,
   onUrlInputChange,
   urlInput,
@@ -116,21 +41,6 @@ export function DocBrowserDocsToolbar({
 
   return (
     <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
-      <button
-        onClick={onBack}
-        disabled={!isDocsTab || (currentTab?.historyIndex ?? 0) <= 0}
-        className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
-      >
-        <ArrowLeft className="w-4 h-4" />
-      </button>
-      <button
-        onClick={onForward}
-        disabled={!isDocsTab || (currentTab?.historyIndex ?? 0) >= (currentTab?.history.length ?? 0) - 1}
-        className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
-      >
-        <ArrowRight className="w-4 h-4" />
-      </button>
-
       <form onSubmit={onSubmit} className="flex-1 relative">
         <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
         <input