@nextclaw/ui 0.15.20 → 0.15.22

package/src/app/components/layout/sidebar.tsx

@@ -16,6 +16,7 @@ import {
   type SidebarNavListItem,
 } from "@/app/components/layout/sidebar-items";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { useRemoteStatus } from "@/features/remote";
 import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
@@ -29,7 +30,6 @@ import {
   SIDEBAR_RAIL_STACK_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
   SIDEBAR_RAIL_WIDTH_CLASS,
-  SIDEBAR_SCROLL_EDGE_FADE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 type SidebarNavSection = {
@@ -141,7 +141,7 @@ function SidebarNavigation({
       className={cn(
         "custom-scrollbar min-h-0 flex-1 overflow-y-auto",
         isCollapsed ? "pr-0" : "pr-1",
-        SIDEBAR_SCROLL_EDGE_FADE_CLASS,
+        SCROLL_BOTTOM_EDGE_FADE_CLASS,
       )}
     >
       {!isCollapsed ? (

package/src/app/configs/app-navigation.config.ts

@@ -5,6 +5,7 @@ import {
   AlarmClock,
   Cpu,
   Download,
+  Inbox,
   KeyRound,
   MessageCircle,
   MessageSquare,
@@ -44,6 +45,8 @@ export function isMainWorkspaceRoute(pathname: string): boolean {
   return (
     normalized === "/chat" ||
     normalized.startsWith("/chat/") ||
+    normalized === "/inbox" ||
+    normalized.startsWith("/inbox/") ||
     normalized === "/skills" ||
     normalized.startsWith("/skills/") ||
     normalized === "/cron" ||
@@ -67,6 +70,11 @@ export function getMobileBottomNavItems(
       label: translate("chat"),
       icon: MessageCircle,
     },
+    {
+      target: "/inbox",
+      label: translate("inboxTitle"),
+      icon: Inbox,
+    },
     {
       target: "/skills",
       label: translate("marketplaceFilterSkills"),
@@ -94,6 +102,11 @@ export function getMainSidebarNavItems(
       label: translate("chat"),
       icon: MessageCircle,
     },
+    {
+      target: "/inbox",
+      label: translate("inboxTitle"),
+      icon: Inbox,
+    },
     {
       target: "/chat/cron",
       label: translate("cron"),
@@ -227,6 +240,14 @@ export function resolveMobileRouteMeta(
     };
   }
 
+  if (normalized === "/inbox" || normalized.startsWith("/inbox/")) {
+    return {
+      title: translate("inboxTitle"),
+      backTarget: normalized === "/inbox" ? null : "/inbox",
+      backLabel: translate("inboxTitle"),
+    };
+  }
+
   if (normalized === "/skills" || normalized.startsWith("/skills/")) {
     return {
       title: translate("marketplaceFilterSkills"),

package/src/app/index.tsx

@@ -1,14 +1,17 @@
 import { lazy, Suspense, useEffect } from "react";
-import type { ReactElement } from "react";
+import type { CSSProperties, ReactElement } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { Toaster } from "sonner";
 import { appQueryClient } from "@/app-query-client";
 import { AppPresenterProvider } from "@/app/components/app-presenter-provider";
+import { AppNotificationRuntime } from "@/app/components/app-notification-runtime";
 import { AppLayout } from "@/app/components/layout/app-layout";
+import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
 import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
 import { LoginPage } from "@/components/auth/login-page";
 import { AccountPanel } from "@/features/account";
+import { InboxRuntime } from "@/features/inbox";
 import { ServiceActionAuthorizationDialog } from "@/features/service-apps";
 import { runtimeUpdateManager, useSystemStatusSources } from "@/features/system-status";
 import {
@@ -21,6 +24,8 @@ import {
 } from "@/pwa/components/pwa-install-entry";
 import { startNextClawPwa } from "@/pwa/register-pwa";
 
+const NOTIFICATION_TOASTER_STYLE = { "--width": "320px" } as CSSProperties;
+
 const ModelConfigPage = lazy(async () => ({
   default: (await import("@/features/settings/pages/model-config-page"))
     .ModelConfigPage,
@@ -117,6 +122,10 @@ const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
     path: "/cron",
     element: createLazyElement(<ChatPage view="cron" />),
   },
+  {
+    path: "/inbox/:deliveryId?",
+    element: createLazyElement(<ChatPage view="inbox" />),
+  },
   {
     path: "/appearance",
     element: createLazyElement(<AppearanceSettingsPage />),
@@ -219,6 +228,8 @@ function ProtectedApp() {
 
   return (
     <AppPresenterProvider>
+      <AppNotificationRuntime />
+      <InboxRuntime />
       <AppLayout>
         <ProtectedRoutes />
       </AppLayout>
@@ -257,7 +268,16 @@ export default function AppContent() {
     <QueryClientProvider client={appQueryClient}>
       <AuthGate />
       <PwaInstallBanner />
-      <Toaster position="top-right" richColors offset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined} mobileOffset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined} />
+      <Toaster
+        position="top-right"
+        richColors
+        offset={{
+          top: window.nextclawDesktop?.platform === "win32" ? 56 : 44,
+          right: SIDEBAR_RAIL_WIDTH_PX + 16,
+        }}
+        mobileOffset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined}
+        style={NOTIFICATION_TOASTER_STYLE}
+      />
     </QueryClientProvider>
   );
 }

package/src/app/presenters/app.presenter.ts

@@ -1,10 +1,13 @@
 import { AccountManager } from '@/features/account';
 import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import {
+  ChatCompletionNotificationManager,
   ChatDraftIntentManager,
   useChatThreadStore,
 } from '@/features/chat';
+import { AppNotificationManager } from '@/features/notifications';
 import { PanelAppBridgeManager } from '@/features/panel-apps';
+import { InboxManager } from '@/features/inbox';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { RemoteAccessManager } from '@/features/remote';
 import { ServiceActionAuthorizationManager } from '@/features/service-apps';
@@ -19,6 +22,11 @@ function isChatWorkspacePanelOpen(snapshot: ChatThreadSnapshot): boolean {
 }
 
 export class AppPresenter {
+  notificationManager = new AppNotificationManager();
+  inboxManager = new InboxManager();
+  chatCompletionNotificationManager = new ChatCompletionNotificationManager(
+    this.notificationManager,
+  );
   accountManager = new AccountManager();
   rightPanelResourceRouteResolver = new RightPanelResourceRouteResolver();
   notifyRightPanelOpened = () => {

package/src/app/styles/design-system.css

@@ -5,6 +5,12 @@
  */
 
 @layer base {
+   input:focus,
+   textarea:focus {
+      outline: none;
+      box-shadow: none;
+   }
+
    :root {
       color-scheme: light;
 
@@ -70,6 +76,9 @@
       /* Accent */
       --accent: var(--brand-50);
       --accent-foreground: var(--brand-700);
+      --interaction-hover: hsl(0 0% 96%);
+      --interaction-selection: hsl(211 100% 92%);
+      --interaction-selection-border: hsl(211 75% 84%);
 
       /* Muted */
       --muted: var(--gray-100);
@@ -717,6 +726,9 @@
       --secondary-foreground: var(--gray-800);
       --accent: 151 32% 18%;
       --accent-foreground: 148 34% 84%;
+      --interaction-hover: hsl(var(--gray-200));
+      --interaction-selection: hsl(211 48% 30%);
+      --interaction-selection-border: hsl(211 48% 42%);
       --muted: var(--gray-100);
       --muted-foreground: var(--gray-500);
       --destructive: 0 70% 52%;

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -10,7 +10,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={!isProjectFirstView}
         onClick={() => onSelectMode('time-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
+        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
       >
         {t('chatSidebarViewTime')}
       </button>
@@ -19,7 +19,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={isProjectFirstView}
         onClick={() => onSelectMode('project-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
+        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
       >
         {t('chatSidebarViewProject')}
       </button>

package/src/features/chat/components/conversation/__tests__/chat-conversation-content.test.tsx

@@ -60,6 +60,7 @@ function renderContent(
     isContextCompacting?: boolean;
     isLoadingPreviousMessages?: boolean;
     onLoadPreviousMessages?: () => Promise<void>;
+    showWelcome?: boolean;
   } = {},
 ) {
   return render(
@@ -74,8 +75,9 @@ function renderContent(
       isSending={false}
       messages={messages}
       sessionKey="session-1"
-      showWelcome={false}
+      showWelcome={options.showWelcome ?? false}
       onLoadPreviousMessages={options.onLoadPreviousMessages ?? vi.fn()}
+      welcomeSlot={<div data-testid="conversation-welcome" />}
     />,
   );
 }
@@ -94,6 +96,22 @@ it("renders manual context compaction feedback after the message list", () => {
   expect(screen.getByTestId("context-compaction-pending")).toBeTruthy();
 });
 
+it("fades the conversation into the docked input without obscuring the final message", () => {
+  const { container } = renderContent();
+  const scrollContainer = container.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  expect(scrollContainer?.className).toContain("[mask-image:linear-gradient");
+  expect(scrollContainer?.className).toContain("[-webkit-mask-image:linear-gradient");
+  expect(scrollContainer?.firstElementChild?.className).toContain("pb-7");
+
+  const { container: welcomeContainer } = renderContent({ showWelcome: true });
+  const welcomeScrollContainer = welcomeContainer.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  expect(welcomeScrollContainer?.className).not.toContain("[mask-image:linear-gradient");
+});
+
 it("uses the centered reading track in flat message layout", () => {
   useChatMessageLayoutStore.getState().setLayout("flat");
 

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -279,7 +279,7 @@ describe("ChatConversationHeaderSection", () => {
     renderHeaderSection("mobile");
     await user.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex");
+    expect(mocks.createSession).toHaveBeenCalledWith({ sessionType: "codex" });
   });
 
   it("keeps the new-session shortcut mobile-only", () => {

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/features/chat/features/message/components/chat-message-list.container";
 import { ChatConversationTrack } from "@/features/chat/components/conversation/chat-conversation-track";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { t } from "@/shared/lib/i18n";
 
 type ChatConversationContentProps = {
@@ -81,13 +82,13 @@ export function ChatConversationContent({
         ref={threadRef}
         onScroll={handleScroll}
         data-chat-scroll-container="true"
-        className="h-full overflow-y-auto custom-scrollbar"
+        className={showWelcome ? "h-full overflow-y-auto custom-scrollbar" : `h-full overflow-y-auto custom-scrollbar ${SCROLL_BOTTOM_EDGE_FADE_CLASS}`}
         style={{ overflowAnchor: "none" }}
       >
         {showWelcome ? (
           (welcomeSlot ?? null)
         ) : (
-          <div ref={contentRef}>
+          <div ref={contentRef} className="pb-7">
             {hasMessages ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
                 {historyError ? (
@@ -109,9 +110,7 @@ export function ChatConversationContent({
                 ) : null}
                 <ChatMessageListContainer
                   messages={messages}
-                  isSending={
-                    hasMessages && isSending && isAwaitingAssistantOutput
-                  }
+                  isSending={isSending && isAwaitingAssistantOutput}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
                 />
@@ -132,7 +131,7 @@ export function ChatConversationContent({
           label={t("chatScrollToBottom")}
           onClick={scrollToBottom}
           tooltipSide="top"
-          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-accent hover:text-accent-foreground"
+          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         />
       ) : null}
     </div>

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -76,7 +76,7 @@ export function ChatConversationHeader({
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
           />
         ) : null}
         {leading}

package/src/features/chat/components/layout/__tests__/chat-sidebar-read-state.test.tsx

@@ -189,7 +189,7 @@ describe("ChatSidebar read state sync", () => {
     const { container } = renderReadStateSidebar(createTestQueryClient());
 
     expect(
-      screen.getByText("Sessions").parentElement?.nextElementSibling?.className,
+      container.querySelector(".custom-scrollbar")?.className,
     ).toContain("[mask-image:linear-gradient");
     expect(
       screen.getByRole("button", { name: "Settings menu" }).parentElement

package/src/features/chat/components/layout/__tests__/chat-sidebar-session-area.test.tsx

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSidebarSessionArea } from "@/features/chat/components/layout/chat-sidebar-desktop-layout";
+
+function renderSessionArea(isProjectFirstView: boolean) {
+  const onAddProject = vi.fn();
+  const onSelectMode = vi.fn();
+
+  render(
+    <ChatSidebarSessionArea
+      defaultSessionType="native"
+      groups={[]}
+      isCollapsed={false}
+      isLoading={false}
+      isProjectFirstView={isProjectFirstView}
+      onAddProject={onAddProject}
+      onSelectMode={onSelectMode}
+      projectGroups={[]}
+      renderSessionItem={() => <></>}
+      sessionTypeOptions={[]}
+    />,
+  );
+
+  return { onAddProject, onSelectMode };
+}
+
+describe("ChatSidebarSessionArea", () => {
+  it("reserves the action-row height while switching list modes", () => {
+    const { onSelectMode } = renderSessionArea(false);
+
+    expect(
+      screen.getByRole("button", { name: "Time" }).parentElement?.parentElement?.className,
+    ).toContain("h-7");
+    fireEvent.click(screen.getByRole("button", { name: "Project" }));
+
+    expect(onSelectMode).toHaveBeenCalledWith("project-first");
+  });
+
+  it("uses a folder-plus icon for the add-project action", () => {
+    const { onAddProject } = renderSessionArea(true);
+    const addProjectButton = screen.getByRole("button", { name: "Add Project" });
+
+    expect(
+      addProjectButton
+        .querySelector("svg")
+        ?.classList.contains("lucide-folder-plus"),
+    ).toBe(true);
+    fireEvent.click(addProjectButton);
+
+    expect(onAddProject).toHaveBeenCalledOnce();
+  });
+});

package/src/features/chat/components/layout/__tests__/chat-sidebar.test.tsx

@@ -81,6 +81,9 @@ function expectCodexSelectedInSessionTypeMenu() {
     screen.getByRole("button", { name: /Codex/i }).getAttribute("aria-pressed"),
   ).toBe("true");
 }
+function expectSessionCreated(sessionType: string, projectRoot?: string) {
+  expect(mocks.createSession).toHaveBeenCalledWith({ projectRoot, sessionType });
+}
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
@@ -249,7 +252,7 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+    expectSessionCreated("codex");
   });
 
   it("hydrates the desktop new-session type from stored preferences", async () => {
@@ -265,7 +268,7 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+    expectSessionCreated("codex");
   });
 
   it("does not animate the desktop create task button width during runtime option hydration", () => {
@@ -311,7 +314,7 @@ describe("ChatSidebar create and list basics", () => {
   it("renders the lightweight list mode switch in the session header row and toggles to project view", () => {
     renderSidebar();
 
-    expect(screen.getByText("Sessions")).not.toBeNull();
+    expect(screen.queryByText("Sessions")).toBeNull();
     fireEvent.click(screen.getByRole("button", { name: "Project" }));
 
     expect(mocks.setListMode).toHaveBeenCalledWith("project-first");
@@ -332,7 +335,7 @@ describe("ChatSidebar create and list basics", () => {
     fireEvent.click(screen.getByText("Codex"));
 
     expect(mocks.setQuery).toHaveBeenCalledWith("release notes");
-    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+    expectSessionCreated("codex");
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
@@ -377,7 +380,7 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("native", undefined);
+    expectSessionCreated("native");
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
@@ -582,10 +585,7 @@ describe("ChatSidebar project-first mode", () => {
     );
     fireEvent.click(screen.getByText("Codex"));
 
-    expect(mocks.createSession).toHaveBeenCalledWith(
-      "codex",
-      "/tmp/project-beta",
-    );
+    expectSessionCreated("codex", "/tmp/project-beta");
     expect(mocks.goToSession).not.toHaveBeenCalled();
   });
 
@@ -617,10 +617,7 @@ describe("ChatSidebar project-first mode", () => {
       screen.getByRole("button", { name: "New Task · project-gamma" }),
     );
 
-    expect(mocks.createSession).toHaveBeenCalledWith(
-      "native",
-      "/tmp/project-gamma",
-    );
+    expectSessionCreated("native", "/tmp/project-gamma");
     expect(mocks.goToSession).not.toHaveBeenCalled();
   });
 
@@ -652,10 +649,7 @@ describe("ChatSidebar project-first mode", () => {
     );
     fireEvent.click(screen.getByText("Codex"));
 
-    expect(mocks.createSession).toHaveBeenCalledWith(
-      "codex",
-      "/tmp/project-mobile",
-    );
+    expectSessionCreated("codex", "/tmp/project-mobile");
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 });

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -6,34 +6,26 @@ import { CronConfig } from "@/features/cron";
 import { MarketplacePage } from "@/features/marketplace";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { ChatMobileShell } from "@/platforms/mobile";
-export type MainPanelView = "chat" | "cron" | "skills" | "agents";
+import { InboxPage } from "@/features/inbox";
+export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox";
 export type ChatPageProps = {
   view: MainPanelView;
 };
 type UseChatSessionSyncParams = {
-  view: MainPanelView;
   routeSessionKey: string | null;
-  syncRouteSessionSelection: (params: {
-    isChatView: boolean;
-    routeSessionKey: string | null;
-  }) => void;
+  syncRouteSessionSelection: (routeSessionKey: string | null) => void;
 };
 export function useChatSessionSync(params: UseChatSessionSyncParams): void {
   const {
-    view,
     routeSessionKey,
     syncRouteSessionSelection,
   } = params;
 
   useLayoutEffect(() => {
-    syncRouteSessionSelection({
-      isChatView: view === "chat",
-      routeSessionKey,
-    });
+    syncRouteSessionSelection(routeSessionKey);
   }, [
     routeSessionKey,
     syncRouteSessionSelection,
-    view,
   ]);
 }
 type ChatPageLayoutProps = {
@@ -51,7 +43,11 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
         isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-background">
-          {view === "cron" ? (
+          {view === "inbox" ? (
+            <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1180px,100%)] flex-col py-4 sm:px-6 sm:py-5">
+              <InboxPage />
+            </div>
+          ) : view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
                 <CronConfig />