@nextclaw/ui 0.26.5 → 0.27.1

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

@@ -9,7 +9,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 { buildSessionPath, 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";
@@ -271,11 +271,12 @@ function InboxDetailPane({
   );
 }
 
-export function InboxPage() {
+export function InboxPage({ resourceId }: { resourceId?: string } = {}) {
   const navigate = useNavigate();
-  const { deliveryId } = useParams<{ deliveryId?: string }>();
+  const { deliveryId: routeDeliveryId } = useParams<{ deliveryId?: string }>();
+  const deliveryId = resourceId ?? routeDeliveryId;
   const { isMobile } = useViewportLayout();
-  const { chatDraftIntentManager, inboxManager } = useAppPresenter();
+  const { chatComposerIntentManager, docBrowserManager, inboxManager } = useAppPresenter();
   const deliveriesQuery = useInboxDeliveries();
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const [selectedFilter, setSelectedFilter] = useState<InboxFilter | null>(null);
@@ -316,9 +317,10 @@ export function InboxPage() {
       return;
     }
     void runAction("continue", async () => {
-      const { reference } = await inboxManager.prepareChatReference(activeDelivery.id);
-      chatDraftIntentManager.requestSystemObjectReference(reference);
-      navigate(CHAT_DRAFT_SESSION_PATH);
+      const { reference, targetSessionKey } = await inboxManager.prepareChatReference(activeDelivery.id);
+      chatComposerIntentManager.requestSystemObjectReference({ targetSessionKey, reference });
+      if (isMobile) docBrowserManager.close();
+      navigate(targetSessionKey ? buildSessionPath(targetSessionKey) : CHAT_DRAFT_SESSION_PATH);
     });
   };
 
@@ -365,12 +367,14 @@ export function InboxPage() {
     });
   };
 
-  const showList = !isMobile || !deliveryId;
+  const showList = !resourceId && (!isMobile || !deliveryId);
   const showDetail = !isMobile || Boolean(deliveryId);
