@nextclaw/ui 0.25.3 → 0.26.0

package/src/features/chat/components/providers/chat-runtime.provider.tsx

@@ -0,0 +1,62 @@
+import { useWorkbenchSurfaceStore } from '@/shared/components/workbench/stores/workbench-surface.store';
+import { GLOBAL_WORKBENCH_SURFACE, SESSION_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { useEffect, useMemo, type ReactNode } from 'react';
+import { useLocation, useMatch, useNavigate } from 'react-router-dom';
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
+import { ChatPresenter } from '@/features/chat/presenters/chat.presenter';
+import { ChatPresenterProvider, usePresenter } from './chat-presenter.provider';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import { useChatQueryStoreSync } from '@/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync';
+import { parseSessionKeyFromRoute } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import { useFloatingSessionStore } from '@/features/chat/stores/floating-session.store';
+import { FloatingSessionConversation } from '@/features/chat/features/conversation/components/floating-session-conversation';
+import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+import { CHAT_SESSION_PANEL_KIND, parseSessionKeyFromPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+
+function ChatRuntime({ children }: { children: ReactNode }) {
+  const presenter = usePresenter();
+  const appPresenter = useAppPresenter();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const match = useMatch('/chat/:sessionId');
+  const sessionKey = parseSessionKeyFromRoute(match?.params.sessionId);
+  const workspaceMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[`session-workspace:${sessionKey ?? 'draft'}`]?.minimized ?? false);
+  const workspaceSessionKey = useChatThreadStore(({ snapshot }) =>
+    snapshot.workspacePanelParentKey === sessionKey && sessionKey && !snapshot.workspacePanelHidden && !workspaceMinimized &&
+    snapshot.activeWorkspacePanelKind === 'child-session'
+      ? snapshot.activeChildSessionKey : null,
+  );
+  const floatingMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[SESSION_WORKBENCH_SURFACE]?.minimized ?? false);
+  const panelMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[GLOBAL_WORKBENCH_SURFACE]?.minimized ?? false);
+  const floatingSessionKey = useFloatingSessionStore((state) => floatingMinimized ? null : state.session?.sessionKey);
+  const panelSessionKey = useDocBrowserStore(({ snapshot }) => {
+    const tab = snapshot.tabs.find((item) => item.id === snapshot.activeTabId);
+    return snapshot.isOpen && !panelMinimized && tab?.kind === CHAT_SESSION_PANEL_KIND
+      ? parseSessionKeyFromPanelUrl(tab.currentUrl) : null;
+  });
+  useChatQueryStoreSync({ sessionKey });
+  useEffect(() => {
+    presenter.chatUiManager.syncState({ pathname: location.pathname });
+    presenter.chatUiManager.bindActions({ navigate, confirm });
+  }, [confirm, location.pathname, navigate, presenter]);
+  useEffect(() => {
+    appPresenter.chatCompletionNotificationManager.syncVisibleSessions([
+      sessionKey, workspaceSessionKey, floatingSessionKey, panelSessionKey,
+    ]);
+    return () => appPresenter.chatCompletionNotificationManager.syncVisibleSessions([]);
+  }, [appPresenter, sessionKey, workspaceSessionKey, floatingSessionKey, panelSessionKey]);
+
+  return <>{children}<FloatingSessionConversation /><ConfirmDialog /></>;
+}
+
+export function ChatRuntimeProvider({ children }: { children: ReactNode }) {
+  const appPresenter = useAppPresenter();
+  const presenter = useMemo(() => new ChatPresenter(appPresenter), [appPresenter]);
+  return (
+    <ChatPresenterProvider presenter={presenter}>
+      <ChatRuntime>{children}</ChatRuntime>
+    </ChatPresenterProvider>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { AppPresenterProvider } from '@/app/components/app-presenter-provider';
+import type { ReactElement } from 'react';
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  usePanelApps: () => ({ data: { entries: [] } }),
+  useUpdatePanelAppPreferences: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+function render(ui: ReactElement) {
+  return renderUi(<AppPresenterProvider>{ui}</AppPresenterProvider>);
+}
+import { sessionSurfaceManager } from '@/features/chat/managers/session-surface.manager';
+import { act, render as renderUi, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FloatingSessionConversation } from '@/features/chat/features/conversation/components/floating-session-conversation';
+import { buildSessionPath } from '@/features/chat/features/session/utils/chat-session-route.utils';
+
+vi.mock('@/features/chat/features/conversation/components/session-conversation-area', () => ({
+  SessionConversationArea: ({ sessionKey }: { sessionKey: string }) =>
+    <textarea aria-label={sessionKey} />,
+}));
+
+function MainConversation() {
+  return <><textarea aria-label="main" /><span data-testid="path">{useLocation().pathname}</span></>;
+}
+
+describe('Floating conversation shell', () => {
+  beforeEach(() => sessionSurfaceManager.close());
+
+  it('preserves the main editor and floating editor identity through minimize and restore', async () => {
+    const user = userEvent.setup();
+    render(<MemoryRouter initialEntries={['/chat/current']}>
+      <MainConversation /><FloatingSessionConversation />
+    </MemoryRouter>);
+    const main = screen.getByRole('textbox', { name: 'main' });
+    await user.type(main, 'main draft');
+    act(() => sessionSurfaceManager.open({ sessionKey: 'other', title: 'Other task' }));
+    expect(document.activeElement).toBe(screen.getByTestId('floating-session-conversation'));
+    const floating = screen.getByRole('textbox', { name: 'other' });
+    await user.type(floating, 'follow-up');
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('textbox', { name: 'other' })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Expand view' }));
+    expect(screen.getByRole('textbox', { name: 'other' })).toBe(floating);
+    expect((floating as HTMLTextAreaElement).value).toBe('follow-up');
+    expect(screen.getByRole('textbox', { name: 'main' })).toBe(main);
+    expect((main as HTMLTextAreaElement).value).toBe('main draft');
+    expect(screen.getByTestId('path').textContent).toBe('/chat/current');
+    await user.click(screen.getByRole('button', { name: 'Close view' }));
+    expect(floating.isConnected).toBe(false);
+    expect(main.isConnected).toBe(true);
+  });
+
+  it('switches only the floating target and navigates only on explicit main-view action', async () => {
+    const user = userEvent.setup();
+    render(<MemoryRouter initialEntries={['/settings']}>
+      <MainConversation /><FloatingSessionConversation />
+    </MemoryRouter>);
+    act(() => sessionSurfaceManager.open({ sessionKey: 'one', title: 'One' }));
+    const previous = screen.getByRole('textbox', { name: 'one' });
+    act(() => sessionSurfaceManager.open({ sessionKey: 'two', title: 'Two' }));
+    expect(previous.isConnected).toBe(false);
+    expect(screen.getByRole('textbox', { name: 'two' })).toBeTruthy();
+    expect(screen.getByTestId('path').textContent).toBe('/settings');
+    await user.click(screen.getByRole('button', { name: 'Open in main area' }));
+    expect(screen.getByTestId('path').textContent).toBe(buildSessionPath('two'));
+    expect(screen.queryByTestId('floating-session-conversation')).toBeNull();
+  });
+});

package/src/features/chat/features/conversation/components/floating-session-conversation.tsx

@@ -0,0 +1,27 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromTarget } from '@/features/right-panel-resources';
+import { buildSessionPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { MessageSquare } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { getAppPresenter } from '@/app/presenters/app.presenter';
+import { sessionSurfaceManager } from '@/features/chat/managers/session-surface.manager';
+import { useFloatingSessionStore } from '@/features/chat/stores/floating-session.store';
+import { buildSessionPath } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { WorkbenchSurface } from '@/shared/components/workbench/workbench-surface';
+import { SESSION_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { SessionConversationArea } from './session-conversation-area';
+
+export function FloatingSessionConversation() {
+  const session = useFloatingSessionStore((state) => state.session);
+  const navigate = useNavigate();
+  const presenter = getAppPresenter();
+  if (!session) return null;
+  return <WorkbenchSurface id={SESSION_WORKBENCH_SURFACE} manager={presenter.workbenchSurfaceManager}
+    title={session.title} icon={<MessageSquare className="h-4 w-4 shrink-0" />} testId="floating-session-conversation" focusOnOpen
+    navigation={<div className="flex min-w-0 flex-1 items-center gap-2"><span className="min-w-0 flex-1 truncate text-xs">{session.title}</span><PageResourceActionsMenu page={pageResourceFromTarget({ kind: 'chat-session', title: session.title, url: buildSessionPanelUrl(session.sessionKey), resourceUri: buildSessionPanelUrl(session.sessionKey), historyPolicy: 'none' })} /></div>}
+    onClose={sessionSurfaceManager.close}
+    onPlace={() => sessionSurfaceManager.dock(session, presenter.docBrowserManager)}
+    onOpenMain={() => { navigate(buildSessionPath(session.sessionKey)); sessionSurfaceManager.close(); }}>
+    <SessionConversationArea key={session.sessionKey} sessionKey={session.sessionKey} />
+  </WorkbenchSurface>;
+}

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -415,6 +415,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     <>
       <SessionConversationAlerts inputQuery={inputQuery} />
       <ChatConversationContent
+        resourceWorkingDir={selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null}
         hasPreviousMessages={agent.hasPreviousMessages}
         historyError={agent.historyError}
         isHistoryLoading={agent.isHydrating}

package/src/features/chat/features/conversation/components/session-conversation-panel-tab.tsx

@@ -0,0 +1,25 @@
+import { MessageSquare } from 'lucide-react';
+import { CHAT_SESSION_PANEL_KIND, parseSessionKeyFromPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { SessionConversationArea } from './session-conversation-area';
+import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-browser/doc-browser-renderer.types';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/types/doc-browser.types';
+import { t } from '@/shared/lib/i18n';
+
+function SessionPanelContent({ tab }: { tab: DocBrowserTab }) {
+  const sessionKey = parseSessionKeyFromPanelUrl(tab.currentUrl);
+  return (
+    <div data-testid="session-conversation-panel-tab" className="flex h-full min-h-0 min-w-0 flex-col bg-background text-foreground">
+      {sessionKey
+        ? <SessionConversationArea key={sessionKey} sessionKey={sessionKey} />
+        : <p role="status" className="p-4 text-sm text-muted-foreground">{t('chatPanelUnavailable')}</p>}
+    </div>
+  );
+}
+
+export const CHAT_SESSION_PANEL_RENDERERS: DocBrowserCustomTabRenderers = {
+  [CHAT_SESSION_PANEL_KIND]: {
+    getTitle: (tab) => tab.title,
+    renderIcon: () => <MessageSquare className="h-4 w-4" />,
+    renderContent: ({ tab }) => <SessionPanelContent tab={tab} />,
+  },
+};

package/src/features/chat/features/conversation/hooks/use-chat-composer-reference-intent.ts

@@ -3,6 +3,7 @@ import { type ChatInputBarHandle } from '@nextclaw/agent-chat-ui';
 import {
   CHAT_CONVERSATION_EXCERPT_TOKEN_KIND,
   CHAT_UI_RESOURCE_TOKEN_KIND,
+  CHAT_SYSTEM_OBJECT_TOKEN_KIND,
   CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
 } from '@nextclaw/shared';
 
@@ -42,7 +43,7 @@ export function useChatComposerReferenceIntent(params: {
                 role: intent.role,
                 excerpt: intent.excerpt,
               }
-            : intent.kind === CHAT_UI_RESOURCE_TOKEN_KIND
+            : (intent.kind === CHAT_UI_RESOURCE_TOKEN_KIND || intent.kind === CHAT_SYSTEM_OBJECT_TOKEN_KIND)
               ? { reference: intent.reference }
               : undefined,
       });

package/src/features/chat/features/message/components/__tests__/chat-inline-panel-app-card.test.tsx

@@ -32,7 +32,8 @@ vi.mock("@/app/presenters/app.presenter", () => ({
   }),
 }));
 
-vi.mock("@/features/panel-apps", () => ({
+vi.mock("@/features/panel-apps", async (importOriginal) => ({
+  ...await importOriginal<object>(),
   PANEL_APP_IFRAME_SANDBOX:
     "allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock allow-presentation",
   findPanelAppEntryByDisplayId: (

package/src/features/chat/features/message/components/__tests__/chat-message-assistant-header.container.test.tsx

@@ -147,3 +147,6 @@ it("keeps a new session's empty first assistant draft in the awaiting state", ()
   );
   expect(assistantDraftRender?.isSending).toBe(true);
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()), useNavigate: () => vi.fn() }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));

package/src/features/chat/features/message/components/__tests__/chat-message-list-skill-preview.container.test.tsx

@@ -168,3 +168,6 @@ it("shows an error when a persisted v1 skill is no longer resolvable", async ()
   ));
   expect(captures.openFilePreview).not.toHaveBeenCalled();
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()), useNavigate: () => vi.fn() }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));

