@nextclaw/ui 0.15.25 → 0.15.27

package/src/features/inbox/pages/inbox-page.test.ts

@@ -1,5 +1,76 @@
-import { describe, expect, it } from "vitest";
-import { resolveInboxFilter } from "@/features/inbox/pages/inbox-page";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createElement } from "react";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CHAT_DRAFT_SESSION_PATH } from "@/features/chat";
+import { InboxPage, resolveInboxFilter } from "@/features/inbox/pages/inbox-page";
+import { t } from "@/shared/lib/i18n";
+
+const mocks = vi.hoisted(() => ({
+  prepareChatReference: vi.fn(),
+  requestSystemObjectReference: vi.fn(),
+}));
+
+vi.mock("@/app/components/app-presenter-provider", () => ({
+  useAppPresenter: () => ({
+    chatDraftIntentManager: {
+      requestSystemObjectReference: mocks.requestSystemObjectReference,
+    },
+    inboxManager: {
+      archive: vi.fn(),
+      delete: vi.fn(),
+      markRead: vi.fn(),
+      markUnread: vi.fn(),
+      prepareChatReference: mocks.prepareChatReference,
+      restore: vi.fn(),
+    },
+  }),
+}));
+
+vi.mock("@/app/hooks/use-viewport-layout", () => ({
+  useViewportLayout: () => ({ isMobile: false }),
+}));
+
+vi.mock("@/features/inbox/hooks/use-inbox-deliveries", () => ({
+  useInboxDeliveries: () => ({
+    data: {
+      deliveries: [{
+        id: "delivery-1",
+        title: "A considered report",
+        summary: "A concise summary",
+        content: "# Finding",
+        contentType: "markdown",
+        source: { kind: "agent", agentId: null, sessionId: null, toolCallId: null, filePath: null },
+        createdAt: "2026-08-06T00:00:00.000Z",
+        updatedAt: "2026-08-06T00:00:00.000Z",
+        presentedAt: "2026-08-06T00:01:00.000Z",
+        readAt: "2026-08-06T00:02:00.000Z",
+        archivedAt: null,
+      }],
+    },
+    isError: false,
+  }),
+}));
+
+vi.mock("@/features/inbox/components/inbox-delivery-content", () => ({
+  InboxDeliveryContent: ({ content }: { content: string }) =>
+    createElement("article", null, content),
+}));
+
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: vi.fn(async () => true),
+    ConfirmDialog: () => null,
+  }),
+}));
+
+function CurrentPath() {
+  return createElement(
+    "span",
+    { "data-testid": "current-path" },
+    useLocation().pathname,
+  );
+}
 
 const readDelivery = {
   archivedAt: null,
@@ -26,3 +97,51 @@ describe("resolveInboxFilter", () => {
     expect(resolveInboxFilter([unreadDelivery], "archived")).toBe("archived");
   });
 });
+
+describe("InboxPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.prepareChatReference.mockResolvedValue({
+      reference: {
+        uri: "nextclaw://objects/inbox-delivery/delivery-1",
+        label: "A considered report",
+      },
+    });
+  });
+
+  it("opens a draft with the same visible system object intent as the reader dialog", async () => {
+    render(
+      createElement(
+        MemoryRouter,
+        { initialEntries: ["/inbox/delivery-1"] },
+        createElement(
+          Routes,
+          null,
+          createElement(Route, {
+            path: "/inbox/:deliveryId",
+            element: createElement(
+              "div",
+              null,
+              createElement(InboxPage),
+              createElement(CurrentPath),
+            ),
+          }),
+          createElement(Route, {
+            path: "*",
+            element: createElement(CurrentPath),
+          }),
+        ),
+      ),
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: t("inboxContinueChat") }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("current-path").textContent).toBe(CHAT_DRAFT_SESSION_PATH);
+    });
+    expect(mocks.prepareChatReference).toHaveBeenCalledWith("delivery-1");
+    expect(mocks.requestSystemObjectReference).toHaveBeenCalledWith(
+      expect.objectContaining({ uri: "nextclaw://objects/inbox-delivery/delivery-1" }),
+    );
+  });
+});

package/src/features/inbox/pages/inbox-page.tsx