+  if (resourceId && deliveriesQuery.isPending) return <p role="status" className="p-4">{t("loading")}</p>;
+  if (resourceId && !deliveriesQuery.isError && !activeDelivery) return <p role="alert" className="p-4">{t("resourceNotFound")}</p>;
 
   return (
     <div className="flex h-full min-h-0 flex-col md:gap-6">
-      {!isMobile ? <PageHeader
+      {!isMobile && !resourceId ? <PageHeader
         headingLevel={1}
         title={t("inboxTitle")}
         className="px-4 sm:px-0"
@@ -380,7 +384,7 @@ export function InboxPage() {
         {deliveriesQuery.isError ? (
           <div className="p-4">{isMobile && deliveryId ? <IconActionButton icon={<ArrowLeft className="h-4 w-4" />} label={t("inboxTitle")} onClick={() => navigate('/inbox')} /> : null}<p role="alert" className="text-sm text-destructive">{t("inboxLoadError")}</p></div>
         ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
+          <div className={cn("grid h-full min-h-0 grid-cols-1", !resourceId && "md:grid-cols-[300px_minmax(0,1fr)]")}>
             {showList ? <InboxListPane
               activeDeliveryId={activeDelivery?.id ?? null}
               deliveries={deliveries}

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

@@ -28,6 +28,7 @@ const mocks = vi.hoisted(() => ({
   fetchMarketplaceSkillContent: vi.fn(),
 }));
 
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));
 vi.mock("react-router-dom", async () => {
   const actual = await vi.importActual("react-router-dom");
   return {

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

@@ -47,6 +47,7 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));
 vi.mock("react-router-dom", async () => {
   const actual = await vi.importActual("react-router-dom");
   return {

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

@@ -6,6 +6,8 @@ import type {
   MarketplaceListView,
 } from "@/shared/lib/api";
 import type * as ReactQueryModule from "@tanstack/react-query";
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: vi.fn() } }) }));
+vi.mock("react-router-dom", () => ({ useNavigate: () => vi.fn() }));
 
 type ItemsQueryState = {
   data?: MarketplaceListView;

package/src/features/marketplace/components/mcp/mcp-marketplace-card.tsx

@@ -13,7 +13,7 @@ export function McpMarketplaceCard(props: {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
   localeFallbacks: string[];
-  onOpen: () => void;
+  onOpen?: () => void;
   onInstall?: () => void;
   onToggle?: () => void;
   onDoctor?: () => void;
@@ -42,7 +42,7 @@ export function McpMarketplaceCard(props: {
   return (
     <article
       onClick={onOpen}
-      className="cursor-pointer rounded-2xl border border-gray-200/70 bg-white p-4 shadow-sm transition hover:border-blue-300 hover:shadow-md"
+      className={`rounded-2xl border border-gray-200/70 bg-white p-4 shadow-sm transition${onOpen ? " cursor-pointer hover:border-blue-300 hover:shadow-md" : ""}`}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">

package/src/features/marketplace/components/mcp/mcp-marketplace-page.tsx

@@ -50,12 +50,17 @@ import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-load
 import { cn } from "@/shared/lib/utils";
 import { Sparkles, PackageCheck } from "lucide-react";
 import { Button } from "@/shared/components/ui/button";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useNavigate } from "react-router-dom";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 
 type ScopeType = "catalog" | "installed";
 
 const PAGE_SIZE = 12;
 
-export function McpMarketplacePage() {
+export function McpMarketplacePage({ resourceId }: { resourceId?: string } = {}) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
   const [scope, setScope] = useState<ScopeType>("catalog");
   const [searchText, setSearchText] = useState("");
   const [query, setQuery] = useState("");
@@ -142,6 +147,10 @@ export function McpMarketplacePage() {
     item?: MarketplaceItemSummary,
     record?: MarketplaceInstalledRecord,
   ) => {
+    if (record?.id) {
+      app.pageResourceManager.open(pageResourceFromSystemObject("mcp-server", record.id, record.label || record.id), "default", navigate);
+      return;
+    }
     const title = item?.name ?? record?.label ?? record?.id ?? "MCP";
     const detailId = createMarketplaceDetailDocId(
       item ? "mcp" : "mcp-local",
@@ -260,6 +269,19 @@ export function McpMarketplacePage() {
     });
   };
 
+  if (resourceId) {
+    const record = installedQuery.data?.records.find((item) => item.id === resourceId);
+    if (installedQuery.isPending) return <p role="status" className="p-4">{t("loading")}</p>;
+    if (!record) return <p role="alert" className="p-4">{t(installedQuery.isError ? "resourceLoadFailed" : "resourceNotFound")}</p>;
+    return <div className="h-full overflow-auto p-4">
+      <McpMarketplaceCard record={record} localeFallbacks={localeFallbacks}
+        onToggle={() => void handleManage(record.enabled === false ? "enable" : "disable", record)}
+        onDoctor={() => { setDoctorTarget(record.id ?? null); setDoctorResult(null); void doctorMutation.mutateAsync(record.id ?? ""); }}
+        onRemove={() => void handleManage("remove", record)} />
+      <DoctorDialog open={Boolean(doctorTarget)} targetName={doctorTarget} result={doctorResult} pending={doctorMutation.isPending} onOpenChange={(open) => !open && setDoctorTarget(null)} />
+      <ConfirmDialog />
+    </div>;
+  }
   const scopeTabs = [
     { id: "catalog", label: t("marketplaceMcpTabCatalog"), icon: Sparkles },
     {

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

@@ -11,8 +11,13 @@ import {
 import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
 import { t } from "@/shared/lib/i18n";
 import { useRef } from "react";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
 
 export function useMarketplaceItemDetail(localeFallbacks: string[]) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
   const docBrowser = useDocBrowser();
   const detailRequestRef = useRef({ byKey: new Map<string, number>(), seq: 0 });
 
@@ -20,6 +25,12 @@ export function useMarketplaceItemDetail(localeFallbacks: string[]) {
     item?: MarketplaceItemSummary,
     record?: MarketplaceInstalledRecord,
   ) => {
+    if (record?.resourceUri) {
+      const page = app.pageResourceManager.resolve(record.resourceUri);
+      if (page) app.pageResourceManager.open(page, "default", navigate);
+      else toast.error(t("pageUnavailable"));
+      return;
+    }
     const title =
       item?.name ??
       record?.label ??

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

@@ -1,3 +1,4 @@
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { useState, type MouseEvent } from 'react';
 import { MoreVertical, Star, Trash2, type LucideIcon } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
@@ -127,13 +128,13 @@ function PanelAppMenuItem({
     <button
       type="button"
       className={cn(
-        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+        ACTION_MENU_ITEM_CLASS,
+        destructive ? ACTION_FEEDBACK.destructive : `text-foreground ${ACTION_FEEDBACK.item}`,
       )}
       disabled={disabled}
       onClick={onClick}
     >
-      <Icon className="h-4 w-4 shrink-0" />
+      <Icon className={cn("h-4 w-4 shrink-0", !destructive && "text-muted-foreground")} />
       <span>{label}</span>
     </button>
   );

package/src/features/panel-apps/components/panel-app-service-action-authorization-dialog.tsx

@@ -26,8 +26,8 @@ export function PanelAppServiceActionAuthorizationDialog() {
         }
       }}
     >
-      <DialogContent className="[&>:last-child]:hidden">
-        <DialogHeader>
+      <DialogContent>
+        <DialogHeader showClose={false}>
           <DialogTitle className="flex items-center gap-2">
             <ShieldAlert className="h-4 w-4 text-amber-600" />
             {t('serviceActionAuthorizationTitle')}

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

@@ -1,4 +1,5 @@
 export { PanelAppsList } from './components/panel-apps-list';
+export { PanelAppRuntimeSurface } from './components/panel-app-runtime-surface';
 export { PanelAppMainPage } from './pages/panel-app-main-page';
 export { PanelAppStandalonePage } from './pages/panel-app-standalone-page';
 export { PanelAppServiceActionAuthorizationDialog } from './components/panel-app-service-action-authorization-dialog';

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

@@ -2,16 +2,15 @@ import { AppWindow, Boxes } from 'lucide-react';
 import type { DocBrowserContextValue } from '@/shared/components/doc-browser/doc-browser-context';
 import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-browser/doc-browser-renderer.types';
 import { getPresenter } from '@/app/presenters/app.presenter';
-import { AppsPanel, type AppsPanelTab } from '@/features/apps';
+import { AppsPanel } from '@/features/apps';
 import { PanelAppDocBrowserToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
 import {
   createPanelAppRightPanelResourceTarget,
   RIGHT_PANEL_APPS_TAB_KIND,
-  RIGHT_PANEL_APPS_URL,
+  createRightPanelAppsUrl,
+  getRightPanelAppsTabFromUrl,
   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';
 import { t } from '@/shared/lib/i18n';
@@ -19,26 +18,8 @@ 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 = 'apps';
-
-function isAppsPanelTab(value: unknown): value is AppsPanelTab {
-  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
-}
-
-export function createAppsPanelUrl(tab: AppsPanelTab = DEFAULT_APPS_PANEL_TAB): string {
-  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 {
-  try {
-    const tab = new URL(url).searchParams.get('tab');
-    return isAppsPanelTab(tab) ? tab : DEFAULT_APPS_PANEL_TAB;
-  } catch {
-    return DEFAULT_APPS_PANEL_TAB;
-  }
-}
+export const createAppsPanelUrl = createRightPanelAppsUrl;
+export const getAppsPanelTabFromUrl = getRightPanelAppsTabFromUrl;
 
 export function openApps(docBrowser: Pick<DocBrowserContextValue, 'open'>): void {
   docBrowser.open(createAppsPanelUrl(), {

package/src/features/projects/components/work/project-work-item-drawer.tsx

@@ -39,12 +39,14 @@ import { getProjectWorkStateLabel } from "@/features/projects/utils/project-work
 import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
 
 export function ProjectWorkItemDrawer({
+  embedded = false,
   onOpenArtifact,
   onOpenChange,
   projectId,
   projectRoot,
   workItemId,
 }: {
+  embedded?: boolean;
   onOpenArtifact: (path: string, label: string) => void;
   onOpenChange: (open: boolean) => void;
   projectId: string;
@@ -55,13 +57,7 @@ export function ProjectWorkItemDrawer({
   const activity = useProjectWorkActivity(projectId, workItemId);
   useProjectWorkEvents(projectId);
   const states = useProjectWorkStates(projectId);
-  return (
-    <Sheet open={Boolean(workItemId)} onOpenChange={onOpenChange}>
-      <SheetContent
-        side="right"
-        closeLabel={t("projectsCloseDetails")}
-        className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-[680px]"
-      >
+  const content = <>
         {item.isLoading ? (
           <div className="p-6 text-sm text-muted-foreground">
             {t("projectsLoading")}
@@ -84,9 +80,10 @@ export function ProjectWorkItemDrawer({
             onClose={() => onOpenChange(false)}
           />
         ) : null}
-      </SheetContent>
-    </Sheet>
-  );
+  </>;
+  return <Sheet open={!embedded && Boolean(workItemId)} onOpenChange={onOpenChange}>
+    {embedded ? <div className="flex h-full min-h-0 flex-col">{content}</div> : <SheetContent side="right" closeLabel={t("projectsCloseDetails")} className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-[680px]">{content}</SheetContent>}
+  </Sheet>;
 }
 
 function ProjectWorkItemEditor({

package/src/features/projects/components/work/project-work-items.tsx

@@ -255,7 +255,7 @@ function ProjectWorkStateGroup({
         <div
           className={
             view === "board"
-              ? "min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain px-1 pb-3"
+              ? "min-h-0 flex-1 space-y-2 overflow-y-auto px-1 pb-3"
               : "space-y-2 px-1 pb-3"
           }
         >

package/src/features/projects/pages/project-home-page.tsx

@@ -28,6 +28,8 @@ import {
   type ProjectHomeTab,
 } from "@/features/projects/presenters/project-home.presenter";
 import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 
 const PROJECT_TABS: ProjectHomeTab[] = [
   "overview",
@@ -37,19 +39,21 @@ const PROJECT_TABS: ProjectHomeTab[] = [
   "agreement",
 ];
 
-export function ProjectsPage() {
-  const { projectId, tab: tabParam } = useParams<{
+export function ProjectsPage({ resourceId, resourceWorkId }: { resourceId?: string; resourceWorkId?: string } = {}) {
+  const app = useAppPresenter();
+  const { projectId: routeProjectId, tab: routeTab } = useParams<{
     projectId?: string;
     tab?: string;
   }>();
+  const projectId = resourceId ?? routeProjectId;
+  const [resourceTab, setResourceTab] = useState<ProjectHomeTab>("overview");
+  const tabParam = resourceId ? resourceTab : routeTab;
   const navigate = useNavigate();
   const { state } = useLocation();
   const presenter = usePresenter();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
-  const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
-    null,
-  );
+  const openWorkItem = (id: string) => app.pageResourceManager.open(pageResourceFromSystemObject("project-work", JSON.stringify([projectId, id]), id), "default", navigate);
   const registered = projects.data?.projects ?? [];
   const selectedProject =
     registered.find((project) => project.id === projectId) ?? null;
@@ -74,6 +78,7 @@ export function ProjectsPage() {
         {t("projectsLoadFailed")}: {projects.error.message}
       </main>
     );
+  if (resourceId && !selectedProject) return <p role="alert" className="p-4">{t("resourceNotFound")}</p>;
   if (!registered.length)
     return (
       <main className="p-6 text-sm text-muted-foreground">
@@ -103,6 +108,8 @@ export function ProjectsPage() {
       viewMode: "preview",
       previewViewer: "rendered",
     });
+  if (resourceWorkId) return <ProjectWorkItemDrawer embedded projectId={selectedProject.id} projectRoot={selectedProject.rootPath}
+    workItemId={resourceWorkId} onOpenChange={(open) => { if (!open) navigate(`/projects/${encodeURIComponent(selectedProject.id)}/work`); }} onOpenArtifact={openProjectFile} />;
   return (
     <>
       <main className="h-full min-w-0 flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
@@ -116,7 +123,7 @@ export function ProjectsPage() {
           <Tabs
             value={tab}
             onValueChange={(value) =>
-              navigate(
+              resourceId && isProjectHomeTab(value) ? setResourceTab(value) : navigate(
                 `/projects/${encodeURIComponent(selectedProject.id)}/${value}`,
                 { state },
               )
@@ -140,13 +147,13 @@ export function ProjectsPage() {
                     label,
                   )
                 }
-                onOpenWorkItem={setSelectedWorkItemId}
+                onOpenWorkItem={openWorkItem}
               />
             </TabsContent>
             <TabsContent value="work" className="mt-4">
               <ProjectWorkItems
                 projectId={selectedProject.id}
-                onOpenWorkItem={setSelectedWorkItemId}
+                onOpenWorkItem={openWorkItem}
               />
             </TabsContent>
             <TabsContent value="artifacts" className="mt-4">
@@ -166,10 +173,7 @@ export function ProjectsPage() {
                 isLoading={skills.isLoading}
                 isError={skills.isError}
                 onOpen={(skill) =>
-                  openProjectFile(
-                    joinProjectPath(selectedProject.rootPath, skill.path),
-                    skill.name,
-                  )
+                  app.pageResourceManager.open(pageResourceFromSystemObject("skill", skill.ref, skill.name), "default", navigate)
                 }
               />
             </TabsContent>
@@ -189,20 +193,11 @@ export function ProjectsPage() {
           </Tabs>
         </div>
       </main>
-      <ProjectWorkItemDrawer
-        projectId={selectedProject.id}
-        projectRoot={selectedProject.rootPath}
-        workItemId={selectedWorkItemId}
-        onOpenChange={(open) => {
-          if (!open) setSelectedWorkItemId(null);
-        }}
-        onOpenArtifact={openProjectFile}
-      />
-      <ChatConversationWorkspaceSection
+      {!resourceId && <ChatConversationWorkspaceSection
         layoutMode={isMobile ? "mobile" : "desktop"}
         sessionKey={null}
         projectRoot={selectedProject.rootPath}
-      />
+      />}
     </>
   );
 }

package/src/features/projects/pages/projects-page.test.tsx

@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ProjectsPage } from "./project-home-page";
 
 const mocks = vi.hoisted(() => ({
+  openResource: vi.fn(),
   agreementProps: vi.fn(),
   artifactsProps: vi.fn(),
   drawerProps: vi.fn(),
@@ -13,6 +14,8 @@ const mocks = vi.hoisted(() => ({
   useProjectSkills: vi.fn(),
   useProjects: vi.fn(),
 }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: mocks.openResource } }) }));
+vi.mock("@/features/right-panel-resources", () => ({ pageResourceFromSystemObject: (type: string, id: string) => ({ type, id }) }));
 
 vi.mock("@/shared/hooks/use-projects", () => ({
   useProjects: mocks.useProjects,
@@ -117,7 +120,7 @@ describe("ProjectsPage", () => {
     expect(mocks.useProjectSkills).toHaveBeenCalledWith(null);
     expect(screen.getAllByRole("tab")).toHaveLength(5);
     fireEvent.click(screen.getByRole("button", { name: "Overview work" }));
-    expect(screen.getByTestId("work-drawer").textContent).toBe("work-overview");
+    expect(mocks.openResource).toHaveBeenCalledWith({ type: "project-work", id: JSON.stringify(["project-1", "work-overview"]) }, "default", expect.any(Function));
   });
 
   it("loads artifacts from project work without material observation", () => {

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

@@ -12,12 +12,12 @@ describe('PwaShellThemeManager', () => {
     document.body.style.backgroundColor = '';
   });
 
-  it('applies default work shell colors when no theme is selected', () => {
+  it('applies plain paper shell colors when no theme is selected', () => {
     pwaShellThemeManager.syncCurrentTheme();
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
-    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
+    expect(meta?.getAttribute('content')).toBe('#FAF8F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 248, 244)');
   });
 
   it('applies natural shell colors explicitly', () => {

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

@@ -2,10 +2,13 @@ import {
   DEFAULT_UI_THEME,
   getThemeAppearance,
   normalizeTheme,
+  resolveTheme,
   type UiTheme,
 } from '@/shared/lib/theme';
 
-const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
+const PWA_SHELL_THEME_COLORS: Record<Exclude<UiTheme, 'default'>, string> = {
+  'paper-ink': '#FAF8F4',
+  'plain-paper': '#FAF8F4',
   natural: '#FAF9F7',
   work: '#FFFFFF',
   minimal: '#FFFFFF',
@@ -25,10 +28,12 @@ export class PwaShellThemeManager {
       return;
     }
 
-    const themeColor = PWA_SHELL_THEME_COLORS[theme];
+    const themeColor = PWA_SHELL_THEME_COLORS[resolveTheme(theme)];
     this.updateThemeMeta(themeColor);
     this.updateSurfaceBackgrounds(themeColor);
-    document.documentElement.style.colorScheme = getThemeAppearance(theme);
+    const appearance = getThemeAppearance(theme);
+    document.documentElement.style.colorScheme = appearance;
+    document.querySelector('meta[name="color-scheme"]')?.setAttribute('content', appearance);
   };
 
   syncCurrentTheme = () => {

package/src/features/right-panel-resources/components/__tests__/page-resource-icon.test.tsx

@@ -44,9 +44,9 @@ describe("resource icon precedence", () => {
     );
     expect(view.container.textContent).toBe("✎");
     view.rerender(<PageResourceIcon uri="https://example.com" />);
-    expect(view.container.querySelector(".lucide-globe")).not.toBeNull();
+    expect(view.container.childElementCount).toBe(0);
     view.rerender(<PageResourceIcon uri="nextclaw://unknown/item" />);
-    expect(view.container.querySelector(".lucide-link2")).not.toBeNull();
+    expect(view.container.childElementCount).toBe(0);
   });
   it("uses Panel object identity for its installed icon and falls back to the application icon", () => {
     const view = render(<PageResourceIcon uri="nextclaw://objects/panel-app/source%3Anotes" />);
@@ -64,4 +64,15 @@ describe("resource icon precedence", () => {
     );
     expect(view.container.querySelector(".lucide-github")).not.toBeNull();
   });
+  it.each([
+    "/workspace/frontmatter-test.md",
+    "./frontmatter-test.md",
+    "frontmatter-test.md:12:3",
+    "file:///workspace/frontmatter-test.md#L12",
+    "nextclaw://workspace-file?path=%2Fworkspace%2Ffrontmatter-test.md",
+  ])("shows Markdown identity for %s", (uri) => {
+    const view = render(<PageResourceIcon uri={uri} />);
+    expect(view.container.querySelector('[data-file-type-icon="markdown"]')).not.toBeNull();
+    expect(view.container.querySelector('.lucide-link2')).toBeNull();
+  });
 });