@nextclaw/ui 0.25.4 → 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/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({

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

@@ -1,4 +1,5 @@
 import { AgentAvatar } from "@/shared/components/common/agent-avatar";
+import { ChatMobileSessionRow } from './chat-mobile-session-row';
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
 import { ChatSessionMoreActionsMenu } from "@/features/chat/features/session/components/session-header/chat-session-more-actions-menu";
@@ -21,7 +22,8 @@ import {
 import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
 import { ChatSessionHeaderMenuItem } from "@/features/chat/features/session/components/session-header/chat-session-header-menu-item";
 
-type ChatSidebarSessionItemProps = {
+export type ChatSidebarSessionItemProps = {
+  variant?: 'desktop' | 'mobile';
   sessionKey: string;
   active: boolean;
   showUnreadDot: boolean;
@@ -264,6 +266,7 @@ function ChatSidebarSessionDisplayView({
         />
         <ChatSessionMoreActionsMenu
           sessionKey={sessionKey}
+          sessionTitle={title}
           triggerSize="sm"
           triggerTone="strong"
         >
@@ -279,7 +282,8 @@ function ChatSidebarSessionDisplayView({
   );
 }
 
-export function ChatSidebarSessionItem({
+export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
+  const {
   sessionKey,
   active,
   showUnreadDot,
@@ -305,17 +309,20 @@ export function ChatSidebarSessionItem({
   onCancel,
   onTogglePinned,
   onDelete,
-}: ChatSidebarSessionItemProps) {
+  } = props;
   return (
     <div
       className={cn(
-        "w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors",
+        props.variant === 'mobile'
+          ? 'w-full border-b border-border/50 bg-background text-left'
+          : "w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors",
         active
           ? "bg-background/90 font-medium text-foreground"
           : "text-foreground/80 hover:bg-background/65 hover:text-foreground",
       )}
     >
       {isEditing ? (
+        <div className={props.variant === 'mobile' ? 'p-4' : undefined}>
         <ChatSidebarSessionEditingView
           sessionKey={sessionKey}
           draftLabel={draftLabel}
@@ -324,7 +331,8 @@ export function ChatSidebarSessionItem({
           onSave={onSave}
           onCancel={onCancel}
         />
-      ) : (
+        </div>
+      ) : props.variant === 'mobile' ? <ChatMobileSessionRow {...props} /> : (
         <ChatSidebarSessionDisplayView
           sessionKey={sessionKey}
           active={active}

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

@@ -12,6 +12,7 @@ import { t } from "@/shared/lib/i18n";
 type SessionTypeOption = ChatSessionTypeOption;
 
 type ChatSidebarSessionListProps = {
+  variant?: 'desktop' | 'mobile';
   isLoading: boolean;
   isProjectFirstView: boolean;
   groups: ChatSidebarDateGroup[];
@@ -32,6 +33,7 @@ function ChatSidebarEmptyState({ label }: { label: string }) {
 }
 
 export function ChatSidebarSessionList({
+  variant = 'desktop',
   defaultSessionType,
   groups,
   isLoading,
@@ -68,13 +70,13 @@ export function ChatSidebarSessionList({
   }
 
   return (
-    <div className="space-y-2">
+    <div className={variant === 'mobile' ? undefined : 'space-y-2'}>
       {groups.map((group) => (
         <div key={group.label}>
-          <div className="px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65">
+          <div className={variant === 'mobile' ? 'px-4 py-1 text-[11px] text-muted-foreground' : 'px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65'}>
             {group.label}
           </div>
-          <div className="space-y-0.5">
+          <div className={variant === 'mobile' ? undefined : 'space-y-0.5'}>
             {group.items.map(renderSessionItem)}
           </div>
         </div>

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-header-actions.test.tsx

@@ -237,3 +237,11 @@ describe('ChatSessionHeaderActions', () => {
     expect(mocks.onToggleWorkspace).toHaveBeenCalledTimes(1);
   });
 });
+
+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/session-header/chat-session-header-actions.tsx

@@ -12,6 +12,7 @@ const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
 
 type ChatSessionHeaderActionsProps = {
   sessionKey: string | null;
+  sessionTitle?: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
   currentPath?: string | null;
@@ -24,6 +25,7 @@ type ChatSessionHeaderActionsProps = {
 
 export function ChatSessionHeaderActions({
   sessionKey,
+  sessionTitle,
   canDeleteSession,
   isDeletePending,
   currentPath,
@@ -62,6 +64,7 @@ export function ChatSessionHeaderActions({
       {sessionKey ? (
         <ChatSessionMoreActionsMenu
           sessionKey={sessionKey}
+          sessionTitle={sessionTitle}
           disabled={isBusy}
         >
           <ChatSessionHeaderMenuItem