@@ -5,6 +5,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { PageHeader } from "@/app/components/layout/page-layout";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
+import { CHAT_DRAFT_SESSION_PATH } from "@/features/chat";
 import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
 import { useInboxDeliveries } from "@/features/inbox/hooks/use-inbox-deliveries";
 import { Button } from "@/shared/components/ui/button";
@@ -246,7 +247,7 @@ export function InboxPage() {
   const navigate = useNavigate();
   const { deliveryId } = useParams<{ deliveryId?: string }>();
   const { isMobile } = useViewportLayout();
-  const { inboxManager } = useAppPresenter();
+  const { chatDraftIntentManager, inboxManager } = useAppPresenter();
   const deliveriesQuery = useInboxDeliveries();
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const [selectedFilter, setSelectedFilter] = useState<InboxFilter | null>(null);
@@ -287,8 +288,9 @@ export function InboxPage() {
       return;
     }
     void runAction("continue", async () => {
-      const result = await inboxManager.continueInChat(activeDelivery.id);
-      navigate(`/chat/${encodeURIComponent(result.sessionId)}`);
+      const { reference } = await inboxManager.prepareChatReference(activeDelivery.id);
+      chatDraftIntentManager.requestSystemObjectReference(reference);
+      navigate(CHAT_DRAFT_SESSION_PATH);
     });
   };
 

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -1,5 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MarketplacePage } from "@/features/marketplace";
+import { NextClawClientError } from "@nextclaw/client-sdk";
 import type {
   MarketplaceInstalledView,
   MarketplaceItemSummary,
@@ -82,6 +83,8 @@ vi.mock("@/shared/lib/host-capabilities", () => ({
 }));
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
+  isMarketplaceSkillLocalChangesError: (error: { code?: string }) =>
+    error?.code === "MARKETPLACE_SKILL_LOCAL_CHANGES",
   useMarketplaceItems: () => mocks.itemsQuery,
   useMarketplaceRecentItems: () => mocks.recentItemsQuery,
   useMarketplaceSkillScenes: () => ({
@@ -160,6 +163,43 @@ function createInstalledQuery(
   };
 }
 
+function prepareInstalledSkillUpdate() {
+  const item = createMarketplaceItem();
+  mocks.itemsQuery = createItemsQuery({
+    data: {
+      total: 1,
+      page: 1,
+      pageSize: 20,
+      totalPages: 1,
+      sort: "relevance",
+      items: [item],
+    } satisfies MarketplaceListView,
+  });
+  mocks.installedQuery = createInstalledQuery({
+    data: {
+      type: "skill",
+      total: 1,
+      specs: [item.slug],
+      records: [{
+        type: "skill",
+        id: item.slug,
+        spec: item.slug,
+        source: "workspace",
+        origin: "marketplace",
+        catalogSlug: item.slug,
+        enabled: true,
+      }],
+    } satisfies MarketplaceInstalledView,
+  });
+  mocks.manageMutation.mutateAsync.mockRejectedValueOnce(
+    new NextClawClientError({
+      message: "Local skill files changed since install: web-search",
+      status: 409,
+      code: "MARKETPLACE_SKILL_LOCAL_CHANGES",
+    }),
+  );
+}
+
 describe("MarketplacePage", () => {
   beforeEach(() => {
     mocks.navigate.mockReset();
@@ -364,4 +404,48 @@ describe("MarketplacePage", () => {
 
     expect(mocks.openExternalUrl).toHaveBeenCalledWith("https://skillhub.cn/");
   });
+
+  it("asks before overwriting local skill changes and retries the update with force", async () => {
+    prepareInstalledSkillUpdate();
+    mocks.manageMutation.mutateAsync.mockResolvedValueOnce({});
+    mocks.confirm.mockResolvedValueOnce(true);
+
+    render(<MarketplacePage forcedType="skills" />);
+    fireEvent.click(screen.getByRole("button", { name: "Update" }));
+
+    await waitFor(() => expect(mocks.confirm).toHaveBeenCalledWith({
+      title: "Overwrite local changes and update?",
+      description: "This skill was changed after installation. Continuing replaces local changes in its skill directory with the latest marketplace version. Canceling leaves the current files unchanged.",
+      confirmLabel: "Overwrite and Update",
+      variant: "destructive",
+    }));
+    await waitFor(() => expect(mocks.manageMutation.mutateAsync).toHaveBeenCalledTimes(2));
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenNthCalledWith(1, {
+      type: "skill",
+      action: "update",
+      id: "web-search",
+      spec: "web-search",
+    });
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenNthCalledWith(2, {
+      type: "skill",
+      action: "update",
+      id: "web-search",
+      spec: "web-search",
+      force: true,
+    });
+  });
+
+  it("keeps local skill changes untouched when overwrite is canceled", async () => {
+    prepareInstalledSkillUpdate();
+    mocks.confirm.mockResolvedValueOnce(false);
+
+    render(<MarketplacePage forcedType="skills" />);
+    fireEvent.click(screen.getByRole("button", { name: "Update" }));
+
+    await waitFor(() => expect(mocks.confirm).toHaveBeenCalledTimes(1));
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenCalledTimes(1);
+    expect(mocks.manageMutation.mutateAsync).not.toHaveBeenCalledWith(
+      expect.objectContaining({ force: true }),
+    );
+  });
 });

package/src/features/marketplace/hooks/__tests__/use-marketplace.test.tsx

@@ -1,14 +1,25 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { renderHook, waitFor } from "@testing-library/react";
+import { act, renderHook, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import {
+  useManageMarketplaceItem,
   useMarketplaceItems,
   useMarketplaceRecentItems,
 } from "@/features/marketplace/hooks/use-marketplace";
+import { NextClawClientError } from "@nextclaw/client-sdk";
 import type { MarketplaceListView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   fetchMarketplaceItems: vi.fn(),
+  manageMarketplaceItem: vi.fn(),
+  toastError: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: mocks.toastError,
+    success: vi.fn(),
+  },
 }));
 
 vi.mock("@/shared/lib/api", async () => {
@@ -16,6 +27,7 @@ vi.mock("@/shared/lib/api", async () => {
   return {
     ...(actual as object),
     fetchMarketplaceItems: mocks.fetchMarketplaceItems,
+    manageMarketplaceItem: mocks.manageMarketplaceItem,
   };
 });
 
@@ -132,3 +144,34 @@ describe("useMarketplaceItems", () => {
     });
   });
 });
