@nextclaw/ui 0.26.5 → 0.27.0

package/src/features/inbox/components/inbox-reader-dialog.tsx

@@ -4,7 +4,8 @@ import { useRef, useState } from "react";
 import { ChevronLeft, ChevronRight, Inbox } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
-import { CHAT_DRAFT_SESSION_PATH } from "@/features/chat";
+import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
+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 { useInboxStore } from "@/features/inbox/stores/inbox.store";
@@ -13,6 +14,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogHeader,
   DialogTitle,
 } from "@/shared/components/ui/dialog";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
@@ -28,7 +30,8 @@ function formatPosition(current: number, total: number): string {
 export function InboxReaderDialog() {
   const titleRef = useRef<HTMLHeadingElement>(null);
   const navigate = useNavigate();
-  const { chatDraftIntentManager, inboxManager } = useAppPresenter();
+  const { chatComposerIntentManager, docBrowserManager, inboxManager } = useAppPresenter();
+  const { isMobile } = useViewportLayout();
   const { data } = useInboxDeliveries();
   const { activeDeliveryId, readerOpen } = useInboxStore((state) => state.snapshot);
   const [pendingAction, setPendingAction] = useState<string | null>(null);
@@ -77,9 +80,10 @@ export function InboxReaderDialog() {
       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);
     });
   };
 
