@nextclaw/ui 0.14.4 → 0.15.0

package/src/features/marketplace/hooks/use-marketplace-item-detail.ts

@@ -4,7 +4,10 @@ import type {
 } from "@/shared/lib/api";
 import { fetchMarketplaceSkillContent } from "@/shared/lib/api";
 import { useDocBrowser } from "@/shared/components/doc-browser";
-import { buildGenericDetailDataUrl } from "@/features/marketplace/components/marketplace-detail-doc";
+import {
+  createMarketplaceDetailDocId,
+  openMarketplaceDetailDoc,
+} from "@/features/marketplace/components/marketplace-detail-doc";
 import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
 import { t } from "@/shared/lib/i18n";
 import { useRef } from "react";
@@ -23,25 +26,26 @@ export function useMarketplaceItemDetail(localeFallbacks: string[]) {
       record?.id ??
       record?.spec ??
       t("marketplaceUnknownItem");
+    const detailId = createMarketplaceDetailDocId(
+      item ? "skill" : "skill-local",
+      item?.slug ?? record?.id ?? record?.spec ?? title,
+    );
     const dedupeKey = item
       ? `marketplace:${item.type}:${item.slug}`
       : `marketplace:${record?.type ?? "unknown"}:${record?.id ?? record?.spec ?? title}`;
-    const openOptions = { title, kind: "content" as const, dedupeKey };
-    const updateOptions = { ...openOptions, activate: false };
     const typeLabel = t("marketplaceTypeSkill");
 
     if (!item) {
-      docBrowser.open(
-        buildGenericDetailDataUrl({
-          title,
-          typeLabel,
-          spec: record?.spec ?? "-",
-          summary: t("marketplaceInstalledLocalSummary"),
-          metadataRaw: JSON.stringify(record ?? {}, null, 2),
-          contentRaw: "-",
-        }),
-        openOptions,
-      );
+      openMarketplaceDetailDoc(docBrowser, {
+        id: detailId,
+        title,
+        typeLabel,
+        spec: record?.spec ?? "-",
+        status: "ready",
+        summary: t("marketplaceInstalledLocalSummary"),
+        metadataRaw: JSON.stringify(record ?? {}, null, 2),
+        contentRaw: "-",
+      });
       return;
     }
 
@@ -53,26 +57,30 @@ export function useMarketplaceItemDetail(localeFallbacks: string[]) {
       item.summary,
       localeFallbacks,
     );
-    docBrowser.open(
-      buildGenericDetailDataUrl({
-        title,
-        typeLabel,
-        spec: item.install.spec,
-        loading: true,
-      }),
-      openOptions,
-    );
+    openMarketplaceDetailDoc(docBrowser, {
+      id: detailId,
+      title,
+      typeLabel,
+      spec: item.install.spec,
+      status: "loading",
+      summary,
+      tags: item.tags,
+      author: item.author,
+    });
 
     try {
       const content = await fetchMarketplaceSkillContent(item.slug);
       if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
         return;
       }
-      docBrowser.open(
-        buildGenericDetailDataUrl({
+      openMarketplaceDetailDoc(
+        docBrowser,
+        {
+          id: detailId,
           title,
           typeLabel,
           spec: item.install.spec,
+          status: "ready",
           summary,
           metadataRaw: content.metadataRaw,
           contentRaw: content.bodyRaw || content.raw,
@@ -80,18 +88,21 @@ export function useMarketplaceItemDetail(localeFallbacks: string[]) {
           sourceLabel: `Source (${content.source})`,
           tags: item.tags,
           author: item.author,
-        }),
-        updateOptions,
+        },
+        { activate: false },
       );
     } catch (error) {
       if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
         return;
       }
-      docBrowser.open(
-        buildGenericDetailDataUrl({
+      openMarketplaceDetailDoc(
+        docBrowser,
+        {
+          id: detailId,
           title,
           typeLabel,
           spec: item.install.spec,
+          status: "error",
           summary,
           metadataRaw: JSON.stringify(
             { error: error instanceof Error ? error.message : String(error) },
@@ -99,8 +110,8 @@ export function useMarketplaceItemDetail(localeFallbacks: string[]) {
             2,
           ),
           contentRaw: t("marketplaceOperationFailed"),
-        }),
-        updateOptions,
+        },
+        { activate: false },
       );
     }
   };

package/src/features/marketplace/index.ts

@@ -1,5 +1,8 @@
 export { MarketplacePage } from './components/marketplace-page';
 export { McpMarketplacePage } from './components/mcp/mcp-marketplace-page';
+export {
+  MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
+} from './components/marketplace-detail-doc';
 export {
   useInstallMarketplaceItem,
   useManageMarketplaceItem,

package/src/features/marketplace/stores/marketplace-detail-doc.store.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+
+export type MarketplaceDetailDocStatus = 'loading' | 'ready' | 'error';
+
+export type MarketplaceDetailDocEntry = {
+  id: string;
+  title: string;
+  typeLabel: string;
+  spec: string;
+  status: MarketplaceDetailDocStatus;
+  summary?: string;
+  description?: string;
+  metadataRaw?: string;
+  contentRaw?: string;
+  sourceUrl?: string;
+  sourceLabel?: string;
+  tags?: string[];
+  author?: string;
+};
+
+type MarketplaceDetailDocStore = {
+  entries: Record<string, MarketplaceDetailDocEntry>;
+  setEntry: (entry: MarketplaceDetailDocEntry) => void;
+};
+
+export const useMarketplaceDetailDocStore = create<MarketplaceDetailDocStore>((set) => ({
+  entries: {},
+  setEntry: (entry) => set((state) => ({
+    entries: {
+      ...state.entries,
+      [entry.id]: entry,
+    },
+  })),
+}));
+
+export function setMarketplaceDetailDocEntry(entry: MarketplaceDetailDocEntry): void {
+  useMarketplaceDetailDocStore.getState().setEntry(entry);
+}

package/src/features/panel-apps/components/__tests__/panel-apps-list.test.tsx

@@ -20,8 +20,10 @@ const mocks = vi.hoisted(() => ({
     title: string;
     updatedAt: string;
   }>,
+  grantPanelAppClient: vi.fn(),
   navigate: vi.fn(),
   refetchPanelApps: vi.fn(),
+  requestAuthorization: vi.fn(async () => true),
   requestDraft: vi.fn(),
 }));
 
@@ -31,7 +33,7 @@ vi.mock('@/app/components/app-presenter-provider', () => ({
       requestDraft: mocks.requestDraft,
     },
     serviceActionAuthorizationManager: {
-      requestAuthorization: vi.fn(async () => true),
+      requestAuthorization: mocks.requestAuthorization,
     },
   }),
 }));