package/src/features/chat/features/message/components/__tests__/chat-message-list.container.test.tsx

@@ -891,3 +891,6 @@ it("shows edit only while the latest user message is actually editable", () => {
     );
   expect(busyUserMessage).not.toHaveProperty("actions");
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()), useNavigate: () => vi.fn() }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));

package/src/features/chat/features/message/hooks/use-chat-inline-token-actions.ts

@@ -1,8 +1,10 @@
+import { useNavigate } from 'react-router-dom';
 import { useCallback } from "react";
 import type { ChatInlineTokenViewModel } from "@nextclaw/agent-chat-ui";
 import {
   CHAT_PROJECT_TOKEN_KIND,
   CHAT_UI_RESOURCE_TOKEN_KIND,
+  CHAT_SYSTEM_OBJECT_TOKEN_KIND,
   CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
 } from "@nextclaw/shared";
 import { toast } from "sonner";
@@ -23,12 +25,14 @@ export function useChatInlineTokenActions(params: {
 }) {
   const { selectedSession, sessionKey } = params;
   const presenter = usePresenter();
+  const navigate = useNavigate();
   const appPresenter = useAppPresenter();
   const projectRoot = selectedSession?.projectRoot ?? selectedSession?.workingDir;
 
   const handleInlineTokenClick = useCallback((token: ChatInlineTokenViewModel) => {
-    if (token.kind === CHAT_UI_RESOURCE_TOKEN_KIND && "key" in token) {
-      appPresenter.docBrowserManager.open(token.key);
+    if ((token.kind === CHAT_UI_RESOURCE_TOKEN_KIND || token.kind === CHAT_SYSTEM_OBJECT_TOKEN_KIND) && "key" in token) {
+      const page = appPresenter.pageResourceManager.resolve(token.key);
+      if (page) appPresenter.pageResourceManager.open(page, 'default', navigate);
       return;
     }
     if (token.kind === "panel_app" && "key" in token) {
@@ -105,7 +109,7 @@ export function useChatInlineTokenActions(params: {
         previewViewer: "rendered",
       });
     }).catch(() => toast.error(t("chatSkillPreviewUnavailable")));
-  }, [appPresenter.docBrowserManager, presenter, projectRoot, selectedSession?.projectRoot, sessionKey]);
+  }, [appPresenter, navigate, presenter, projectRoot, selectedSession?.projectRoot, sessionKey]);
 
   const handleAttachmentOpen = useCallback((file: {
     label: string;

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-session-list-view.test.tsx

@@ -1,5 +1,6 @@
-import { renderHook } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useNcpChildSessionTabsView } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 import { useNcpSessionListView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import type { NcpSessionSummaryView } from "@/shared/lib/api";
@@ -9,6 +10,11 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-queries", () => ({
+  useNcpSessions: () => ({
+    data: {
+      sessions: mocks.sessions,
+    },
+  }),
   useInfiniteNcpSessions: () => ({
     data: {
       pages: [{
@@ -50,6 +56,7 @@ describe("useNcpSessionListView", () => {
       createSummary("session:beta", "Beta Task"),
     ];
     useChatSessionListStore.setState({
+      runningSessionKeys: [],
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
         query: "",
@@ -100,4 +107,40 @@ describe("useNcpSessionListView", () => {
       "session:alpha:child",
     ]);
   });
+
+  it("keeps a realtime running overlay when the persisted summary is still idle", () => {
+    useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "running");
+
+    const { result } = renderHook(() => useNcpSessionListView());
+
+    expect(result.current.items[0]).toMatchObject({
+      session: { key: "session:alpha", status: "idle" },
+      runStatus: "running",
+    });
+  });
+
+  it("clears the realtime running overlay when the session becomes idle", () => {
+    useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "running");
+    const { result } = renderHook(() => useNcpSessionListView());
+
+    act(() => {
+      useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "idle");
+    });
+
+    expect(result.current.items[0]?.runStatus).toBeUndefined();
+  });
+
+  it("projects the same realtime running overlay into child session tabs", () => {
+    useChatSessionListStore.getState().setSessionRunStatus("session:alpha", "running");
+
+    const { result } = renderHook(() => useNcpChildSessionTabsView([{
+      sessionKey: "session:alpha",
+      parentSessionKey: "session:parent",
+    }]));
+
+    expect(result.current[0]).toMatchObject({
+      sessionKey: "session:alpha",
+      runStatus: "running",
+    });
+  });
 });

package/src/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view.ts

@@ -5,6 +5,7 @@ import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils
 import { resolveSessionTypeLabel } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { ChatChildSessionTab } from "@/features/chat/stores/chat-thread.store";
 import { useNcpSessions } from "@/features/chat/features/ncp/hooks/use-ncp-session-queries";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
 
 export type ResolvedChildSessionTab = {
@@ -39,6 +40,7 @@ export function useNcpChildSessionTabsView(
   tabs: readonly ChatChildSessionTab[],
 ): ResolvedChildSessionTab[] {
   const sessionsQuery = useNcpSessions({ limit: 200 });
+  const runningSessionKeys = useChatSessionListStore((state) => state.runningSessionKeys);
   const summaries = useMemo(
     () => sessionsQuery.data?.sessions ?? [],
     [sessionsQuery.data?.sessions],
@@ -48,6 +50,10 @@ export function useNcpChildSessionTabsView(
     const sessions = adaptNcpSessionSummaries(summaries);
     return new Map(sessions.map((session) => [session.key, session]));
   }, [summaries]);
+  const runningSessionKeySet = useMemo(
+    () => new Set(runningSessionKeys),
+    [runningSessionKeys],
+  );
 
   return useMemo(
     () =>
@@ -62,7 +68,9 @@ export function useNcpChildSessionTabsView(
           updatedAt: session?.updatedAt ?? null,
           lastMessageAt: session?.lastMessageAt ?? null,
           readAt: session?.readAt ?? null,
-          runStatus: session?.status === "running" ? "running" : undefined,
+          runStatus: runningSessionKeySet.has(tab.sessionKey) || session?.status === "running"
+            ? "running"
+            : undefined,
           sessionTypeLabel: session?.sessionType
             ? resolveSessionTypeLabel(session.sessionType)
             : null,
@@ -71,6 +79,6 @@ export function useNcpChildSessionTabsView(
           projectRoot: session?.projectRoot?.trim() || null,
         };
       }),
-    [sessionByKey, tabs],
+    [runningSessionKeySet, sessionByKey, tabs],
   );
 }

package/src/features/chat/features/ncp/hooks/use-ncp-session-list-view.ts

@@ -29,6 +29,7 @@ export function useNcpSessionListView(
   params: { limit?: number; query?: string | null } = {},
 ) {
   const storedQuery = useChatSessionListStore((state) => state.snapshot.query);
+  const runningSessionKeys = useChatSessionListStore((state) => state.runningSessionKeys);
   const query = params.query ?? storedQuery;
   const deferredQuery = useDeferredValue(query);
   const sessionsQuery = useInfiniteNcpSessions({
@@ -38,11 +39,14 @@ export function useNcpSessionListView(
 
   const allItems = useMemo<NcpSessionListItemView[]>(() => {
     const summaries = sessionsQuery.data?.pages.flatMap((page) => page.sessions) ?? [];
+    const runningSessionKeySet = new Set(runningSessionKeys);
     return adaptNcpSessionSummaries(summaries).map((session) => ({
       session,
-      runStatus: session.status === "running" ? "running" : undefined,
+      runStatus: runningSessionKeySet.has(session.key) || session.status === "running"
+        ? "running"
+        : undefined,
     }));
-  }, [sessionsQuery.data?.pages]);
+  }, [runningSessionKeys, sessionsQuery.data?.pages]);
   const items = useMemo<NcpSessionListItemView[]>(() => {
     const visibleItems = allItems.filter(({ session }) =>
       shouldShowSessionInSidebar(session),

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

@@ -1,7 +1,9 @@
+import { sessionSurfaceManager } from '@/features/chat/managers/session-surface.manager';
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, expect, it, vi } from "vitest";
 import { ChatSidebarSessionItem } from "@/features/chat/features/session/components/chat-sidebar-session-item";
+import { useFloatingSessionStore } from '@/features/chat/stores/floating-session.store';
 
 const mocks = vi.hoisted(() => ({
   copyText: vi.fn(),
@@ -20,6 +22,7 @@ vi.mock("sonner", () => ({
 }));
 
 beforeEach(() => {
+  sessionSurfaceManager.close();
   mocks.copyText.mockReset();
   mocks.copyText.mockResolvedValue(true);
   mocks.deleteSession.mockReset();
@@ -81,6 +84,15 @@ it("shows session actions only on hover or when an action owns focus", () => {
   expect(screen.getByRole("button", { name: "More actions" })).toBeTruthy();
 });
 
+it("opens any sidebar session as a floating conversation", async () => {
+  const user = userEvent.setup();
+  await user.click(screen.getByRole('button', { name: 'More actions' }));
+  await user.click(screen.getByRole('button', { name: 'Open in floating window' }));
+  expect(useFloatingSessionStore.getState().session).toEqual({
+    sessionKey: 'session:current', title: 'Current Task',
+  });
+});
+
 it("copies the sidebar session ID from the more-actions menu", async () => {
   const user = userEvent.setup();
 
@@ -121,3 +133,11 @@ it("shows session context from the row on hover", async () => {
   expect(within(tooltip).getByText("2")).toBeTruthy();
   expect(within(tooltip).getByText("3")).toBeTruthy();
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()), useNavigate: () => vi.fn(), useLocation: () => ({ pathname: '/chat', search: '' }) }));
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({ usePanelApps: () => ({ data: { entries: [] } }), useUpdatePanelAppPreferences: () => ({ mutate: vi.fn() }) }));
+vi.mock("@/app/components/app-presenter-provider", async () => {
+  const { PageResourceManager } = await import("@/features/right-panel-resources/managers/page-resource.manager");
+  const app = { docBrowserManager: { openTarget: vi.fn() }, chatComposerIntentManager: { requestUiResourceReference: vi.fn() } };
+  return { useAppPresenter: () => ({ ...app, pageResourceManager: new PageResourceManager(app as never) }) };
+});

package/src/features/chat/features/session/components/chat-mobile-session-row.tsx

@@ -0,0 +1,61 @@
+import { Pencil, Pin, Trash2 } from 'lucide-react';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
+import { ChatSessionMoreActionsMenu } from '@/features/chat/features/session/components/session-header/chat-session-more-actions-menu';
+import { ChatSessionHeaderMenuItem } from '@/features/chat/features/session/components/session-header/chat-session-header-menu-item';
+import { SessionRunBadge } from './session-run-badge';
+import type { ChatSidebarSessionItemProps } from './chat-sidebar-session-item';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+const SESSION_AVATAR_COLORS = [
+  'bg-blue-100 text-blue-800 [html[data-theme-appearance=dark]_&]:bg-blue-950 [html[data-theme-appearance=dark]_&]:text-blue-200',
+  'bg-emerald-100 text-emerald-800 [html[data-theme-appearance=dark]_&]:bg-emerald-950 [html[data-theme-appearance=dark]_&]:text-emerald-200',
+  'bg-violet-100 text-violet-800 [html[data-theme-appearance=dark]_&]:bg-violet-950 [html[data-theme-appearance=dark]_&]:text-violet-200',
+  'bg-amber-100 text-amber-800 [html[data-theme-appearance=dark]_&]:bg-amber-950 [html[data-theme-appearance=dark]_&]:text-amber-200',
+  'bg-rose-100 text-rose-800 [html[data-theme-appearance=dark]_&]:bg-rose-950 [html[data-theme-appearance=dark]_&]:text-rose-200',
+];
+
+function sessionAvatarColor(sessionKey: string): string {
+  let hash = 0;
+  for (const character of sessionKey) hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  return SESSION_AVATAR_COLORS[Math.abs(hash) % SESSION_AVATAR_COLORS.length];
+}
+
+/** Mobile presentation of the same session entry and actions used by the sidebar. */
+export function ChatMobileSessionRow(props: ChatSidebarSessionItemProps) {
+  const { sessionKey, title, previewText, trailingText, agentId, agentLabel,
+    agentAvatarUrl, showUnreadDot, runStatus, isPinned, onSelect,
+    onStartEditing, onTogglePinned, onDelete } = props;
+  return (
+    <div className="relative flex min-w-0 items-center">
+      <button type="button" onClick={onSelect} className="flex min-h-[76px] min-w-0 flex-1 items-center gap-3 py-3 pl-4 pr-1 text-left active:bg-muted">
+        <span className="relative shrink-0">
+          {agentAvatarUrl || (agentId && agentId.toLowerCase() !== 'main') ? (
+            <AgentAvatar agentId={agentId || 'main'} displayName={agentLabel} avatarUrl={agentAvatarUrl} className="h-12 w-12 rounded-xl text-lg" />
+          ) : (
+            <span aria-hidden="true" className={cn('flex h-12 w-12 items-center justify-center rounded-xl text-base font-medium', sessionAvatarColor(sessionKey))}>
+              {Array.from(title.trim()).slice(0, 2).join('')}
+            </span>
+          )}
+          {showUnreadDot ? <span aria-label={t('chatSessionUnread')} className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-background bg-primary" /> : null}
+        </span>
+        <span className="flex min-w-0 flex-1 flex-col gap-1">
+          <span className="flex min-w-0 items-center gap-2">
+            <span className="min-w-0 flex-1 truncate text-[16px] font-medium leading-6 text-foreground">{title}</span>
+            <span className="shrink-0 text-[11px] text-muted-foreground">{trailingText}</span>
+          </span>
+          <span className="flex min-w-0 items-center gap-1.5">
+            {runStatus ? <SessionRunBadge status={runStatus} /> : null}
+            {isPinned ? <Pin aria-label={t('chatSidebarUnpinSession')} className="h-3 w-3 shrink-0 text-muted-foreground" /> : null}
+            <span className="min-w-0 truncate text-[13px] leading-5 text-muted-foreground">{previewText}</span>
+          </span>
+        </span>
+      </button>
+      <ChatSessionMoreActionsMenu sessionKey={sessionKey} sessionTitle={title} className="h-11 w-9 shrink-0 rounded-none text-muted-foreground">
+        <ChatSessionHeaderMenuItem icon={Pin} label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')} onClick={onTogglePinned} />
+        <ChatSessionHeaderMenuItem icon={Pencil} label={t('edit')} onClick={onStartEditing} />
+        <ChatSessionHeaderMenuItem icon={Trash2} label={t('delete')} onClick={onDelete} destructive />
+      </ChatSessionMoreActionsMenu>
+    </div>
+  );
+}

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -12,7 +12,6 @@ import {
   Plus,
 } from "lucide-react";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
-import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
 import { Popover, PopoverTrigger } from "@/shared/components/ui/popover";
 import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
@@ -68,7 +67,6 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
   const collapsedProjectRoots = useChatSessionListStore(
     (state) => state.snapshot.collapsedProjectRoots,
   );
-  const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
   const [openProjectMenuRoot, setOpenProjectMenuRoot] = useState<string | null>(
     null,
   );
@@ -80,7 +78,6 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
       ),
     [defaultSessionType, sessionTypeOptions],
   );
-  const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
   const removeProject = async (group: ChatSidebarProjectGroup) => {
     if (!group.projectId) return;
     setOpenProjectMenuRoot(null);
@@ -213,37 +210,6 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                 data-project-actions
                 className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
               >
-                {supportsSessionTypeChoice ? (
-                  <Popover
-                    open={openProjectRoot === group.projectRoot}
-                    onOpenChange={(nextOpen) => {
-                      setOpenProjectRoot(nextOpen ? group.projectRoot : null);
-                    }}
-                  >
-                    <PopoverTrigger asChild>
-                      <IconActionButton
-                        icon={<Plus className="h-3.5 w-3.5" />}
-                        label={actionLabel}
-                      />
-                    </PopoverTrigger>
-                    <ChatPopoverContent
-                      align="end"
-                      className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
-                    >
-                      <ChatSessionTypeMenu
-                        options={sessionTypeOptions}
-                        selectedSessionType={preferredSessionType}
-                        onSelect={(sessionType) => {
-                          presenter.chatSessionListManager.createSession({
-                            projectRoot: group.projectRoot,
-                            sessionType,
-                          });
-                          setOpenProjectRoot(null);
-                        }}
-                      />
-                    </ChatPopoverContent>
-                  </Popover>
-                ) : (
                   <IconActionButton
                     icon={<Plus className="h-3.5 w-3.5" />}
                     label={actionLabel}
@@ -254,7 +220,6 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                       })
                     }
                   />
-                )}
                 <IconActionButton
                   icon={
                     <Pin

package/src/features/chat/features/session/components/chat-sidebar-session-entry.tsx

@@ -11,6 +11,7 @@ import type { ChatSessionTypeOption } from "@/features/chat/features/session-typ
 import { t } from "@/shared/lib/i18n";
 
 export function ChatSidebarSessionEntry(props: {
+  variant?: 'desktop' | 'mobile';
   item: NcpSessionListItemView;
   selectedSessionKey: string | null;
   optimisticReadAtBySessionKey: Record<string, string>;
@@ -74,6 +75,7 @@ export function ChatSidebarSessionEntry(props: {
 
   return (
     <ChatSidebarSessionItem
+      variant={props.variant}
       sessionKey={session.key}
       active={active}
       showUnreadDot={shouldShowUnreadSessionIndicator({