+
+describe("useManageMarketplaceItem", () => {
+  beforeEach(() => {
+    mocks.manageMarketplaceItem.mockReset();
+    mocks.toastError.mockReset();
+  });
+
+  it("leaves local-change conflicts for the explicit overwrite confirmation", async () => {
+    const conflict = new NextClawClientError({
+      message: "Local skill files changed since install: web-search",
+      status: 409,
+      code: "MARKETPLACE_SKILL_LOCAL_CHANGES",
+    });
+    mocks.manageMarketplaceItem.mockRejectedValueOnce(conflict);
+
+    const { result } = renderHook(() => useManageMarketplaceItem(), {
+      wrapper: createWrapper(),
+    });
+
+    await act(async () => {
+      await expect(result.current.mutateAsync({
+        type: "skill",
+        action: "update",
+        id: "web-search",
+        spec: "web-search",
+      })).rejects.toBe(conflict);
+    });
+
+    expect(mocks.toastError).not.toHaveBeenCalled();
+  });
+});

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

@@ -4,6 +4,7 @@ import type {
   MarketplaceManageAction,
 } from "@/shared/lib/api";
 import {
+  isMarketplaceSkillLocalChangesError,
   useInstallMarketplaceItem,
   useManageMarketplaceItem,
 } from "@/features/marketplace/hooks/use-marketplace";
