@nextclaw/ui 0.25.4 → 0.26.1

package/src/features/chat/features/conversation/hooks/__tests__/use-chat-voice-input.test.tsx

@@ -201,6 +201,10 @@ describe('dictation lifecycle', () => {
     expect(manager.getSnapshot().error).toBe('timeout');
   });
   it('handles unsupported APIs and thrown starts', async () => {
+    const insecure = new ChatVoiceInputManager(() => recognition, async () => null, () => false);
+    insecure.start('en', 'one', draft);
+    expect(insecure.getSnapshot().error).toBe('insecure-context');
+    expect(recognition.start).not.toHaveBeenCalled();
     const unsupported = new ChatVoiceInputManager(() => null);
     unsupported.start('en', 'one', draft);
     expect(unsupported.getSnapshot().error).toBe('unsupported');

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

@@ -10,6 +10,7 @@ import type { ChatMessageListProps } from "@nextclaw/agent-chat-ui";
 import { beforeEach, expect, it, vi } from "vitest";
 import { ChatMessageListContainer as RuntimeChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import type * as I18nModule from "@/shared/lib/i18n";
 
 type AgentChatUiModule = {
   ChatMessageList: ComponentType<ChatMessageListProps>;
@@ -112,10 +113,15 @@ vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
 }));
 
-vi.mock("@/shared/lib/i18n", () => ({
-  formatDateTime: (value: string) => `formatted:${value}`,
-  t: (key: string) => key,
-}));
+vi.mock("@/shared/lib/i18n", async (importOriginal) => {
+  const actual = await importOriginal<typeof I18nModule>();
+  return {
+    ...actual,
+    formatDateTime: (value: string) => `formatted:${value}`,
+    t: (key: string) => key.startsWith("chatProcessDuration") || (captures.language === "zh" && key.startsWith("chatProcessSummary"))
+      ? actual.t(key, captures.language === "zh" ? "zh" : "en") : key,
+  };
+});
 
 vi.mock(
   "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
@@ -325,51 +331,30 @@ it("adds a completed assistant process summary without inventing a duration", ()
   });
 });
 
