@nextclaw/ui 0.13.3 → 0.13.5

package/src/features/side-dock/components/side-dock.tsx

@@ -1,7 +1,7 @@
-import { AppWindow, BookOpen, Boxes, Plus } from 'lucide-react';
+import { AppWindow, BookOpen, Boxes, Plus, X } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
-import { SIDE_DOCK_BUILT_IN_ITEMS } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type {
   SideDockIconName,
@@ -30,6 +30,7 @@ const SIDE_DOCK_ICON_COMPONENTS: Record<SideDockIconName, LucideIcon> = {
   apps: Boxes,
   docs: BookOpen,
   'new-tab': Plus,
+  'panel-app': AppWindow,
   'service-apps': AppWindow,
 };
 
@@ -37,6 +38,13 @@ function SideDockItemIconView({ icon }: { icon: SideDockItemIcon }) {
   if (icon.type === 'url') {
     return <img src={icon.url} alt="" className="h-5 w-5 rounded object-cover" />;
   }
+  if (icon.type === 'text') {
+    return (
+      <span className="max-w-7 truncate text-center text-[13px] font-semibold leading-none" aria-hidden="true">
+        {icon.value}
+      </span>
+    );
+  }
 
   const Icon = SIDE_DOCK_ICON_COMPONENTS[icon.name];
   return <Icon className="h-5 w-5" aria-hidden="true" />;
@@ -46,56 +54,100 @@ function SideDockButton({
   active,
   item,
   onOpen,
+  onUnpin,
 }: {
   active: boolean;
   item: SideDockItem;
   onOpen: (item: SideDockItem) => void;
+  onUnpin: (item: SideDockItem) => void;
 }) {
-  const label = t(item.labelKey);
+  const { label } = item;
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          aria-label={label}
-          title={label}
-          data-side-dock-item-id={item.id}
-          onClick={() => onOpen(item)}
-          className={cn(
-            'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            active
-              ? 'bg-primary/10 text-primary'
-              : 'bg-transparent',
-          )}
-        >
-          <SideDockItemIconView icon={item.icon} />
-        </button>
-      </TooltipTrigger>
+      <div className="group relative">
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={label}
+            title={label}
+            data-side-dock-item-id={item.id}
+            onClick={() => onOpen(item)}
+            className={cn(
+              'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
+              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              active
+                ? 'bg-primary/10 text-primary'
+                : 'bg-transparent',
+            )}
+          >
+            <SideDockItemIconView icon={item.icon} />
+          </button>
+        </TooltipTrigger>
+        {item.removable ? (
+          <button
+            type="button"
+            aria-label={t('sideDockUnpinItem')}
+            title={t('sideDockUnpinItem')}
+            onClick={(event) => {
+              event.stopPropagation();
+              onUnpin(item);
+            }}
+            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <X className="h-3 w-3" aria-hidden="true" />
+          </button>
+        ) : null}
+      </div>
       <TooltipContent side="left">{label}</TooltipContent>
     </Tooltip>
   );
 }
 
+function normalizeSideDockUri(uri?: string): string {
+  return uri?.trim() ?? '';
+}
+
 function isSideDockItemActive(
   item: SideDockItem,
   isDocBrowserOpen: boolean,
   currentTab?: DocBrowserTab,
+  hasExactActiveItem = false,
 ): boolean {
   if (!isDocBrowserOpen || !currentTab) {
     return false;
   }
-  if (currentTab.currentUrl === item.target.uri) {
+  const itemUri = normalizeSideDockUri(item.target.uri);
+  const currentResourceUri = normalizeSideDockUri(currentTab.resourceUri);
+  if (
+    (currentResourceUri && currentResourceUri === itemUri)
+    || normalizeSideDockUri(currentTab.currentUrl) === itemUri
+  ) {
     return true;
   }
+  if (hasExactActiveItem) {
+    return false;
+  }
   return item.id === 'docs' && currentTab.kind === 'docs';
 }
 
+function hasExactActiveSideDockItem(items: SideDockItem[], currentTab?: DocBrowserTab): boolean {
+  if (!currentTab) {
+    return false;
+  }
+  const currentResourceUri = normalizeSideDockUri(currentTab.resourceUri);
+  const currentUrl = normalizeSideDockUri(currentTab.currentUrl);
+  return items.some((item) => {
+    const itemUri = normalizeSideDockUri(item.target.uri);
+    return itemUri === currentResourceUri || itemUri === currentUrl;
+  });
+}
+
 export function SideDock({ manager }: SideDockProps) {
   const pinnedItems = useSideDockStore((state) => state.pinnedItems);
   const { currentTab, isOpen } = useDocBrowser();
-  const items = mergeSideDockItems(SIDE_DOCK_BUILT_IN_ITEMS, pinnedItems);
+  const items = mergeSideDockItems(getSideDockBuiltInItems(), pinnedItems);
+  const hasExactActiveItem = hasExactActiveSideDockItem(items, currentTab);
 
   return (
     <TooltipProvider delayDuration={250}>
@@ -106,9 +158,10 @@ export function SideDock({ manager }: SideDockProps) {
         {items.map((item) => (
           <SideDockButton
             key={item.id}
-            active={isSideDockItemActive(item, isOpen, currentTab)}
+            active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
             item={item}
             onOpen={manager.openItem}
+            onUnpin={(dockItem) => manager.unpinItem(dockItem.id)}
           />
         ))}
       </aside>

package/src/features/side-dock/configs/side-dock-built-in-items.config.ts

@@ -4,40 +4,43 @@ import {
   RIGHT_PANEL_SERVICE_APPS_URL,
 } from '@/features/right-panel-resources';
 import type { SideDockItem } from '@/features/side-dock/types/side-dock.types';
+import { t } from '@/shared/lib/i18n';
 
 export const SIDE_DOCK_DOCS_URL = 'nextclaw://docs';
 
-export const SIDE_DOCK_BUILT_IN_ITEMS: SideDockItem[] = [
-  {
-    builtIn: true,
-    icon: { type: 'builtin', name: 'apps' },
-    id: 'apps',
-    labelKey: 'appsTitle',
-    removable: false,
-    target: { type: 'right-panel-resource', uri: RIGHT_PANEL_APPS_URL },
-  },
-  {
-    builtIn: true,
-    icon: { type: 'builtin', name: 'service-apps' },
-    id: 'service-apps',
-    labelKey: 'serviceAppsTitle',
-    removable: false,
-    target: { type: 'right-panel-resource', uri: RIGHT_PANEL_SERVICE_APPS_URL },
-  },
-  {
-    builtIn: true,
-    icon: { type: 'builtin', name: 'docs' },
-    id: 'docs',
-    labelKey: 'docBrowserHelp',
-    removable: false,
-    target: { type: 'right-panel-resource', uri: SIDE_DOCK_DOCS_URL },
-  },
-  {
-    builtIn: true,
-    icon: { type: 'builtin', name: 'new-tab' },
-    id: 'new-tab',
-    labelKey: 'docBrowserHomeTitle',
-    removable: false,
-    target: { type: 'right-panel-resource', uri: RIGHT_PANEL_HOME_URL },
-  },
-];
+export function getSideDockBuiltInItems(): SideDockItem[] {
+  return [
+    {
+      builtIn: true,
+      icon: { type: 'builtin', name: 'apps' },
+      id: 'apps',
+      label: t('appsTitle'),
+      removable: false,
+      target: { type: 'right-panel-resource', uri: RIGHT_PANEL_APPS_URL },
+    },
+    {
+      builtIn: true,
+      icon: { type: 'builtin', name: 'service-apps' },
+      id: 'service-apps',
+      label: t('serviceAppsTitle'),
+      removable: false,
+      target: { type: 'right-panel-resource', uri: RIGHT_PANEL_SERVICE_APPS_URL },
+    },
+    {
+      builtIn: true,
+      icon: { type: 'builtin', name: 'docs' },
+      id: 'docs',
+      label: t('docBrowserHelp'),
+      removable: false,
+      target: { type: 'right-panel-resource', uri: SIDE_DOCK_DOCS_URL },
+    },
+    {
+      builtIn: true,
+      icon: { type: 'builtin', name: 'new-tab' },
+      id: 'new-tab',
+      label: t('docBrowserHomeTitle'),
+      removable: false,
+      target: { type: 'right-panel-resource', uri: RIGHT_PANEL_HOME_URL },
+    },
+  ];
+}

package/src/features/side-dock/index.ts

@@ -1,5 +1,6 @@
 export { SideDock } from '@/features/side-dock/components/side-dock';
 export { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
+export { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 export type {
   SideDockIconName,
   SideDockItem,
@@ -7,4 +8,5 @@ export type {
   SideDockItemId,
   SideDockItemTarget,
   SideDockPinnedItem,
+  SideDockResourceDockState,
 } from '@/features/side-dock/types/side-dock.types';

package/src/features/side-dock/managers/side-dock.manager.test.ts

@@ -8,7 +8,7 @@ const customItem: SideDockItem = {
   builtIn: false,
   icon: { type: 'builtin', name: 'docs' },
   id: 'custom-docs',
-  labelKey: 'docBrowserHelp',
+  label: 'Help Docs',
   removable: true,
   target: { type: 'right-panel-resource', uri: 'nextclaw://docs/custom' },
 };
@@ -25,7 +25,10 @@ describe('SideDockManager', () => {
 
     manager.openItem(customItem);
 
-    expect(open).toHaveBeenCalledWith('nextclaw://docs/custom');
+    expect(open).toHaveBeenCalledWith('nextclaw://docs/custom', {
+      dockIcon: { type: 'builtin', name: 'docs' },
+      title: 'Help Docs',
+    });
   });
 
   it('pins removable items and keeps built-in items immutable', () => {
@@ -39,12 +42,90 @@ describe('SideDockManager', () => {
         createdAt: '2026-06-02T00:00:00.000Z',
         icon: { type: 'builtin', name: 'docs' },
         id: 'custom-docs',
-        labelKey: 'docBrowserHelp',
+        label: 'Help Docs',
         target: { type: 'right-panel-resource', uri: 'nextclaw://docs/custom' },
       },
     ]);
   });
 
+  it('pins and unpins the current doc browser tab by resource URI', () => {
+    const manager = new SideDockManager({ open: vi.fn() } as unknown as DocBrowserManager);
+
+    manager.pinTab({
+      currentUrl: 'https://docs.nextclaw.ai/guide/getting-started',
+      history: ['https://docs.nextclaw.ai/guide/getting-started'],
+      historyIndex: 0,
+      id: 'tab-1',
+      kind: 'docs',
+      navVersion: 0,
+      resourceUri: 'nextclaw://docs/guide/getting-started',
+      title: 'Getting Started',
+    }, '2026-06-02T00:00:00.000Z');
+
+    expect(useSideDockStore.getState().pinnedItems).toMatchObject([
+      {
+        createdAt: '2026-06-02T00:00:00.000Z',
+        label: 'Getting Started',
+        target: { type: 'right-panel-resource', uri: 'nextclaw://docs/guide/getting-started' },
+      },
+    ]);
+
+    manager.unpinTab({
+      currentUrl: 'https://docs.nextclaw.ai/guide/getting-started',
+      history: ['https://docs.nextclaw.ai/guide/getting-started'],
+      historyIndex: 0,
+      id: 'tab-1',
+      kind: 'docs',
+      navVersion: 0,
+      resourceUri: 'nextclaw://docs/guide/getting-started',
+      title: 'Getting Started',
+    });
+
+    expect(useSideDockStore.getState().pinnedItems).toEqual([]);
+  });
+
+  it('pins panel app tabs with their own dock icon metadata', () => {
+    const manager = new SideDockManager({ open: vi.fn() } as unknown as DocBrowserManager);
+
+    manager.pinTab({
+      currentUrl: '/api/panel-apps/demo/content',
+      dockIcon: { type: 'url', url: '/api/panel-apps/demo/assets/icon.png' },
+      history: ['/api/panel-apps/demo/content'],
+      historyIndex: 0,
+      id: 'tab-1',
+      kind: 'panel-app',
+      navVersion: 0,
+      resourceUri: 'nextclaw://panel-app/demo',
+      title: 'Demo App',
+    }, '2026-06-02T00:00:00.000Z');
+
+    expect(useSideDockStore.getState().pinnedItems).toMatchObject([
+      {
+        icon: { type: 'url', url: '/api/panel-apps/demo/assets/icon.png' },
+        label: 'Demo App',
+        target: { type: 'right-panel-resource', uri: 'nextclaw://panel-app/demo' },
+      },
+    ]);
+  });
+
+  it('pins panel app text icons instead of falling back to a generic icon', () => {
+    const manager = new SideDockManager({ open: vi.fn() } as unknown as DocBrowserManager);
+
+    manager.pinTab({
+      currentUrl: '/api/panel-apps/compass/content',
+      dockIcon: { type: 'text', value: 'C' },
+      history: ['/api/panel-apps/compass/content'],
+      historyIndex: 0,
+      id: 'tab-1',
+      kind: 'panel-app',
+      navVersion: 0,
+      resourceUri: 'nextclaw://panel-app/compass',
+      title: 'Compass',
+    }, '2026-06-02T00:00:00.000Z');
+
+    expect(useSideDockStore.getState().pinnedItems[0]?.icon).toEqual({ type: 'text', value: 'C' });
+  });
+
   it('unpins and reorders pinned items', () => {
     const manager = new SideDockManager({ open: vi.fn() } as unknown as DocBrowserManager);
 

package/src/features/side-dock/managers/side-dock.manager.ts

@@ -1,43 +1,155 @@
-import { SIDE_DOCK_BUILT_IN_ITEMS } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
-import type { SideDockItem, SideDockPinnedItem } from '@/features/side-dock/types/side-dock.types';
+import type {
+  SideDockIconName,
+  SideDockItem,
+  SideDockPinnedItem,
+  SideDockResourceDockState,
+} from '@/features/side-dock/types/side-dock.types';
 import {
   createPinnedSideDockItem,
   mergeSideDockItems,
 } from '@/features/side-dock/utils/side-dock-item.utils';
 import type { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
+import type {
+  DocBrowserDockIcon,
+  DocBrowserTab,
+} from '@/shared/components/doc-browser/types/doc-browser.types';
+
+const SIDE_DOCK_PINNED_ITEM_ID_PREFIX = 'pinned';
+const SIDE_DOCK_ICON_NAMES = new Set<SideDockIconName>([
+  'apps',
+  'docs',
+  'new-tab',
+  'panel-app',
+  'service-apps',
+]);
+
+function normalizeSideDockResourceUri(uri: string): string {
+  return uri.trim();
+}
+
+function createPinnedItemId(uri: string): string {
+  let hash = 0;
+  Array.from(normalizeSideDockResourceUri(uri)).forEach((char) => {
+    hash = ((hash * 31) + char.charCodeAt(0)) >>> 0;
+  });
+  const slug = normalizeSideDockResourceUri(uri)
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+  return `${SIDE_DOCK_PINNED_ITEM_ID_PREFIX}-${slug || 'resource'}-${hash.toString(36)}`;
+}
+
+function resolveSideDockIcon(icon?: DocBrowserDockIcon): SideDockItem['icon'] | null {
+  if (icon?.type === 'builtin' && SIDE_DOCK_ICON_NAMES.has(icon.name as SideDockIconName)) {
+    return { type: 'builtin', name: icon.name as SideDockIconName };
+  }
+  if (icon?.type === 'url' && icon.url.trim().length > 0) {
+    return { type: 'url', url: icon.url.trim() };
+  }
+  if (icon?.type === 'text' && icon.value.trim().length > 0) {
+    return { type: 'text', value: icon.value.trim() };
+  }
+  return null;
+}
+
+function getFallbackIconNameForTab(tab: DocBrowserTab): SideDockIconName {
+  if (tab.kind === 'docs') {
+    return 'docs';
+  }
+  if (tab.kind === 'home') {
+    return 'new-tab';
+  }
+  if (tab.kind === 'apps') {
+    return tab.resourceUri?.includes('service-apps') ? 'service-apps' : 'apps';
+  }
+  if (tab.kind === 'panel-app') {
+    return 'panel-app';
+  }
+  return 'apps';
+}
 
 export class SideDockManager {
   constructor(private readonly docBrowserManager: DocBrowserManager) {}
 
-  readonly getItems = (): SideDockItem[] => mergeSideDockItems(
-    SIDE_DOCK_BUILT_IN_ITEMS,
+  getItems = (): SideDockItem[] => mergeSideDockItems(
+    getSideDockBuiltInItems(),
     useSideDockStore.getState().pinnedItems,
   );
 
-  readonly openItem = (item: Pick<SideDockItem, 'target'>): void => {
+  openItem = (item: Pick<SideDockItem, 'icon' | 'label' | 'target'>): void => {
     if (item.target.type === 'right-panel-resource') {
-      this.docBrowserManager.open(item.target.uri);
+      this.docBrowserManager.open(item.target.uri, {
+        dockIcon: item.icon,
+        title: item.label,
+      });
+    }
+  };
+
+  getDockState = (tab?: DocBrowserTab): SideDockResourceDockState => {
+    const uri = this.getTabResourceUri(tab);
+    if (!uri) {
+      return {
+        canDock: false,
+        isDocked: false,
+        removable: false,
+      };
     }
+
+    const item = this.findItemByUri(uri);
+    return {
+      canDock: true,
+      isDocked: !!item,
+      removable: item?.removable === true,
+    };
   };
 
-  readonly pinItem = (item: SideDockItem, createdAt: string = new Date().toISOString()): void => {
+  pinTab = (tab?: DocBrowserTab, createdAt: string = new Date().toISOString()): void => {
+    const uri = this.getTabResourceUri(tab);
+    if (!tab || !uri || this.findItemByUri(uri)) {
+      return;
+    }
+    this.pinItem({
+      builtIn: false,
+      icon: resolveSideDockIcon(tab.dockIcon) ?? { type: 'builtin', name: getFallbackIconNameForTab(tab) },
+      id: createPinnedItemId(uri),
+      label: tab.title.trim() || uri,
+      removable: true,
+      target: { type: 'right-panel-resource', uri },
+    }, createdAt);
+  };
+
+  unpinTab = (tab?: DocBrowserTab): void => {
+    const uri = this.getTabResourceUri(tab);
+    const item = uri ? this.findItemByUri(uri) : undefined;
+    if (!item?.removable) {
+      return;
+    }
+    this.unpinItem(item.id);
+  };
+
+  pinItem = (item: SideDockItem, createdAt: string = new Date().toISOString()): void => {
     if (!item.removable) {
       return;
     }
+    const uri = normalizeSideDockResourceUri(item.target.uri);
     this.setPinnedItems((items) => {
-      if (items.some((pinnedItem) => pinnedItem.id === item.id || pinnedItem.target.uri === item.target.uri)) {
+      if (items.some((pinnedItem) => pinnedItem.id === item.id || normalizeSideDockResourceUri(pinnedItem.target.uri) === uri)) {
         return items;
       }
-      return [...items, createPinnedSideDockItem(item, createdAt)];
+      return [...items, createPinnedSideDockItem({
+        ...item,
+        target: { ...item.target, uri },
+      }, createdAt)];
     });
   };
 
-  readonly unpinItem = (itemId: string): void => {
+  unpinItem = (itemId: string): void => {
     this.setPinnedItems((items) => items.filter((item) => item.id !== itemId));
   };
 
-  readonly reorderPinnedItems = (itemIds: string[]): void => {
+  reorderPinnedItems = (itemIds: string[]): void => {
     this.setPinnedItems((items) => {
       const itemsById = new Map(items.map((item) => [item.id, item]));
       const orderedItems = itemIds
@@ -49,10 +161,21 @@ export class SideDockManager {
     });
   };
 
-  private readonly setPinnedItems = (
+  private setPinnedItems = (
     updater: (items: SideDockPinnedItem[]) => SideDockPinnedItem[],
   ): void => {
     const { pinnedItems, setPinnedItems } = useSideDockStore.getState();
     setPinnedItems(updater(pinnedItems));
   };
+
+  private getTabResourceUri = (tab?: DocBrowserTab): string | null => {
+    const uri = tab?.resourceUri ?? tab?.currentUrl;
+    const normalized = uri ? normalizeSideDockResourceUri(uri) : '';
+    return normalized.length > 0 ? normalized : null;
+  };
+
+  private findItemByUri = (uri: string): SideDockItem | undefined => {
+    const normalized = normalizeSideDockResourceUri(uri);
+    return this.getItems().find((item) => normalizeSideDockResourceUri(item.target.uri) === normalized);
+  };
 }

package/src/features/side-dock/types/side-dock.types.ts

@@ -5,17 +5,18 @@ export type SideDockItemTarget = {
   uri: string;
 };
 
-export type SideDockIconName = 'apps' | 'docs' | 'new-tab' | 'service-apps';
+export type SideDockIconName = 'apps' | 'docs' | 'new-tab' | 'panel-app' | 'service-apps';
 
 export type SideDockItemIcon =
   | { type: 'builtin'; name: SideDockIconName }
-  | { type: 'url'; url: string };
+  | { type: 'url'; url: string }
+  | { type: 'text'; value: string };
 
 export type SideDockItem = {
   builtIn: boolean;
   icon: SideDockItemIcon;
   id: SideDockItemId;
-  labelKey: string;
+  label: string;
   removable: boolean;
   target: SideDockItemTarget;
 };
@@ -24,6 +25,12 @@ export type SideDockPinnedItem = {
   createdAt: string;
   icon: SideDockItemIcon;
   id: SideDockItemId;
-  labelKey: string;
+  label: string;
   target: SideDockItemTarget;
 };
+
+export type SideDockResourceDockState = {
+  canDock: boolean;
+  isDocked: boolean;
+  removable: boolean;
+};

package/src/features/side-dock/utils/side-dock-item.utils.test.ts

@@ -10,7 +10,7 @@ const builtInItem: SideDockItem = {
   builtIn: true,
   icon: { type: 'builtin', name: 'apps' },
   id: 'apps',
-  labelKey: 'appsTitle',
+  label: 'Apps',
   removable: false,
   target: { type: 'right-panel-resource', uri: 'nextclaw://apps' },
 };
@@ -20,16 +20,16 @@ describe('side-dock-item utils', () => {
     const items = normalizeSideDockPinnedItems([
       {
         createdAt: '2026-06-02T00:00:00.000Z',
-        icon: { type: 'builtin', name: 'docs' },
+        icon: { type: 'text', value: 'D' },
         id: 'docs-custom',
-        labelKey: 'docBrowserHelp',
+        label: 'Help Docs',
         target: { type: 'right-panel-resource', uri: 'nextclaw://docs' },
       },
       {
         createdAt: '2026-06-02T00:00:00.000Z',
         icon: { type: 'builtin', name: 'unknown' },
         id: 'bad-icon',
-        labelKey: 'bad',
+        label: 'Bad',
         target: { type: 'right-panel-resource', uri: 'nextclaw://bad' },
       },
     ]);
@@ -37,9 +37,9 @@ describe('side-dock-item utils', () => {
     expect(items).toEqual([
       {
         createdAt: '2026-06-02T00:00:00.000Z',
-        icon: { type: 'builtin', name: 'docs' },
+        icon: { type: 'text', value: 'D' },
         id: 'docs-custom',
-        labelKey: 'docBrowserHelp',
+        label: 'Help Docs',
         target: { type: 'right-panel-resource', uri: 'nextclaw://docs' },
       },
     ]);
@@ -58,14 +58,14 @@ describe('side-dock-item utils', () => {
           createdAt: '2026-06-02T00:00:00.000Z',
           icon: { type: 'builtin', name: 'docs' },
           id: 'docs-custom',
-          labelKey: 'docBrowserHelp',
+          label: 'Help Docs',
           target: { type: 'right-panel-resource', uri: 'nextclaw://docs' },
         },
         {
           createdAt: '2026-06-02T00:00:00.000Z',
           icon: { type: 'builtin', name: 'apps' },
           id: 'apps-copy',
-          labelKey: 'appsTitle',
+          label: 'Apps',
           target: { type: 'right-panel-resource', uri: 'nextclaw://apps' },
         },
       ],