@@ -76,12 +77,32 @@ export function useMarketplaceItemActions() {
     setManagingTargets((previous) => new Map(previous).set(targetId, action));
 
     try {
-      await manageMutation.mutateAsync({
+      const request = {
         type: record.type,
         action,
         id: targetId,
         spec: record.spec,
-      });
+      } as const;
+      try {
+        await manageMutation.mutateAsync(request);
+      } catch (error) {
+        if (action !== "update" || !isMarketplaceSkillLocalChangesError(error)) {
+          return;
+        }
+        const confirmed = await confirm({
+          title: t("marketplaceUpdateConflictTitle"),
+          description: t("marketplaceUpdateConflictDescription"),
+          confirmLabel: t("marketplaceUpdateConflictConfirm"),
+          variant: "destructive",
+        });
+        if (!confirmed) {
+          return;
+        }
+        await manageMutation.mutateAsync({
+          ...request,
+          force: true,
+        });
+      }
     } finally {
       setManagingTargets((previous) => {
         const next = new Map(previous);

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

@@ -24,8 +24,15 @@ import type {
 } from '@/shared/lib/api';
 import { collapseMarketplaceListPages } from '@/features/marketplace/utils/marketplace-list-pages.utils';
 import { useMemo } from 'react';
+import { NextClawClientError } from '@nextclaw/client-sdk';
 
 const MARKETPLACE_BACKGROUND_REFRESH_MS = 30_000;
+export const MARKETPLACE_SKILL_LOCAL_CHANGES_ERROR_CODE = 'MARKETPLACE_SKILL_LOCAL_CHANGES';
+
+export function isMarketplaceSkillLocalChangesError(error: unknown): boolean {
+  return error instanceof NextClawClientError
+    && error.code === MARKETPLACE_SKILL_LOCAL_CHANGES_ERROR_CODE;
+}
 
 export function useMarketplaceItems(params: MarketplaceListParams) {
   const query = useInfiniteQuery({
@@ -209,6 +216,9 @@ export function useManageMarketplaceItem() {
       toast.success(result.message || fallback);
     },
     onError: (error: Error) => {
+      if (isMarketplaceSkillLocalChangesError(error)) {
+        return;
+      }
       toast.error(error.message || t('marketplaceOperationFailed'));
     }
   });

package/src/features/marketplace/index.ts

@@ -3,6 +3,10 @@ export { McpMarketplacePage } from './components/mcp/mcp-marketplace-page';
 export {
   MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
 } from './components/marketplace-detail-doc';
+export {
+  buildLocaleFallbacks,
+  pickLocalizedText,
+} from './components/marketplace-localization';
 export {
   useInstallMarketplaceItem,
   useManageMarketplaceItem,

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

@@ -134,7 +134,7 @@ describe('PanelAppsList', () => {
 
     expect(screen.getByText('Demo Panel')).toBeTruthy();
 
-    await user.click(screen.getByRole('button', { name: 'Favorites' }));
+    await user.click(screen.getByRole('tab', { name: 'Favorites' }));
 
     expect(screen.getByText('No panel apps in this view')).toBeTruthy();
     expect(screen.queryByText('Create your first panel app')).toBeNull();

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

@@ -14,10 +14,8 @@ import { t } from '@/shared/lib/i18n';
 const EMPTY_PANEL_APP_ENTRIES: PanelAppEntryView[] = [];
 
 export function PanelAppsList({
-  headerContent,
   onOpenPanelApp,
 }: {
-  headerContent?: ReactNode;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const panelApps = usePanelApps();
@@ -95,11 +93,8 @@ export function PanelAppsList({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-4 py-3">
+      <div className="flex min-h-12 shrink-0 items-center justify-end gap-2 border-b border-border/70 px-4 py-2">
         <div className="flex min-w-0 items-center gap-1.5">
-          {headerContent ?? (
-            <div className="truncate text-sm font-semibold text-foreground">{t('panelAppsTitle')}</div>
-          )}
           {panelApps.data?.panelsPath ? (
             <TooltipProvider delayDuration={250}>
               <Tooltip>

package/src/features/panel-apps/index.ts

@@ -1,5 +1,9 @@
 export { PanelAppsList } from './components/panel-apps-list';
-export { usePanelApps } from './hooks/use-panel-apps';
+export {
+  useGrantPanelAppClient,
+  usePanelApps,
+  useRecordPanelAppOpened,
+} from './hooks/use-panel-apps';
 export { PanelAppBridgeManager } from './managers/panel-app-bridge.manager';
 export { findPanelAppEntryByDisplayId } from './utils/panel-app-entry-match.utils';
 export { PANEL_APP_IFRAME_SANDBOX, focusPanelAppIframe } from './utils/panel-app-iframe.utils';

package/src/features/panel-apps/utils/__tests__/panel-app-doc-browser.utils.test.ts

@@ -4,9 +4,16 @@ import {
 } from '@/features/panel-apps/utils/panel-app-doc-browser.utils';
 
 describe('panel app doc browser URL helpers', () => {
-  it('uses the root apps URL for the default panel apps tab', () => {
-    expect(createAppsPanelUrl('panel-apps')).toBe('nextclaw://apps');
-    expect(getAppsPanelTabFromUrl('nextclaw://apps')).toBe('panel-apps');
+  it('uses the root apps URL for the package library', () => {
+    expect(createAppsPanelUrl('apps')).toBe('nextclaw://apps');
+    expect(getAppsPanelTabFromUrl('nextclaw://apps')).toBe('apps');
+  });
+
+  it('round-trips the developer panel apps tab', () => {
+    const url = createAppsPanelUrl('panel-apps');
+
+    expect(url).toBe('nextclaw://apps?tab=panel-apps');
+    expect(getAppsPanelTabFromUrl(url)).toBe('panel-apps');
   });
 
   it('round-trips the service apps tab through the hidden apps URL', () => {
@@ -16,8 +23,8 @@ describe('panel app doc browser URL helpers', () => {
     expect(getAppsPanelTabFromUrl(url)).toBe('service-apps');
   });
 
-  it('falls back to panel apps for unknown URL state', () => {
-    expect(getAppsPanelTabFromUrl('nextclaw://apps?tab=unknown')).toBe('panel-apps');
-    expect(getAppsPanelTabFromUrl('not a url')).toBe('panel-apps');
+  it('falls back to the package library for unknown URL state', () => {
+    expect(getAppsPanelTabFromUrl('nextclaw://apps?tab=unknown')).toBe('apps');
+    expect(getAppsPanelTabFromUrl('not a url')).toBe('apps');
   });
 });

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

@@ -10,6 +10,7 @@ import {
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_HOME_TAB_KIND,
   RIGHT_PANEL_PANEL_APP_TAB_KIND,
+  RIGHT_PANEL_PANEL_APPS_URL,
   RIGHT_PANEL_SERVICE_APPS_URL,
   RightPanelResourceHomePage,
 } from '@/features/right-panel-resources';
@@ -18,14 +19,16 @@ import { PANEL_APP_IFRAME_SANDBOX, focusPanelAppIframe } from './panel-app-ifram
 
 export const APPS_TAB_KIND = RIGHT_PANEL_APPS_TAB_KIND;
 export const PANEL_APP_TAB_KIND = RIGHT_PANEL_PANEL_APP_TAB_KIND;
-const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'panel-apps';
+const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'apps';
 
 function isAppsPanelTab(value: unknown): value is AppsPanelTab {
-  return value === 'panel-apps' || value === 'service-apps';
+  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
 }
 
 export function createAppsPanelUrl(tab: AppsPanelTab = DEFAULT_APPS_PANEL_TAB): string {
-  return tab === DEFAULT_APPS_PANEL_TAB ? RIGHT_PANEL_APPS_URL : RIGHT_PANEL_SERVICE_APPS_URL;
+  if (tab === 'panel-apps') return RIGHT_PANEL_PANEL_APPS_URL;
+  if (tab === 'service-apps') return RIGHT_PANEL_SERVICE_APPS_URL;
+  return RIGHT_PANEL_APPS_URL;
 }
 
 export function getAppsPanelTabFromUrl(url: string): AppsPanelTab {

package/src/features/right-panel-resources/index.ts

@@ -15,5 +15,6 @@ export {
   RIGHT_PANEL_HOME_TAB_KIND,
   RIGHT_PANEL_HOME_URL,
   RIGHT_PANEL_PANEL_APP_TAB_KIND,
+  RIGHT_PANEL_PANEL_APPS_URL,
   RIGHT_PANEL_SERVICE_APPS_URL,
 } from '@/features/right-panel-resources/utils/right-panel-resource-uri.utils';

package/src/features/right-panel-resources/utils/__tests__/right-panel-resource-uri.utils.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import {
+  createChatUiResourceReferenceFromTab,
   createPanelAppContentPath,
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
@@ -26,6 +27,39 @@ function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelA
 }
 
 describe('right-panel-resource uri utils', () => {
+  it('creates a stable chat reference for an addressable panel tab', () => {
+    expect(createChatUiResourceReferenceFromTab({
+      id: 'panel-demo',
+      kind: 'panel-app',
+      title: 'Demo App',
+      currentUrl: '/api/panel-apps/demo/content',
+      resourceUri: 'nextclaw://panel-app/demo',
+      contentParams: { itemId: 'note-1' },
+      history: ['/api/panel-apps/demo/content'],
+      historyIndex: 0,
+      navVersion: 0,
+    })).toEqual({
+      uri: 'nextclaw://panel-app/demo',
+      resourceKind: 'panel-app',
+      title: 'Demo App',
+      currentUrl: '/api/panel-apps/demo/content',
+      contentParams: { itemId: 'note-1' },
+    });
+  });
+
+  it('does not create chat references for empty browser tabs', () => {
+    expect(createChatUiResourceReferenceFromTab({
+      id: 'home',
+      kind: 'home',
+      title: 'Start Page',
+      currentUrl: 'nextclaw://new-tab',
+      resourceUri: 'nextclaw://new-tab',
+      history: ['nextclaw://new-tab'],
+      historyIndex: 0,
+      navVersion: 0,
+    })).toBeNull();
+  });
+
   it('builds matching external panel app resource and content URLs', () => {
     expect(createPanelAppResourceUri('demo', '/tmp/demo.panel')).toBe(
       'nextclaw://panel-app/demo?path=%2Ftmp%2Fdemo.panel',

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -1,24 +1,56 @@
+import {
+  readChatUiResourceReference,
+  type ChatUiResourceReference,
+} from '@nextclaw/shared';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import type { DocBrowserDockIcon } from '@/shared/components/doc-browser';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
 import type { RightPanelResourceTarget } from '@/features/right-panel-resources/types/right-panel-resource.types';
 
 export const RIGHT_PANEL_HOME_TAB_KIND = 'home';
 export const RIGHT_PANEL_HOME_URL = 'nextclaw://new-tab';
 export const RIGHT_PANEL_APPS_TAB_KIND = 'apps';
 export const RIGHT_PANEL_APPS_URL = 'nextclaw://apps';
+export const RIGHT_PANEL_PANEL_APPS_URL = `${RIGHT_PANEL_APPS_URL}?tab=panel-apps`;
 export const RIGHT_PANEL_SERVICE_APPS_URL = `${RIGHT_PANEL_APPS_URL}?tab=service-apps`;
 export const RIGHT_PANEL_PANEL_APP_TAB_KIND = 'panel-app';
 
-export type RightPanelAppsTab = 'panel-apps' | 'service-apps';
+const NON_REFERENCEABLE_RESOURCE_URIS = new Set([
+  RIGHT_PANEL_HOME_URL,
+  'about:blank',
+]);
 
-const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'panel-apps';
+export function createChatUiResourceReferenceFromTab(
+  tab: DocBrowserTab,
+): ChatUiResourceReference | null {
+  const uri = tab.resourceUri?.trim() || tab.currentUrl.trim();
+  const currentUrl = tab.currentUrl.trim();
+  if (!uri || !currentUrl || NON_REFERENCEABLE_RESOURCE_URIS.has(uri)) {
+    return null;
+  }
+  return readChatUiResourceReference({
+    uri,
+    resourceKind: tab.kind,
+    title: tab.title.trim() || uri,
+    currentUrl,
+    ...(tab.contentParams
+      ? { contentParams: structuredClone(tab.contentParams) }
+      : {}),
+  });
+}
+
+export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps';
+
+const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'apps';
 
 function isRightPanelAppsTab(value: unknown): value is RightPanelAppsTab {
-  return value === 'panel-apps' || value === 'service-apps';
+  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
 }
 
 export function createRightPanelAppsUrl(tab: RightPanelAppsTab = DEFAULT_RIGHT_PANEL_APPS_TAB): string {
-  return tab === DEFAULT_RIGHT_PANEL_APPS_TAB ? RIGHT_PANEL_APPS_URL : RIGHT_PANEL_SERVICE_APPS_URL;
+  if (tab === 'panel-apps') return RIGHT_PANEL_PANEL_APPS_URL;
+  if (tab === 'service-apps') return RIGHT_PANEL_SERVICE_APPS_URL;
+  return RIGHT_PANEL_APPS_URL;
 }
 
 export function getRightPanelAppsTabFromUrl(url: string): RightPanelAppsTab {