-it("derives completed assistant process duration from message lifecycle", () => {
-  const assistantMessage = {
-    id: "assistant-process-result",
-    sessionId: "session-1",
-    role: "assistant",
-    status: "final",
-    timestamp: "2026-03-31T10:01:03.000Z",
-    lifecycle: {
-      startedAt: "2026-03-31T10:00:00.000Z",
-      endedAt: "2026-03-31T10:03:51.000Z",
-    },
+it("renders a minimal Chinese history summary and still expands its process", () => {
+  captures.language = "zh";
+  captures.renderActualChatMessageList = true;
+  const message: NcpMessage = {
+    id: "assistant-minimal-summary", sessionId: "session-1", role: "assistant", status: "final",
+    timestamp: "2026-03-31T10:02:07.000Z",
+    lifecycle: { startedAt: "2026-03-31T10:00:00.000Z", endedAt: "2026-03-31T10:02:07.000Z" },
+    metadata: { nextclawUiHistoryToolPayloadSummary: {
+      toolCallCount: 67, toolNames: ["tool_schema", "projects_list", "project_work_list"],
+    } },
     parts: [
-      {
-        type: "reasoning",
-        text: "Inspecting current state.",
-      },
-      {
-        type: "tool-invocation",
-        toolCallId: "tool-1",
-        toolName: "exec_command",
-        state: "result",
-        args: '{"cmd":"git status"}',
-        result: "clean",
-      },
-      {
-        type: "text",
-        text: "Done.",
-      },
+      { type: "reasoning", text: "核对项目详情" },
+      { type: "tool-invocation", toolCallId: "tool-1", toolName: "projects_list", state: "result" },
+      { type: "text", text: "项目已整理" },
     ],
-  } satisfies NcpMessage;
-
-  render(
-    <ChatMessageListContainer
-      messages={[assistantMessage]}
-      isSending={false}
-    />,
-  );
-
-  const renderedMessages =
-    captures.renders[captures.renders.length - 1]?.messages ?? [];
-  expect(renderedMessages[0]).toMatchObject({
-    processSummary: {
-      label: "chatProcessSummaryProcessed 3m 51s",
-    },
-  });
+  };
+  render(<ChatMessageListContainer messages={[message]} isSending={false} />);
+  const summary = screen.getByRole("button", { name: "已处理 2分钟7秒" });
+  expect(summary.getAttribute("aria-expanded")).toBe("false");
+  expect(screen.queryByText(/67|tool_schema|project_work_list/)).toBeNull();
+  expect(screen.getByText("项目已整理")).toBeTruthy();
+  fireEvent.click(summary);
+  expect(summary.getAttribute("aria-expanded")).toBe("true");
+  expect(screen.getByRole("button", { name: "projects list" })).toBeTruthy();
 });
 
 it("keeps unavailable ai usage in metadata but out of the footer", () => {
@@ -891,3 +876,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/components/chat-message-list.container.tsx

@@ -66,7 +66,7 @@ import {
 import { useChatMessageActions } from "@/features/chat/features/message/hooks/use-chat-message-actions";
 import { useChatInlineTokenActions } from "@/features/chat/features/message/hooks/use-chat-inline-token-actions";
 import { buildServerPathContentUrl } from "@/shared/lib/api";
-import { formatDateTime, formatNumber, t } from "@/shared/lib/i18n";
+import { formatDateTime, t, type I18nLanguage } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 import type { SessionMessageToolPayloadState } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 import { ChatMessageObservationEvent } from "@/features/chat/features/message/components/chat-message-observation-event";
@@ -96,7 +96,7 @@ class ChatMessageViewModelAdapter {
   private readonly cache = new WeakMap<
     NcpMessage,
     {
-      language: Parameters<typeof formatDateTime>[1];
+      language: I18nLanguage;
       processSummaryLabel: string | null;
       executionPresentationKey: string | null;
       triggerDetailsKey: string | null;
@@ -108,7 +108,7 @@ class ChatMessageViewModelAdapter {
     continuationRunning: boolean;
     executionLabels: ReturnType<typeof buildChatMessageExecutionLabels>;
     triggerLabels: ReturnType<typeof buildChatMessageTriggerLabels>;
-    language: Parameters<typeof formatDateTime>[1];
+    language: I18nLanguage;
     processedLabel: string;
     rawMessages: readonly NcpMessage[];
     texts: ReturnType<typeof buildChatMessageAdapterTexts>;
@@ -120,13 +120,9 @@ class ChatMessageViewModelAdapter {
       const processSummary = buildChatMessageProcessSummary({
         message,
         processedLabel,
-        formatDeferredToolSummary: (toolCallCount, toolNames) => {
-          const countLabel = t("chatProcessSummaryToolCalls", language)
-            .replace("{count}", formatNumber(toolCallCount, language));
-          if (toolNames.length === 0) return countLabel;
-          const separator = language === "zh" ? "、" : ", ";
-          return `${countLabel} · ${toolNames.join(separator)}`;
-        },
+        language,
+        failedLabel: t("chatProcessSummaryError", language),
+        stoppedLabel: t("chatProcessSummaryStopped", language),
       });
       const processSummaryLabel = processSummary?.label ?? null;
       const executionPresentation = buildChatMessageExecutionPresentation({

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/message/utils/__tests__/chat-message-process-summary.utils.test.ts

@@ -1,4 +1,4 @@
-import { NcpEventType, type NcpMessage } from "@nextclaw/ncp";
+import { createUnavailableNcpAiExecutionMetadata, NcpEventType, type NcpMessage } from "@nextclaw/ncp";
 import { DefaultNcpAgentConversationStateManager } from "@nextclaw/ncp-toolkit";
 import { describe, expect, it } from "vitest";
 import { buildChatMessageProcessSummary } from "@/features/chat/features/message/utils/chat-message-process-summary.utils";
@@ -29,6 +29,13 @@ const baseAssistantMessage = {
   ],
 } satisfies NcpMessage;
 
+const summaryLabels = {
+  processedLabel: "已处理",
+  failedLabel: "处理失败",
+  stoppedLabel: "已停止",
+  language: "zh" as const,
+};
+
 describe("buildChatMessageProcessSummary", () => {
   it("shows elapsed time from the real completed-message then run-finished event sequence", async () => {
     const manager = new DefaultNcpAgentConversationStateManager();
@@ -44,12 +51,13 @@ describe("buildChatMessageProcessSummary", () => {
       },
     ]);
     const message = manager.getSnapshot().messages[0]!;
-    expect(buildChatMessageProcessSummary({ message, processedLabel: "已处理" })?.label).toBe("已处理 3m 51s");
+    expect(buildChatMessageProcessSummary({ ...summaryLabels, message })?.label).toBe("已处理 3分钟51秒");
   });
 
   it("does not invent duration when lifecycle timing is absent", () => {
     expect(
       buildChatMessageProcessSummary({
+        ...summaryLabels,
         message: baseAssistantMessage,
         processedLabel: "Processed",
       }),
@@ -61,6 +69,8 @@ describe("buildChatMessageProcessSummary", () => {
   it("derives duration from lifecycle startedAt and endedAt", () => {
     expect(
       buildChatMessageProcessSummary({
+        ...summaryLabels,
+        language: "en",
         message: {
           ...baseAssistantMessage,
           lifecycle: {
@@ -77,6 +87,7 @@ describe("buildChatMessageProcessSummary", () => {
 
   it("stays free of tool-activity semantics", () => {
     const summary = buildChatMessageProcessSummary({
+      ...summaryLabels,
       message: baseAssistantMessage,
       processedLabel: "Processed",
     });
@@ -85,8 +96,9 @@ describe("buildChatMessageProcessSummary", () => {
     expect(summary?.label.toLowerCase()).not.toContain("read");
   });
 
-  it("shows the bounded aggregate for a deferred history payload", () => {
+  it("keeps deferred history summaries identical to fully loaded messages", () => {
     const summary = buildChatMessageProcessSummary({
+      ...summaryLabels,
       message: {
         ...baseAssistantMessage,
         metadata: {
@@ -97,12 +109,46 @@ describe("buildChatMessageProcessSummary", () => {
         },
       },
       processedLabel: "Processed",
-      formatDeferredToolSummary: (count, names) =>
-        `${count} tool calls · ${names.join(", ")}`,
     });
 
     expect(summary?.label).toBe(
-      "Processed · 500 tool calls · exec_command, read_file",
+      "Processed",
     );
   });
+
+  it.each([
+    [0, "0秒"], [7, "7秒"], [127, "2分钟7秒"],
+    [3600, "1小时"], [3720, "1小时2分钟"],
+  ])("localizes a %i-second duration without separators", (seconds, expected) => {
+    const startedAt = "2026-03-31T10:00:00.000Z";
+    const message: NcpMessage = {
+      ...baseAssistantMessage,
+      lifecycle: { startedAt, endedAt: new Date(Date.parse(startedAt) + seconds * 1000).toISOString() },
+    };
+    expect(buildChatMessageProcessSummary({ ...summaryLabels, message })?.label).toBe(`已处理 ${expected}`);
+  });
+
+  it.each(["pending", "streaming"] as const)("does not label %s messages as processed", (status) => {
+    expect(buildChatMessageProcessSummary({
+      ...summaryLabels, message: { ...baseAssistantMessage, status },
+    })).toBeUndefined();
+  });
+
+  it.each([
+    ["failed", "处理失败"], ["aborted", "已停止"], ["completed", "已处理"],
+  ] as const)("uses the recorded %s outcome", (outcome, expected) => {
+    const message: NcpMessage = {
+      ...baseAssistantMessage,
+      metadata: { ai_execution: createUnavailableNcpAiExecutionMetadata({
+        runId: "run-1", runtimeId: "native", model: "test", requestedModel: null, outcome,
+      }) },
+    };
+    expect(buildChatMessageProcessSummary({ ...summaryLabels, message })?.label).toBe(expected);
+  });
+
+  it("shows failure for an error message without execution metadata", () => {
+    expect(buildChatMessageProcessSummary({
+      ...summaryLabels, message: { ...baseAssistantMessage, status: "error" },
+    })?.label).toBe("处理失败");
+  });
 });

package/src/features/chat/features/message/utils/chat-message-process-summary.utils.ts

@@ -1,29 +1,15 @@
-import type { NcpMessage } from "@nextclaw/ncp";
+import { readNcpAiExecutionMetadata, type NcpMessage } from "@nextclaw/ncp";
 import type { ChatMessageProcessSummarySource } from "@/features/chat/types/chat-message.types";
+import { t, type I18nLanguage } from "@/shared/lib/i18n";
 
 type BuildChatMessageProcessSummaryParams = {
   message: NcpMessage;
   processedLabel: string;
-  formatDeferredToolSummary?: (toolCallCount: number, toolNames: readonly string[]) => string;
+  failedLabel: string;
+  stoppedLabel: string;
+  language: I18nLanguage;
 };
 
-const UI_HISTORY_TOOL_PAYLOAD_SUMMARY_METADATA_KEY =
-  "nextclawUiHistoryToolPayloadSummary";
-
-function readDeferredToolSummary(
-  message: NcpMessage,
-): { toolCallCount: number; toolNames: string[] } | null {
-  const value = message.metadata?.[UI_HISTORY_TOOL_PAYLOAD_SUMMARY_METADATA_KEY];
-  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
-  const record = value as Record<string, unknown>;
-  const { toolCallCount } = record;
-  if (!Number.isInteger(toolCallCount) || (toolCallCount as number) <= 0) return null;
-  const toolNames = Array.isArray(record.toolNames)
-    ? record.toolNames.filter((name): name is string => typeof name === "string" && name.trim().length > 0)
-    : [];
-  return { toolCallCount: toolCallCount as number, toolNames };
-}
-
 function isAssistantProcessPart(part: NcpMessage["parts"][number]): boolean {
   return part.type === "reasoning" || part.type === "tool-invocation";
 }
@@ -62,7 +48,7 @@ function hasCollapsibleAssistantProcess(message: NcpMessage): boolean {
   );
 }
 
-function formatLifecycleDuration(message: NcpMessage): string | null {
+function formatLifecycleDuration(message: NcpMessage, language: I18nLanguage): string | null {
   const startedAt = message.lifecycle?.startedAt;
   const endedAt = message.lifecycle?.endedAt;
   if (!startedAt || !endedAt) {
@@ -77,13 +63,13 @@ function formatLifecycleDuration(message: NcpMessage): string | null {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const seconds = totalSeconds % 60;
-  if (hours > 0) {
-    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
-  }
-  if (minutes > 0) {
-    return `${minutes}m ${seconds}s`;
-  }
-  return `${seconds}s`;
+  const key = hours > 0
+    ? (minutes > 0 ? "chatProcessDurationHoursMinutes" : "chatProcessDurationHours")
+    : (minutes > 0 ? "chatProcessDurationMinutesSeconds" : "chatProcessDurationSeconds");
+  return t(key, language)
+    .replace("{hours}", String(hours))
+    .replace("{minutes}", String(minutes))
+    .replace("{seconds}", String(seconds));
 }
 
 /**
@@ -92,22 +78,21 @@ function formatLifecycleDuration(message: NcpMessage): string | null {
  * and must not be mixed into this summary.
  */
 export function buildChatMessageProcessSummary({
-  formatDeferredToolSummary,
+  failedLabel,
+  stoppedLabel,
   message,
   processedLabel,
+  language,
 }: BuildChatMessageProcessSummaryParams): ChatMessageProcessSummarySource | undefined {
   if (!hasCollapsibleAssistantProcess(message)) {
     return undefined;
   }
-  const duration = formatLifecycleDuration(message);
-  const baseLabel = duration ? `${processedLabel} ${duration}` : processedLabel;
-  const deferredToolSummary = readDeferredToolSummary(message);
+  const duration = formatLifecycleDuration(message, language);
+  const outcome = readNcpAiExecutionMetadata(message.metadata)?.outcome;
+  const statusLabel = message.status === "error" || outcome === "failed"
+    ? failedLabel
+    : outcome === "aborted" ? stoppedLabel : processedLabel;
   return {
-    label: deferredToolSummary && formatDeferredToolSummary
-      ? `${baseLabel} · ${formatDeferredToolSummary(
-          deferredToolSummary.toolCallCount,
-          deferredToolSummary.toolNames,
-        )}`
-      : baseLabel,
+    label: duration ? `${statusLabel} ${duration}` : statusLabel,
   };
 }

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

@@ -113,7 +113,7 @@ describe("ChatSidebarProjectGroups", () => {
     const projectRow = projectLink.parentElement?.parentElement;
     expect(container.firstElementChild?.className).toBe("space-y-0.5");
     expect(projectRow?.className).toContain("h-8");
-    expect(projectRow?.className).toContain("hover:bg-gray-200/60");
+    expect(projectRow?.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
     const projectContent = projectLink.parentElement;
     expect(projectContent?.classList.contains("pr-14")).toBe(false);
     expect(projectContent?.className).toContain("group-hover/project:pr-20");

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,16 @@ 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('menuitem', { name: 'Layout and position' }));
+  await user.click(screen.getByRole('menuitem', { 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 +134,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>
+  );
+}