@nextclaw/ui 0.14.4 → 0.15.0

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

@@ -8,17 +8,20 @@ import {
   createInlinePanelAppCardUrl,
   createFallbackPanelAppContentPath,
   createInlinePanelAppTab,
-  PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX,
   PANEL_APP_INLINE_IFRAME_SANDBOX,
 } from '@/features/chat/features/message/utils/chat-inline-panel-app-card.utils';
 import { useDocBrowser } from '@/shared/components/doc-browser';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { t } from '@/shared/lib/i18n';
 
+type ChatInlinePanelAppDescriptor = Pick<ChatPanelAppCardViewModel, 'appId' | 'title'>;
+
 export function ChatInlinePanelAppCard({
   panelApp,
+  showExpandAction = true,
 }: {
-  panelApp: ChatPanelAppCardViewModel;
+  panelApp: ChatInlinePanelAppDescriptor;
+  showExpandAction?: boolean;
 }) {
   const docBrowser = useDocBrowser();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -77,25 +80,30 @@ export function ChatInlinePanelAppCard({
   if (!url) {
     return (
       <div
-        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-border bg-muted/45"
-        style={{ maxHeight: PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX }}
+        className="h-[320px] min-h-[220px] w-full max-w-[48rem] animate-pulse rounded-lg border border-border bg-muted/45"
+        data-chat-message-wide-content="true"
       />
     );
   }
 
   return (
-    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+    <div
+      className="w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
+      data-chat-message-wide-content="true"
+    >
       <div className="flex h-9 items-center justify-between gap-2 border-b border-border bg-muted/45 px-2.5">
         <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
           <AppWindow className="h-3.5 w-3.5 shrink-0 text-primary" />
           <span className="truncate">{title}</span>
         </div>
-        <IconActionButton
-          className="h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-          icon={<Maximize2 className="h-3.5 w-3.5" />}
-          label={t('chatPanelCardExpand')}
-          onClick={openExpanded}
-        />
+        {showExpandAction ? (
+          <IconActionButton
+            className="h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            icon={<Maximize2 className="h-3.5 w-3.5" />}
+            label={t('chatPanelCardExpand')}
+            onClick={openExpanded}
+          />
+        ) : null}
       </div>
       <div
         className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-card"

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

@@ -1,15 +1,20 @@
 import { useMemo } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
+  type ChatInlineDisplayViewModel,
   type ChatMessageViewModel,
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import {
   adaptChatMessage,
-  type ChatMessageAdapterTexts,
   type ChatMessageSource,
 } from "@/features/chat/features/message/utils/chat-message.utils";
+import { buildChatMessageProcessSummary } from "@/features/chat/features/message/utils/chat-message-process-summary.utils";
+import {
+  buildChatMessageAdapterTexts,
+  buildChatMessageTexts,
+} from "@/features/chat/features/message/utils/chat-message-texts.utils";
 import { readInlineTokensFromMetadata } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import {
@@ -31,9 +36,27 @@ const INHERITED_FROM_SESSION_METADATA_KEY = "inherited_from_session_id";
 
 const messageViewModelCache = new WeakMap<
   NcpMessage,
-  { language: string; viewModel: ChatMessageViewModel }
+  {
+    language: string;
+    processSummaryLabel: string | null;
+    viewModel: ChatMessageViewModel;
+  }
 >();
 
+function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
+  if (display.target.type !== "panel_app") {
+    return undefined;
+  }
+  return (
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: display.target.payload.appId,
+        title: display.title,
+      }}
+    />
+  );
+}
+
 type ContextInheritanceTimelineView = {
   sourceSessionId: string;
   inheritedMessageCount: number;
@@ -60,61 +83,6 @@ type ChatTimelineItem =
       inheritance: ContextInheritanceTimelineView;
     };
 
-function buildChatMessageAdapterTexts(
-  language: string,
-): ChatMessageAdapterTexts {
-  void language;
-  return {
-    roleLabels: {
-      user: t("chatRoleUser"),
-      assistant: t("chatRoleAssistant"),
-      tool: t("chatRoleTool"),
-      system: t("chatRoleSystem"),
-      fallback: t("chatRoleMessage"),
-    },
-    reasoningLabel: t("chatReasoning"),
-    toolCallLabel: t("chatToolCall"),
-    toolResultLabel: t("chatToolResult"),
-    toolInputLabel: t("chatToolInput"),
-    toolNoOutputLabel: t("chatToolNoOutput"),
-    toolOutputLabel: t("chatToolOutput"),
-    toolStatusPreparingLabel: t("chatToolStatusPreparing"),
-    toolStatusRunningLabel: t("chatToolStatusRunning"),
-    toolStatusCompletedLabel: t("chatToolStatusCompleted"),
-    toolStatusFailedLabel: t("chatToolStatusFailed"),
-    toolStatusCancelledLabel: t("chatToolStatusCancelled"),
-    showContentActionLabel: t("chatShowContentAction"),
-    imageAttachmentLabel: t("chatImageAttachment"),
-    fileAttachmentLabel: t("chatFileAttachment"),
-    unknownPartLabel: t("chatUnknownPart"),
-  };
-}
-
-function buildChatMessageTexts(language: string) {
-  void language;
-  return {
-    copyCodeLabel: t("chatCodeCopy"),
-    copiedCodeLabel: t("chatCodeCopied"),
-    copyMessageLabel: t("chatMessageCopy"),
-    copiedMessageLabel: t("chatMessageCopied"),
-    typingLabel: t("chatTyping"),
-    attachmentOpenLabel: t("chatAttachmentOpen"),
-    attachmentAttachedLabel: t("chatAttachmentAttached"),
-    attachmentCategoryLabels: {
-      archive: t("chatAttachmentCategoryArchive"),
-      audio: t("chatAttachmentCategoryAudio"),
-      code: t("chatAttachmentCategoryCode"),
-      data: t("chatAttachmentCategoryData"),
-      document: t("chatAttachmentCategoryDocument"),
-      generic: t("chatAttachmentCategoryGeneric"),
-      image: t("chatAttachmentCategoryImage"),
-      pdf: t("chatAttachmentCategoryPdf"),
-      sheet: t("chatAttachmentCategorySheet"),
-      video: t("chatAttachmentCategoryVideo"),
-    },
-  };
-}
-
 function ChatContextCompactionDivider({
   checkpoint,
 }: {
@@ -316,18 +284,22 @@ export function ChatMessageListContainer({
 }: ChatMessageListContainerProps) {
   const presenter = usePresenter();
   const { language } = useI18n();
-  const texts = useMemo<ChatMessageAdapterTexts>(
+  const texts = useMemo(
     () => buildChatMessageAdapterTexts(language),
     [language],
   );
 
   const messages = useMemo(() => {
-    return rawMessages.flatMap((message) => {
-      if (!isVisibleChatMessage(message)) {
-        return [];
-      }
+    const visibleRawMessages = rawMessages.filter(isVisibleChatMessage);
+    const processedLabel = t("chatProcessSummaryProcessed");
+    return visibleRawMessages.flatMap((message) => {
+      const processSummary = buildChatMessageProcessSummary({
+        message,
+        processedLabel,
+      });
+      const processSummaryLabel = processSummary?.label ?? null;
       const cached = messageViewModelCache.get(message);
-      if (cached && cached.language === language) {
+      if (cached && cached.language === language && cached.processSummaryLabel === processSummaryLabel) {
         return [cached.viewModel];
       }
 
@@ -339,6 +311,7 @@ export function ChatMessageListContainer({
           timestamp: uiMessage.meta?.timestamp,
           status: uiMessage.meta?.status,
           inlineTokens: readInlineTokensFromMetadata(message.metadata),
+          processSummary,
         },
         parts: uiMessage.parts as unknown as ChatMessageSource["parts"],
       };
@@ -347,7 +320,7 @@ export function ChatMessageListContainer({
         texts,
       });
 
-      messageViewModelCache.set(message, { language, viewModel });
+      messageViewModelCache.set(message, { language, processSummaryLabel, viewModel });
       return [viewModel];
     });
   }, [language, rawMessages, texts]);
@@ -385,6 +358,7 @@ export function ChatMessageListContainer({
             texts={messageTexts}
             onToolAction={presenter.chatThreadManager.handleToolAction}
             onFileOpen={presenter.chatThreadManager.openFilePreview}
+            renderInlineDisplay={renderChatInlineDisplay}
             renderToolAgent={(agentId) => (
               <AgentIdentityAvatar
                 agentId={agentId}

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

@@ -0,0 +1,59 @@
+import type { NcpMessage } from "@nextclaw/ncp";
+import { describe, expect, it } from "vitest";
+import { buildChatMessageProcessSummary } from "@/features/chat/features/message/utils/chat-message-process-summary.utils";
+
+const baseAssistantMessage = {
+  id: "assistant-1",
+  sessionId: "session-1",
+  role: "assistant",
+  status: "final",
+  timestamp: "2026-03-31T10:03:51.000Z",
+  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.",
+    },
+  ],
+} satisfies NcpMessage;
+
+describe("buildChatMessageProcessSummary", () => {
+  it("does not invent duration when lifecycle timing is absent", () => {
+    expect(
+      buildChatMessageProcessSummary({
+        message: baseAssistantMessage,
+        processedLabel: "Processed",
+      }),
+    ).toEqual({
+      label: "Processed",
+    });
+  });
+
+  it("derives duration from lifecycle startedAt and endedAt", () => {
+    expect(
+      buildChatMessageProcessSummary({
+        message: {
+          ...baseAssistantMessage,
+          lifecycle: {
+            startedAt: "2026-03-31T10:00:00.000Z",
+            endedAt: "2026-03-31T10:03:51.000Z",
+          },
+        },
+        processedLabel: "Processed",
+      }),
+    ).toEqual({
+      label: "Processed 3m 51s",
+    });
+  });
+});

package/src/features/chat/features/message/utils/__tests__/chat-message-show-content-tool-card.utils.test.ts

@@ -29,6 +29,59 @@ const TEXTS: ChatMessageAdapterTexts = {
 };
 
 describe("buildShowContentToolCard", () => {
+  it("builds a show-content action from a normalized show_file result", () => {
+    const card = buildShowContentToolCard({
+      invocation: {
+        status: "result",
+        toolCallId: "call-show-file",
+        toolName: "show_file",
+        result: {
+          ok: true,
+          action: "showContent",
+          request: {
+            target: {
+              type: "file",
+              payload: {
+                path: "docs/example.md",
+                line: 2,
+                viewer: "rendered",
+              },
+            },
+            title: "Example",
+            purpose: "read",
+          },
+        },
+      },
+      actionLabel: "Show content",
+      statusLabel: "Completed",
+    });
+
+    expect(card).toMatchObject({
+      kind: "result",
+      name: "show_file",
+      detail: "Example",
+      statusTone: "success",
+      statusLabel: "Completed",
+      action: {
+        kind: "show-content",
+        label: "Show content",
+        request: {
+          target: {
+            type: "file",
+            payload: {
+              path: "docs/example.md",
+              line: 2,
+              viewer: "rendered",
+            },
+          },
+          title: "Example",
+          purpose: "read",
+          placement: "side_panel",
+        },
+      },
+    });
+  });
+
   it("builds a show-content action from a normalized show_content result", () => {
     const card = buildShowContentToolCard({
       invocation: {
@@ -44,6 +97,7 @@ describe("buildShowContentToolCard", () => {
               payload: {
                 path: "docs/example.md",
                 line: 2,
+                viewer: "rendered",
               },
             },
             title: "Example",
@@ -70,6 +124,7 @@ describe("buildShowContentToolCard", () => {
             payload: {
               path: "docs/example.md",
               line: 2,
+              viewer: "rendered",
             },
           },
           title: "Example",
@@ -85,7 +140,7 @@ describe("buildShowContentToolCard", () => {
       invocation: {
         status: "result",
         toolCallId: "call-show-content",
-        toolName: "show_content",
+        toolName: "show_panel_app",
         result: {
           ok: true,
           action: "showContent",

package/src/features/chat/features/message/utils/chat-inline-panel-app-card.utils.ts

@@ -15,8 +15,6 @@ export const PANEL_APP_INLINE_IFRAME_SANDBOX = [
   'allow-presentation',
 ].join(' ');
 
-export const PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX = 420;
-
 const PANEL_APP_INLINE_CARD_SEARCH_PARAMS = {
   nextclawDisplayMode: 'card',
   nextclawPlacement: 'inline',

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

@@ -0,0 +1,80 @@
+import type { NcpMessage } from "@nextclaw/ncp";
+import type { ChatMessageProcessSummarySource } from "@/features/chat/types/chat-message.types";
+
+type BuildChatMessageProcessSummaryParams = {
+  message: NcpMessage;
+  processedLabel: string;
+};
+
+function isAssistantProcessPart(part: NcpMessage["parts"][number]): boolean {
+  return part.type === "reasoning" || part.type === "tool-invocation";
+}
+
+function isAssistantFinalContentPart(
+  part: NcpMessage["parts"][number],
+): boolean {
+  if (part.type === "text" || part.type === "rich-text") {
+    return part.text.trim().length > 0;
+  }
+  return part.type === "file" || part.type === "source" || part.type === "card";
+}
+
+function hasCollapsibleAssistantProcess(message: NcpMessage): boolean {
+  if (
+    message.role !== "assistant" ||
+    message.status === "pending" ||
+    message.status === "streaming"
+  ) {
+    return false;
+  }
+  let lastProcessPartIndex = -1;
+  for (let index = message.parts.length - 1; index >= 0; index -= 1) {
+    const part = message.parts[index];
+    if (part && isAssistantProcessPart(part)) {
+      lastProcessPartIndex = index;
+      break;
+    }
+  }
+  return (
+    lastProcessPartIndex >= 0 &&
+    lastProcessPartIndex < message.parts.length - 1 &&
+    message.parts
+      .slice(lastProcessPartIndex + 1)
+      .some(isAssistantFinalContentPart)
+  );
+}
+
+function formatLifecycleDuration(message: NcpMessage): string | null {
+  const startedAt = message.lifecycle?.startedAt;
+  const endedAt = message.lifecycle?.endedAt;
+  if (!startedAt || !endedAt) {
+    return null;
+  }
+  const started = Date.parse(startedAt);
+  const ended = Date.parse(endedAt);
+  if (!Number.isFinite(started) || !Number.isFinite(ended) || ended < started) {
+    return null;
+  }
+  const totalSeconds = Math.round((ended - started) / 1000);
+  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`;
+}
+
+export function buildChatMessageProcessSummary({
+  message,
+  processedLabel,
+}: BuildChatMessageProcessSummaryParams): ChatMessageProcessSummarySource | undefined {
+  if (!hasCollapsibleAssistantProcess(message)) {
+    return undefined;
+  }
+  const duration = formatLifecycleDuration(message);
+  return { label: duration ? `${processedLabel} ${duration}` : processedLabel };
+}

package/src/features/chat/features/message/utils/chat-message-show-content-tool-card.utils.ts

@@ -8,7 +8,7 @@ import type {
   ToolCardViewSource,
 } from "./chat-message-tool-card.utils";
 
-const SHOW_CONTENT_TOOL_NAME = "show_content";
+const SHOW_CONTENT_TOOL_NAMES = ["show_content", "show_file", "show_url", "show_panel_app"];
 
 type ShowContentTargetType = ChatUiShowContentRequest["target"]["type"];
 
@@ -48,6 +48,14 @@ function readPlacement(value: unknown): ChatUiShowContentRequest["placement"] {
     : undefined;
 }
 
+function readFileViewer(value: unknown): NonNullable<
+  Extract<ChatUiShowContentRequest["target"], { type: "file" }>["payload"]["viewer"]
+> | undefined {
+  return value === "auto" || value === "source" || value === "rendered"
+    ? value
+    : undefined;
+}
+
 function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null {
   if (!isRecord(value) || !isRecord(value.target)) {
     return null;
@@ -77,6 +85,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
           path,
           line: readOptionalPositiveInteger(payload.line),
           column: readOptionalPositiveInteger(payload.column),
+          viewer: readFileViewer(payload.viewer),
         },
       },
       title,
@@ -150,7 +159,7 @@ export function buildShowContentToolCard(params: {
     invocation,
     statusLabel,
   } = params;
-  if (invocation.toolName !== SHOW_CONTENT_TOOL_NAME) {
+  if (!SHOW_CONTENT_TOOL_NAMES.includes(invocation.toolName)) {
     return null;
   }
   const request = readShowContentResult(invocation.result);
@@ -175,7 +184,7 @@ export function buildShowContentToolCard(params: {
     : undefined;
   return {
     kind: "result",
-    name: SHOW_CONTENT_TOOL_NAME,
+    name: invocation.toolName,
     detail: summarizeShowContentRequest(request),
     text: undefined,
     outputData: invocation.result,

package/src/features/chat/features/message/utils/chat-message-texts.utils.ts

@@ -0,0 +1,60 @@
+import type { ChatMessageTexts } from "@nextclaw/agent-chat-ui";
+import type { ChatMessageAdapterTexts } from "@/features/chat/features/message/utils/chat-message.utils";
+import { t } from "@/shared/lib/i18n";
+
+export function buildChatMessageAdapterTexts(
+  language: string,
+): ChatMessageAdapterTexts {
+  void language;
+  return {
+    roleLabels: {
+      user: t("chatRoleUser"),
+      assistant: t("chatRoleAssistant"),
+      tool: t("chatRoleTool"),
+      system: t("chatRoleSystem"),
+      fallback: t("chatRoleMessage"),
+    },
+    reasoningLabel: t("chatReasoning"),
+    toolCallLabel: t("chatToolCall"),
+    toolResultLabel: t("chatToolResult"),
+    toolInputLabel: t("chatToolInput"),
+    toolNoOutputLabel: t("chatToolNoOutput"),
+    toolOutputLabel: t("chatToolOutput"),
+    toolStatusPreparingLabel: t("chatToolStatusPreparing"),
+    toolStatusRunningLabel: t("chatToolStatusRunning"),
+    toolStatusCompletedLabel: t("chatToolStatusCompleted"),
+    toolStatusFailedLabel: t("chatToolStatusFailed"),
+    toolStatusCancelledLabel: t("chatToolStatusCancelled"),
+    showContentActionLabel: t("chatShowContentAction"),
+    imageAttachmentLabel: t("chatImageAttachment"),
+    fileAttachmentLabel: t("chatFileAttachment"),
+    unknownPartLabel: t("chatUnknownPart"),
+  };
+}
+
+export function buildChatMessageTexts(
+  language: string,
+): ChatMessageTexts {
+  void language;
+  return {
+    copyCodeLabel: t("chatCodeCopy"),
+    copiedCodeLabel: t("chatCodeCopied"),
+    copyMessageLabel: t("chatMessageCopy"),
+    copiedMessageLabel: t("chatMessageCopied"),
+    typingLabel: t("chatTyping"),
+    attachmentOpenLabel: t("chatAttachmentOpen"),
+    attachmentAttachedLabel: t("chatAttachmentAttached"),
+    attachmentCategoryLabels: {
+      archive: t("chatAttachmentCategoryArchive"),
+      audio: t("chatAttachmentCategoryAudio"),
+      code: t("chatAttachmentCategoryCode"),
+      data: t("chatAttachmentCategoryData"),
+      document: t("chatAttachmentCategoryDocument"),
+      generic: t("chatAttachmentCategoryGeneric"),
+      image: t("chatAttachmentCategoryImage"),
+      pdf: t("chatAttachmentCategoryPdf"),
+      sheet: t("chatAttachmentCategorySheet"),
+      video: t("chatAttachmentCategoryVideo"),
+    },
+  };
+}

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

@@ -7,6 +7,7 @@ import type {
 import type {
   ChatMessageAdapterTexts,
   ChatMessagePartSource,
+  ChatMessageProcessSummarySource,
 } from "@/features/chat/types/chat-message.types";
 
 export type {
@@ -21,6 +22,7 @@ export type ChatMessageSource = {
     timestamp?: string;
     status?: string;
     inlineTokens?: ChatInlineTokenSource[];
+    processSummary?: ChatMessageProcessSummarySource;
   };
   parts: ChatMessagePartSource[];
 };
@@ -79,6 +81,7 @@ export function adaptChatMessage(
     roleLabel: resolveRoleLabel(message.role, params.texts.roleLabels),
     timestampLabel: params.formatTimestamp(resolveMessageTimestamp(message)),
     status: message.meta?.status,
+    processSummary: message.meta?.processSummary,
     parts: message.parts
       .map((part) =>
         adaptChatMessagePart({

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-agent-runtime.test.tsx

@@ -220,6 +220,45 @@ describe("useNcpAgentRuntime", () => {
     expect(client.abort).toHaveBeenCalledWith({ sessionId: "session-running" });
   });
 
+  it("clears the local running state when the live stream publishes message.abort", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({ sessionId: "session-running", client, manager: manager as never }),
+    );
+
+    await act(async () => {
+      await client.emit({
+        type: NcpEventType.RunStarted,
+        payload: {
+          sessionId: "session-running",
+          messageId: "assistant-1",
+          runId: "run-1",
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.isRunning).toBe(true);
+      expect(result.current.activeRunId).toBe("run-1");
+    });
+
+    await act(async () => {
+      await client.emit({
+        type: NcpEventType.MessageAbort,
+        payload: {
+          sessionId: "session-running",
+          messageId: "assistant-1",
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.isRunning).toBe(false);
+      expect(result.current.activeRunId).toBeNull();
+    });
+  });
+
   it("uses the hydrated live stream as the only event source while sending to an existing session", async () => {
     const client = new ExistingSessionLiveClient();
     const manager = new DefaultNcpAgentConversationStateManager();

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

@@ -70,7 +70,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                       icon={<Plus className="h-3.5 w-3.5" />}
                       label={actionLabel}
                       tooltip={false}
-                      className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                      className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900"
                     />
                   </PopoverTrigger>
                   <PopoverContent
@@ -91,7 +91,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                 <IconActionButton
                   icon={<Plus className="h-3.5 w-3.5" />}
                   label={actionLabel}
-                  className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900"
                   onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
                 />
               )}

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

@@ -230,7 +230,7 @@ export function ChatSidebarSessionItem({
       className={cn(
         'w-full rounded-xl px-3 py-2.5 text-left transition-all text-[13px]',
         active
-          ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+          ? 'bg-gray-200/80 text-gray-900 font-semibold shadow-sm'
           : 'text-gray-700 hover:bg-gray-200/60 hover:text-gray-900'
       )}
     >