@@ -47,7 +49,7 @@ vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
     mutate: vi.fn(),
   }),
   useGrantPanelAppClient: () => ({
-    mutateAsync: vi.fn(),
+    mutateAsync: mocks.grantPanelAppClient,
   }),
   usePanelApps: () => ({
     data: {
@@ -91,8 +93,11 @@ function createPanelAppEntry(overrides: Partial<(typeof mocks.entries)[number]>
 describe('PanelAppsList', () => {
   beforeEach(() => {
     mocks.entries = [];
+    mocks.grantPanelAppClient.mockReset();
     mocks.navigate.mockReset();
     mocks.refetchPanelApps.mockReset();
+    mocks.requestAuthorization.mockReset();
+    mocks.requestAuthorization.mockResolvedValue(true);
     mocks.requestDraft.mockReset();
   });
 
@@ -134,4 +139,29 @@ describe('PanelAppsList', () => {
     expect(screen.getByText('No panel apps in this view')).toBeTruthy();
     expect(screen.queryByText('Create your first panel app')).toBeNull();
   });
+
+  it('continues opening a client panel app after authorization', async () => {
+    const user = userEvent.setup();
+    const onOpenPanelApp = vi.fn();
+    const entry = createPanelAppEntry({
+      appId: 'demo-app',
+      clientDeclared: true,
+      clientGranted: false,
+    });
+    mocks.entries = [entry];
+
+    render(<PanelAppsList onOpenPanelApp={onOpenPanelApp} />);
+
+    await user.click(screen.getByRole('button', { name: /Demo Panel/ }));
+
+    expect(mocks.requestAuthorization).toHaveBeenCalledWith(expect.objectContaining({
+      panelAppId: 'demo-app',
+      actions: [expect.objectContaining({
+        actionId: 'nextclaw.client',
+        risk: 'dangerous',
+      })],
+    }));
+    expect(mocks.grantPanelAppClient).toHaveBeenCalledWith('demo-app');
+    expect(onOpenPanelApp).toHaveBeenCalledWith(entry);
+  });
 });

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -6,7 +6,9 @@ describe('PwaShellThemeManager', () => {
     document.head.innerHTML = '<meta name="theme-color" content="#FFFFFF" />';
     document.body.innerHTML = '<div id="root"></div>';
     document.documentElement.removeAttribute('data-theme');
+    document.documentElement.removeAttribute('data-theme-appearance');
     document.documentElement.style.backgroundColor = '';
+    document.documentElement.style.colorScheme = '';
     document.body.style.backgroundColor = '';
   });
 
@@ -72,6 +74,15 @@ describe('PwaShellThemeManager', () => {
     expect(document.body.style.backgroundColor).toBe('rgb(248, 248, 247)');
   });
 
+  it('applies night shell colors and dark color scheme', () => {
+    pwaShellThemeManager.syncTheme('night');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#101318');
+    expect(document.body.style.backgroundColor).toBe('rgb(16, 19, 24)');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+  });
+
   it('maps the legacy leaf theme to warm shell colors', () => {
     document.documentElement.setAttribute('data-theme', 'leaf');
 

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -1,4 +1,8 @@
-import { normalizeTheme, type UiTheme } from '@/shared/lib/theme';
+import {
+  getThemeAppearance,
+  normalizeTheme,
+  type UiTheme,
+} from '@/shared/lib/theme';
 
 const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   natural: '#FAF9F7',
@@ -7,7 +11,8 @@ const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   cool: '#F8FAFC',
   dawn: '#FAF7F4',
   graphite: '#F8F8F7',
-  probe: '#FEFCF6'
+  night: '#101318',
+  probe: '#FEFCF6',
 };
 
 export class PwaShellThemeManager {
@@ -19,7 +24,7 @@ export class PwaShellThemeManager {
     const themeColor = PWA_SHELL_THEME_COLORS[theme];
     this.updateThemeMeta(themeColor);
     this.updateSurfaceBackgrounds(themeColor);
-    document.documentElement.style.colorScheme = 'light';
+    document.documentElement.style.colorScheme = getThemeAppearance(theme);
   };
 
   syncCurrentTheme = () => {

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -0,0 +1,25 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { AppearanceSettingsPage } from '@/features/settings/pages/appearance-settings-page';
+import { useSideDockStore } from '@/features/side-dock';
+
+describe('AppearanceSettingsPage', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    useSideDockStore.getState().setVisible(true);
+    useSideDockStore.getState().setPinnedItems([]);
+  });
+
+  it('reopens the SideDock from the appearance settings switch', () => {
+    useSideDockStore.getState().setVisible(false);
+
+    render(<AppearanceSettingsPage />);
+
+    const visibilitySwitch = screen.getByRole('switch', { name: 'Show SideDock' });
+    expect(visibilitySwitch.getAttribute('aria-checked')).toBe('false');
+
+    fireEvent.click(visibilitySwitch);
+
+    expect(useSideDockStore.getState().isVisible).toBe(true);
+  });
+});

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -0,0 +1,40 @@
+import { Palette } from 'lucide-react';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { SettingRow } from '@/shared/components/settings/setting-row';
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { Switch } from '@/shared/components/ui/switch';
+import { useSideDockStore } from '@/features/side-dock';
+import { t } from '@/shared/lib/i18n';
+
+export function AppearanceSettingsPage() {
+  const isSideDockVisible = useSideDockStore((state) => state.isVisible);
+  const setSideDockVisible = useSideDockStore((state) => state.setVisible);
+
+  return (
+    <PageLayout>
+      <PageHeader title={t('appearance')} />
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Palette className="h-4 w-4" />
+            {t('appearance')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SettingRow
+            title={t('sideDockVisibilityTitle')}
+            description={t('sideDockVisibilityDescription')}
+            control={
+              <Switch
+                id="appearance-side-dock-visible"
+                aria-label={t('sideDockVisibilityTitle')}
+                checked={isSideDockVisible}
+                onCheckedChange={setSideDockVisible}
+              />
+            }
+          />
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}

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

@@ -1,6 +1,9 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import {
+  getSideDockBuiltInItems,
+  SIDE_DOCK_GITHUB_PROJECT_ITEM_ID,
+} from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { SideDock } from '@/features/side-dock/components/side-dock';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
@@ -12,6 +15,7 @@ import { createDefaultDocBrowserState } from '@/shared/components/doc-browser/ut
 describe('SideDock', () => {
   beforeEach(() => {
     window.localStorage.clear();
+    useSideDockStore.getState().setVisible(true);
     useSideDockStore.getState().setPinnedItems([]);
     useDocBrowserStore.getState().setSnapshot(createDefaultDocBrowserState());
   });
@@ -40,6 +44,44 @@ describe('SideDock', () => {
     expect(openItem).toHaveBeenCalledWith(builtInItems[0]);
   });
 
+  it('places the GitHub project shortcut in the utility section', () => {
+    const manager = { openItem: vi.fn() } as unknown as SideDockManager;
+    const docBrowserManager = new DocBrowserManager();
+
+    render(
+      <DocBrowserProvider manager={docBrowserManager}>
+        <SideDock manager={manager} />
+      </DocBrowserProvider>,
+    );
+
+    const utilitySection = screen.getByTestId('side-dock-utility');
+    expect(utilitySection.className).toContain('mt-auto');
+    expect(utilitySection.querySelector(`[data-side-dock-item-id="${SIDE_DOCK_GITHUB_PROJECT_ITEM_ID}"]`)).toBeTruthy();
+  });
+
+  it('confirms before hiding the dock and persists the visibility preference', async () => {
+    const manager = { openItem: vi.fn() } as unknown as SideDockManager;
+    const docBrowserManager = new DocBrowserManager();
+
+    render(
+      <DocBrowserProvider manager={docBrowserManager}>
+        <SideDock manager={manager} />
+      </DocBrowserProvider>,
+    );
+
+    const hideButton = document.querySelector('[data-side-dock-action="hide"]');
+    expect(hideButton).toBeTruthy();
+
+    fireEvent.click(hideButton as Element);
+
+    expect(await screen.findByText('You can turn it back on from Settings > Appearance.')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Hide' }));
+
+    await waitFor(() => {
+      expect(useSideDockStore.getState().isVisible).toBe(false);
+    });
+  });
+
   it('does not highlight the default docs tab while DocBrowser is closed', () => {
     const manager = { openItem: vi.fn() } as unknown as SideDockManager;
     const docBrowserManager = new DocBrowserManager();

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

@@ -1,7 +1,10 @@
-import { AppWindow, BookOpen, Boxes, Plus, X } from 'lucide-react';
+import { AppWindow, BookOpen, Boxes, Github, PanelRightClose, Plus, X } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
-import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import {
+  getSideDockBuiltInItems,
+  SIDE_DOCK_GITHUB_PROJECT_ITEM_ID,
+} from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type {
   SideDockIconName,
@@ -19,6 +22,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/shared/components/ui/tooltip';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 
@@ -29,11 +33,14 @@ type SideDockProps = {
 const SIDE_DOCK_ICON_COMPONENTS: Record<SideDockIconName, LucideIcon> = {
   apps: Boxes,
   docs: BookOpen,
+  github: Github,
   'new-tab': Plus,
   'panel-app': AppWindow,
   'service-apps': AppWindow,
 };
 
+const SIDE_DOCK_UTILITY_ITEM_IDS = new Set<string>([SIDE_DOCK_GITHUB_PROJECT_ITEM_ID]);
+
 const SIDE_DOCK_EMOJI_ICON_PATTERN = /^\p{Extended_Pictographic}(?:\uFE0F|\uFE0E)?(?:\u200D\p{Extended_Pictographic}(?:\uFE0F|\uFE0E)?)*$/u;
 
 function isSideDockEmojiIcon(value: string): boolean {
@@ -117,10 +124,45 @@ function SideDockButton({
   );
 }
 
+function SideDockActionButton({
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          title={label}
+          data-side-dock-action="hide"
+          onClick={onClick}
+          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',
+          )}
+        >
+          <Icon className="h-5 w-5" aria-hidden="true" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="left">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 function normalizeSideDockUri(uri?: string): string {
   return uri?.trim() ?? '';
 }
 
+function getSideDockResourceUri(item: SideDockItem): string | null {
+  return item.target.type === 'right-panel-resource' ? item.target.uri : null;
+}
+
 function isSideDockItemActive(
   item: SideDockItem,
   isDocBrowserOpen: boolean,
@@ -130,7 +172,10 @@ function isSideDockItemActive(
   if (!isDocBrowserOpen || !currentTab) {
     return false;
   }
-  const itemUri = normalizeSideDockUri(item.target.uri);
+  const itemUri = normalizeSideDockUri(getSideDockResourceUri(item) ?? undefined);
+  if (!itemUri) {
+    return false;
+  }
   const currentResourceUri = normalizeSideDockUri(currentTab.resourceUri);
   if (
     (currentResourceUri && currentResourceUri === itemUri)
@@ -151,16 +196,35 @@ function hasExactActiveSideDockItem(items: SideDockItem[], currentTab?: DocBrows
   const currentResourceUri = normalizeSideDockUri(currentTab.resourceUri);
   const currentUrl = normalizeSideDockUri(currentTab.currentUrl);
   return items.some((item) => {
-    const itemUri = normalizeSideDockUri(item.target.uri);
+    const itemUri = normalizeSideDockUri(getSideDockResourceUri(item) ?? undefined);
     return itemUri === currentResourceUri || itemUri === currentUrl;
   });
 }
 
+function isSideDockUtilityItem(item: SideDockItem): boolean {
+  return SIDE_DOCK_UTILITY_ITEM_IDS.has(item.id);
+}
+
 export function SideDock({ manager }: SideDockProps) {
   const pinnedItems = useSideDockStore((state) => state.pinnedItems);
+  const setSideDockVisible = useSideDockStore((state) => state.setVisible);
   const { currentTab, isOpen } = useDocBrowser();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
   const items = mergeSideDockItems(getSideDockBuiltInItems(), pinnedItems);
+  const mainItems = items.filter((item) => !isSideDockUtilityItem(item));
+  const utilityItems = items.filter(isSideDockUtilityItem);
   const hasExactActiveItem = hasExactActiveSideDockItem(items, currentTab);
+  const handleHideSideDock = async (): Promise<void> => {
+    const confirmed = await confirm({
+      title: t('sideDockHideConfirmTitle'),
+      description: t('sideDockHideConfirmDescription'),
+      confirmLabel: t('sideDockHideConfirmAction'),
+      cancelLabel: t('cancel'),
+    });
+    if (confirmed) {
+      setSideDockVisible(false);
+    }
+  };
 
   return (
     <TooltipProvider delayDuration={250}>
@@ -168,15 +232,38 @@ export function SideDock({ manager }: SideDockProps) {
         data-testid="side-dock"
         className="z-30 flex h-full w-14 shrink-0 flex-col items-center gap-1 border-l border-border/60 bg-background/95 px-2 py-3"
       >
-        {items.map((item) => (
-          <SideDockButton
-            key={item.id}
-            active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
-            item={item}
-            onOpen={manager.openItem}
-            onUnpin={(dockItem) => manager.unpinItem(dockItem.id)}
-          />
-        ))}
+        <div className="flex w-full flex-col items-center gap-1">
+          {mainItems.map((item) => (
+            <SideDockButton
+              key={item.id}
+              active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
+              item={item}
+              onOpen={manager.openItem}
+              onUnpin={(dockItem) => manager.unpinItem(dockItem.id)}
+            />
+          ))}
+        </div>
+        {utilityItems.length > 0 ? (
+          <div data-testid="side-dock-utility" className="mt-auto flex w-full flex-col items-center gap-1">
+            {utilityItems.map((item) => (
+              <SideDockButton
+                key={item.id}
+                active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
+                item={item}
+                onOpen={manager.openItem}
+                onUnpin={(dockItem) => manager.unpinItem(dockItem.id)}
+              />
+            ))}
+            <SideDockActionButton
+              icon={PanelRightClose}
+              label={t('sideDockHide')}
+              onClick={() => {
+                void handleHideSideDock();
+              }}
+            />
+          </div>
+        ) : null}
+        <ConfirmDialog />
       </aside>
     </TooltipProvider>
   );

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

@@ -7,6 +7,8 @@ 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_GITHUB_PROJECT_ITEM_ID = 'github-project';
+export const SIDE_DOCK_GITHUB_PROJECT_URL = 'https://github.com/Peiiii/nextclaw';
 
 export function getSideDockBuiltInItems(): SideDockItem[] {
   return [
@@ -42,5 +44,13 @@ export function getSideDockBuiltInItems(): SideDockItem[] {
       removable: false,
       target: { type: 'right-panel-resource', uri: RIGHT_PANEL_HOME_URL },
     },
+    {
+      builtIn: true,
+      icon: { type: 'builtin', name: 'github' },
+      id: SIDE_DOCK_GITHUB_PROJECT_ITEM_ID,
+      label: t('sideDockGitHubProject'),
+      removable: false,
+      target: { type: 'external-url', url: SIDE_DOCK_GITHUB_PROJECT_URL },
+    },
   ];
 }