@@ -96,15 +100,18 @@ export function InboxReaderDialog() {
   const positionControls = unreadDeliveries.length > 1 ? (
     <div className="flex shrink-0 items-center gap-1 pr-1">
       <span className="mr-1 text-[11px] tabular-nums text-muted-foreground">
-        {formatPosition(activeIndex + 1, unreadDeliveries.length)}
+        <span className="hidden md:inline">{formatPosition(activeIndex + 1, unreadDeliveries.length)}</span>
+        <span className="md:hidden" aria-label={formatPosition(activeIndex + 1, unreadDeliveries.length)}>{activeIndex + 1}/{unreadDeliveries.length}</span>
       </span>
       <IconActionButton
+        size="sm"
         icon={<ChevronLeft className="h-4 w-4" />}
         label={t("inboxPrevious")}
         disabled={activeIndex <= 0 || pendingAction === "select"}
         onClick={() => selectAt(activeIndex - 1)}
       />
       <IconActionButton
+        size="sm"
         icon={<ChevronRight className="h-4 w-4" />}
         label={t("inboxNext")}
         disabled={activeIndex >= unreadDeliveries.length - 1 || pendingAction === "select"}
@@ -123,7 +130,7 @@ export function InboxReaderDialog() {
       }}
     >
       <DialogContent
-        className="flex h-[min(82vh,760px)] w-[calc(100vw-2rem)] max-w-[820px] flex-col gap-0 overflow-hidden rounded-[24px] border-border/70 bg-background p-0 shadow-[0_20px_55px_-22px_rgba(15,23,42,0.32)] max-sm:h-[100dvh] max-sm:max-h-none max-sm:w-screen max-sm:rounded-none max-sm:border-0"
+        className="flex h-[min(82vh,760px)] w-[calc(100vw-2rem)] max-w-[820px] flex-col gap-0 overflow-hidden rounded-[24px] border-border/70 bg-background p-0 shadow-[0_20px_55px_-22px_rgba(15,23,42,0.32)] max-md:h-[100dvh] max-md:max-h-[100dvh] max-md:w-screen max-md:max-w-none max-md:rounded-none max-md:border-0 max-md:pt-[env(safe-area-inset-top,0px)] max-md:pb-[env(safe-area-inset-bottom,0px)]"
         onOpenAutoFocus={(event) => {
           event.preventDefault();
           titleRef.current?.focus();
@@ -131,10 +138,15 @@ export function InboxReaderDialog() {
       >
         {activeDelivery ? (
           <>
-            <header className="shrink-0 border-b border-border/50 px-5 py-3 pr-14 sm:px-6">
-              <div className="flex min-h-7 items-center justify-between gap-3">
+            <DialogHeader
+              className="items-center gap-1 border-b border-border/50 px-3 py-2 md:gap-3 md:px-6 md:py-3"
+              actions={<>
+                {positionControls}
+                <PageResourceActionsMenu page={pageResourceFromSystemObject("inbox-delivery", activeDelivery.id, activeDelivery.title)} />
+              </>}
+            >
                 <div className="flex min-w-0 items-center gap-2">
-                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted/70 text-muted-foreground">
+                  <span className="hidden h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted/70 text-muted-foreground md:flex">
                     <Inbox className="h-3.5 w-3.5" />
                   </span>
                   <DialogTitle
@@ -145,29 +157,24 @@ export function InboxReaderDialog() {
                   >
                     {activeDelivery.title}
                   </DialogTitle>
-                  <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+                  <span className="hidden shrink-0 text-muted-foreground md:inline" aria-hidden="true">·</span>
                   <time
-                    className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+                    className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground md:block"
                     dateTime={activeDelivery.createdAt}
                   >
                     {formatDateTime(activeDelivery.createdAt)}
                   </time>
                 </div>
-                <div className="flex shrink-0 items-center gap-1">
-                  {positionControls}
-                  <PageResourceActionsMenu page={pageResourceFromSystemObject("inbox-delivery", activeDelivery.id, activeDelivery.title)} />
-                </div>
-              </div>
               <DialogDescription className="sr-only">
                 {activeDelivery.summary ?? t("inboxNoSummary")}
               </DialogDescription>
-            </header>
+            </DialogHeader>
 
             <div className={cn(
               "min-h-0 flex-1",
               isHtml
-                ? "p-3 sm:p-4"
-                : "custom-scrollbar overflow-y-auto px-6 py-5 sm:px-8 sm:py-6",
+                ? "p-0 md:p-4"
+                : "custom-scrollbar overflow-y-auto overscroll-contain px-4 py-3 md:px-8 md:py-6",
             )}>
               <InboxDeliveryContent
                 className={isHtml ? "h-full" : undefined}
@@ -178,24 +185,26 @@ export function InboxReaderDialog() {
               />
             </div>
 
-            <footer className="shrink-0 border-t border-border/50 bg-background px-5 py-3 sm:px-6">
+            <footer className="shrink-0 border-t border-border/50 bg-background px-3 py-2 md:px-6 md:py-3">
               {error ? (
                 <p role="alert" className="mb-3 text-sm text-destructive">{error}</p>
               ) : null}
-              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex flex-col-reverse gap-1 sm:flex-row sm:flex-wrap">
-                  <Button size="sm" variant="ghost" onClick={inboxManager.closeReader}>
+              <div className="flex items-center justify-between gap-2 [--control-touch-size:2rem]">
+                <div className="flex items-center gap-1">
+                  <Button size="sm" className="px-2 md:px-3" variant="ghost" onClick={inboxManager.closeReader}>
                     {t("inboxReadLater")}
                   </Button>
-                  <Button size="sm" variant="outline" disabled={pendingAction !== null} onClick={markRead}>
+                  <Button size="sm" className="px-2 md:px-3" variant="outline" disabled={pendingAction !== null} onClick={markRead}>
                     {t("inboxMarkRead")}
                   </Button>
-                  <Button size="sm" variant="ghost" disabled={pendingAction !== null} onClick={openInbox}>
-                    {t("inboxOpenInbox")}
+                  <Button size="sm" className="px-2 md:px-3" variant="ghost" aria-label={t("inboxOpenInbox")} disabled={pendingAction !== null} onClick={openInbox}>
+                    <span className="md:hidden">{t("inboxTitle")}</span>
+                    <span className="hidden md:inline">{t("inboxOpenInbox")}</span>
                   </Button>
                 </div>
-                <Button size="sm" disabled={pendingAction !== null} onClick={continueInChat}>
-                  {t("inboxContinueChat")}
+                <Button size="sm" className="px-2 md:px-3" aria-label={t("inboxContinueChat")} disabled={pendingAction !== null} onClick={continueInChat}>
+                  <span className="md:hidden">{t("inboxContinueChatCompact")}</span>
+                  <span className="hidden md:inline">{t("inboxContinueChat")}</span>
                 </Button>
               </div>
             </footer>

package/src/features/inbox/managers/inbox.manager.test.ts

@@ -1,10 +1,13 @@
 import { QueryClient } from "@tanstack/react-query";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { InboxDelivery } from "@nextclaw/shared";
+import { NextClawClientError } from "@nextclaw/client-sdk";
 import { InboxManager } from "@/features/inbox/managers/inbox.manager";
 import { useInboxStore } from "@/features/inbox/stores/inbox.store";
 
 const mocks = vi.hoisted(() => ({
+  getDelivery: vi.fn(),
+  getSession: vi.fn(),
   delete: vi.fn(),
   resolveReference: vi.fn(),
   list: vi.fn(),
@@ -16,6 +19,7 @@ vi.mock("@/shared/lib/api", () => ({
   nextclawClient: {
     eventBus: { on: mocks.on },
     inboxDeliveries: {
+      get: mocks.getDelivery,
       delete: mocks.delete,
       list: mocks.list,
       updateState: mocks.updateState,
@@ -23,6 +27,7 @@ vi.mock("@/shared/lib/api", () => ({
     systemObjectReferences: {
       resolve: mocks.resolveReference,
     },
+    sessions: { get: mocks.getSession },
   },
 }));
 
@@ -43,6 +48,8 @@ const delivery: InboxDelivery = {
 describe("InboxManager", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mocks.getDelivery.mockResolvedValue(delivery);
+    mocks.getSession.mockResolvedValue({ sessionId: "source-session" });
     Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
     useInboxStore.setState({
       snapshot: { readerOpen: false, activeDeliveryId: null },
@@ -107,5 +114,26 @@ describe("InboxManager", () => {
     );
     expect(mocks.updateState).toHaveBeenCalledWith(delivery.id, "read");
     expect(result.reference.assetUri).toBe("asset://store/report");
+    expect(result.targetSessionKey).toBeNull();
+  });
+
+  it("targets the original report session", async () => {
+    mocks.getDelivery.mockResolvedValue({ ...delivery, source: { ...delivery.source, sessionId: "source-session" } });
+    const result = await new InboxManager(new QueryClient()).prepareChatReference(delivery.id);
+    expect(mocks.getSession).toHaveBeenCalledWith("source-session");
+    expect(result.targetSessionKey).toBe("source-session");
+  });
+
+  it("falls back to a draft only when the source session was deleted", async () => {
+    mocks.getDelivery.mockResolvedValue({ ...delivery, source: { ...delivery.source, sessionId: "deleted" } });
+    mocks.getSession.mockRejectedValueOnce(new NextClawClientError({ message: "Missing", status: 404 }));
+    expect((await new InboxManager(new QueryClient()).prepareChatReference(delivery.id)).targetSessionKey).toBeNull();
+  });
+
+  it("keeps the report unread when the source session lookup fails", async () => {
+    mocks.getDelivery.mockResolvedValue({ ...delivery, source: { ...delivery.source, sessionId: "source-session" } });
+    mocks.getSession.mockRejectedValueOnce(new NextClawClientError({ message: "Offline", status: 503 }));
+    await expect(new InboxManager(new QueryClient()).prepareChatReference(delivery.id)).rejects.toThrow("Offline");
+    expect(mocks.updateState).not.toHaveBeenCalled();
   });
 });

package/src/features/inbox/managers/inbox.manager.ts

@@ -13,6 +13,7 @@ import {
 import { appQueryClient } from "@/app-query-client";
 import { useInboxStore } from "@/features/inbox/stores/inbox.store";
 import { nextclawClient } from "@/shared/lib/api";
+import { NextClawClientError } from "@nextclaw/client-sdk";
 
 export const INBOX_DELIVERIES_QUERY_KEY = ["inbox-deliveries"] as const;
 
@@ -112,13 +113,26 @@ export class InboxManager {
   prepareChatReference = async (deliveryId: string): Promise<{
     delivery: InboxDelivery;
     reference: SystemObjectResolvedReference;
+    targetSessionKey: string | null;
   }> => {
-    const reference = await nextclawClient.systemObjectReferences.resolve(
-      createSystemObjectReferenceUri(SYSTEM_OBJECT_TYPE_INBOX_DELIVERY, deliveryId),
-    );
+    const [reference, sourceDelivery] = await Promise.all([
+      nextclawClient.systemObjectReferences.resolve(
+        createSystemObjectReferenceUri(SYSTEM_OBJECT_TYPE_INBOX_DELIVERY, deliveryId),
+      ),
+      nextclawClient.inboxDeliveries.get(deliveryId),
+    ]);
+    let targetSessionKey = sourceDelivery.source.sessionId?.trim() || null;
+    if (targetSessionKey) {
+      try {
+        await nextclawClient.sessions.get(targetSessionKey);
+      } catch (error) {
+        if (!(error instanceof NextClawClientError) || error.status !== 404) throw error;
+        targetSessionKey = null;
+      }
+    }
     const delivery = await this.updateState(deliveryId, "read");
     this.closeReader();
-    return { delivery, reference };
+    return { delivery, reference, targetSessionKey };
   };
 
   private updateState = async (

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

@@ -14,7 +14,8 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock("@/app/components/app-presenter-provider", () => ({
   useAppPresenter: () => ({
-    chatDraftIntentManager: {
+    docBrowserManager: { close: vi.fn() },
+    chatComposerIntentManager: {
       requestSystemObjectReference: mocks.requestSystemObjectReference,
     },
     inboxManager: {
@@ -104,6 +105,7 @@ describe("InboxPage", () => {
     vi.clearAllMocks();
     mocks.isMobile = false;
     mocks.prepareChatReference.mockResolvedValue({
+      targetSessionKey: null,
       reference: {
         uri: "nextclaw://objects/inbox-delivery/delivery-1",
         label: "A considered report",
@@ -150,7 +152,7 @@ describe("InboxPage", () => {
     });
     expect(mocks.prepareChatReference).toHaveBeenCalledWith("delivery-1");
     expect(mocks.requestSystemObjectReference).toHaveBeenCalledWith(
-      expect.objectContaining({ uri: "nextclaw://objects/inbox-delivery/delivery-1" }),
+      { targetSessionKey: null, reference: expect.objectContaining({ uri: "nextclaw://objects/inbox-delivery/delivery-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";
@@ -275,7 +275,7 @@ export function InboxPage() {
   const navigate = useNavigate();
   const { deliveryId } = useParams<{ deliveryId?: string }>();
   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 +316,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);
     });
   };
 

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

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

@@ -22,7 +22,6 @@ import {
   Github,
   Globe,
   LayoutDashboard,
-  Link2,
   MessageSquare,
   PanelsTopLeft,
   Plus,
@@ -44,7 +43,7 @@ const RESOURCE_ICONS = {
   app: AppWindow,
   docs: BookOpen,
   website: Globe,
-  generic: Link2,
+  generic: null,
   page: PanelsTopLeft,
   overview: LayoutDashboard,
   "child-sessions": GitBranch,
@@ -94,7 +93,8 @@ function resourceTypeIcon(
   if (
     uri.startsWith("nextclaw://workspace-file") ||
     uri.startsWith("file:") ||
-    uri.startsWith("nextclaw://file/")
+    uri.startsWith("nextclaw://file/") ||
+    (!/^[a-z][a-z0-9+.-]*:/i.test(uri.replace(/:\d+(?::\d+)?$/, "")) && /\.[a-z0-9]{1,16}(?::\d+(?::\d+)?)?(?:[?#]|$)/i.test(uri))
   )
     return "file";
   if (
@@ -104,7 +104,7 @@ function resourceTypeIcon(
   )
     return "app";
   if (uri.startsWith("nextclaw://docs")) return "docs";
-  return /^https?:/.test(uri) ? "website" : "generic";
+  return "generic";
 }
 
 function appIcon(value?: string): DocBrowserDockIcon | undefined {
@@ -222,20 +222,28 @@ function ResourceIcon({
         {specific.value}
       </span>
     );
-  let pathname = uri;
+  let pathname = uri.replace(/:\d+(?::\d+)?$/, "");
   try {
-    pathname = new URL(uri).searchParams.get("path") ?? new URL(uri).pathname;
+    const url = new URL(pathname);
+    pathname = url.searchParams.get("path") ?? url.pathname;
   } catch {
     /* Local file link. */
   }
+  pathname = pathname.split(/[?#]/, 1)[0].replace(/:\d+(?::\d+)?$/, "");
+  try {
+    pathname = decodeURIComponent(pathname);
+  } catch {
+    /* Keep malformed percent escapes as literal file name characters. */
+  }
   if (
     resourceTypeIcon(uri, appId) === "file" &&
-    /\.[a-z0-9]{1,8}(?:[?#]|$)/i.test(pathname)
+    /\.[a-z0-9]{1,16}$/i.test(pathname)
   )
     return <FileTypeIcon fileName={pathname} size="compact" />;
   const Icon =
     (specific?.type === "builtin" && BUILTIN_ICONS[specific.name]) ||
     RESOURCE_ICONS[resourceTypeIcon(uri, appId)];
+  if (!Icon) return null;
   return (
     <Icon
       aria-hidden="true"

package/src/features/right-panel-resources/configs/right-panel-resource-routes.config.ts

@@ -198,7 +198,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
         historyPolicy: 'managed',
         kind: RIGHT_PANEL_APPS_TAB_KIND,
         resourceUri: url,
-        title: url === RIGHT_PANEL_APPS_URL ? t('appsTitle') : t('serviceAppsTitle'),
+        title: t('appsTitle'),
         url,
       };
     },

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

@@ -1,4 +1,7 @@
 export {
+  createRightPanelAppsUrl,
+  getRightPanelAppsTabFromUrl,
+  type RightPanelAppsTab,
   createChatUiResourceReferenceFromTab,
   createPanelAppContentPath,
   createPanelAppResourceUri,

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

@@ -2,6 +2,11 @@ import { describe, expect, it } from 'vitest';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 
 describe('RightPanelResourceRouteResolver', () => {
+  it('preserves the app marketplace through resource normalization', () => {
+    expect(new RightPanelResourceRouteResolver().resolve('nextclaw://apps?tab=marketplace')).toMatchObject({
+      kind: 'apps', dedupeKey: 'apps', url: 'nextclaw://apps?tab=marketplace', resourceUri: 'nextclaw://apps?tab=marketplace',
+    });
+  });
   it.each(['cron-job', 'inbox-delivery', 'skill', 'agent', 'project'])('resolves %s as an object, not an unsupported website', (type) => {
     const uri = 'nextclaw://objects/' + type + '/' + encodeURIComponent('workspace:项目/对象');
     expect(new RightPanelResourceRouteResolver().resolve(uri)).toMatchObject({ kind: 'system-object', url: uri, resourceUri: uri });

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

@@ -42,15 +42,16 @@ export function createChatUiResourceReferenceFromTab(
   });
 }
 
-export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps';
+export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps' | 'marketplace';
 
 const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'apps';
 
 function isRightPanelAppsTab(value: unknown): value is RightPanelAppsTab {
-  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
+  return value === 'apps' || value === 'panel-apps' || value === 'service-apps' || value === 'marketplace';
 }
 
 export function createRightPanelAppsUrl(tab: RightPanelAppsTab = DEFAULT_RIGHT_PANEL_APPS_TAB): string {
+  if (tab === 'marketplace') return `${RIGHT_PANEL_APPS_URL}?tab=marketplace`;
   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;

package/src/features/service-apps/components/service-action-row.tsx

@@ -1,3 +1,4 @@
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { useState } from "react";
 import type {
   AgentProfileView,
@@ -73,7 +74,7 @@ export function ServiceActionRow({
                 <ShieldPlus className="h-3.5 w-3.5" />
               </button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-56 rounded-xl p-1.5">
+            <PopoverContent align="end" variant="menu">
               <div className="px-2 py-1.5 text-[11px] font-medium text-muted-foreground">
                 {t("serviceAppsGrantToAgent")}
               </div>
@@ -85,9 +86,9 @@ export function ServiceActionRow({
                     onGrantAgent(action.id, agent.id);
                     setAgentMenuOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  className={`${ACTION_MENU_ITEM_CLASS} text-foreground ${ACTION_FEEDBACK.item}`}
                 >
-                  <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                  <Bot className="h-4 w-4 shrink-0 text-muted-foreground" />
                   <span className="min-w-0 truncate">
                     {agent.displayName?.trim() || agent.id}
                   </span>