@nextclaw/ui 0.12.11 → 0.12.13

package/src/{components/chat → features/chat/components}/chat-session-workspace-panel-nav.tsx

@@ -1,15 +1,10 @@
 import { FileCode2, MessageSquareText, X } from "lucide-react";
-import type { ResolvedChildSessionTab } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
-import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
-import { AgentIdentityAvatar } from "@/components/common/agent-identity";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+import type { ResolvedChildSessionTab } from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/components/ui/tooltip";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 export type WorkspaceSelection =
   | {
@@ -96,10 +91,7 @@ export function resolveWorkspaceSelection(params: {
   return null;
 }
 
-function WorkspaceTabIcon({
-  agentId,
-  kind,
-}: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
+function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
   if (kind === "file") {
     return <FileCode2 className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
   }
@@ -116,11 +108,7 @@ function WorkspaceTabIcon({
   return <MessageSquareText className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
 }
 
-function WorkspaceTabItem({
-  tab,
-}: {
-  tab: WorkspaceTabViewModel;
-}) {
+function WorkspaceTabItem({ tab }: { tab: WorkspaceTabViewModel }) {
   return (
     <TooltipProvider delayDuration={250}>
       <Tooltip>

package/src/{components/chat → features/chat/components}/chat-session-workspace-panel.tsx

@@ -5,31 +5,31 @@ import type {
   ChatToolActionViewModel,
 } from "@nextclaw/agent-chat-ui";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import { ChatMessageListContainer } from "@/components/chat/containers/chat-message-list.container";
+import { ChatMessageListContainer } from "@/features/chat/components/conversation/chat-message-list.container";
 import {
   useNcpChildSessionTabsView,
   type ResolvedChildSessionTab,
-} from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
-import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
+} from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
+import { useNcpSessionConversation } from "@/features/chat/hooks/use-ncp-session-conversation";
 import {
   shouldShowUnreadSessionIndicator,
   useChatSessionListStore,
-} from "@/components/chat/stores/chat-session-list.store";
+} from "@/features/chat/stores/chat-session-list.store";
 import type {
   ChatChildSessionTab,
   ChatWorkspaceFileTab,
-} from "@/components/chat/stores/chat-thread.store";
+} from "@/features/chat/stores/chat-thread.store";
 import {
   readWorkspaceFileTitle,
   resolveWorkspaceSelection,
   type WorkspaceTabViewModel,
   WorkspaceTabsBar,
-} from "@/components/chat/chat-session-workspace-panel-nav";
-import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
-import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
-import { AgentIdentityAvatar } from "@/components/common/agent-identity";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+} from "./chat-session-workspace-panel-nav";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
+import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type ChatSessionWorkspacePanelProps = {
   childSessionTabs: readonly ChatChildSessionTab[];
@@ -37,6 +37,7 @@ type ChatSessionWorkspacePanelProps = {
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
   activeWorkspaceFileKey: string | null;
   sessionProjectRoot: string | null;
+  displayMode?: "docked" | "overlay";
   onSelectSession: (sessionKey: string) => void;
   onSelectFile: (fileKey: string) => void;
   onCloseFile: (fileKey: string) => void;
@@ -163,12 +164,77 @@ function WorkspaceActiveChildHeader({
   );
 }
 
+function buildWorkspaceTabsViewModel(params: {
+  resolvedChildTabs: ResolvedChildSessionTab[];
+  workspaceFileTabs: readonly ChatWorkspaceFileTab[];
+  activeSelection: ReturnType<typeof resolveWorkspaceSelection>;
+  optimisticReadAtBySessionKey: Record<string, string>;
+  onSelectSession: (sessionKey: string) => void;
+  onSelectFile: (fileKey: string) => void;
+  onCloseFile: (fileKey: string) => void;
+}): WorkspaceTabViewModel[] {
+  const {
+    resolvedChildTabs,
+    workspaceFileTabs,
+    activeSelection,
+    optimisticReadAtBySessionKey,
+    onSelectSession,
+    onSelectFile,
+    onCloseFile,
+  } = params;
+
+  const childTabs = resolvedChildTabs.map((tab) => {
+    const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
+    const effectiveReadAt =
+      optimisticReadAt && tab.readAt
+        ? optimisticReadAt.localeCompare(tab.readAt) > 0
+          ? optimisticReadAt
+          : tab.readAt
+        : optimisticReadAt ?? tab.readAt;
+    return {
+      key: `child:${tab.sessionKey}`,
+      kind: "child-session" as const,
+      title: tab.title,
+      tooltip: tab.title,
+      agentId: tab.agentId,
+      active:
+        activeSelection?.kind === "child-session" &&
+        activeSelection.tab.sessionKey === tab.sessionKey,
+      showUnreadDot: shouldShowUnreadSessionIndicator({
+        active:
+          activeSelection?.kind === "child-session" &&
+          activeSelection.tab.sessionKey === tab.sessionKey,
+        lastMessageAt: tab.lastMessageAt,
+        readAt: effectiveReadAt,
+        runStatus: tab.runStatus,
+      }),
+      onSelect: () => onSelectSession(tab.sessionKey),
+    };
+  });
+
+  const fileTabs = workspaceFileTabs.map((file) => ({
+    key: `file:${file.key}`,
+    kind: "file" as const,
+    title: readWorkspaceFileTitle(file),
+    tooltip: file.path,
+    viewMode: file.viewMode,
+    active:
+      activeSelection?.kind === "file" &&
+      activeSelection.file.key === file.key,
+    onSelect: () => onSelectFile(file.key),
+    onClose: () => onCloseFile(file.key),
+  }));
+
+  return [...childTabs, ...fileTabs];
+}
+
 export function ChatSessionWorkspacePanel({
   childSessionTabs,
   activeChildSessionKey,
   workspaceFileTabs,
   activeWorkspaceFileKey,
   sessionProjectRoot,
+  displayMode = "docked",
   onSelectSession,
   onSelectFile,
   onCloseFile,
@@ -207,66 +273,40 @@ export function ChatSessionWorkspacePanel({
     );
   }, [activeSelection, presenter]);
 
-  const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(() => {
-    const childTabs = resolvedChildTabs.map((tab) => {
-      const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
-      const effectiveReadAt =
-        optimisticReadAt && tab.readAt
-          ? optimisticReadAt.localeCompare(tab.readAt) > 0
-            ? optimisticReadAt
-            : tab.readAt
-          : optimisticReadAt ?? tab.readAt;
-      return {
-        key: `child:${tab.sessionKey}`,
-        kind: "child-session" as const,
-        title: tab.title,
-        tooltip: tab.title,
-        agentId: tab.agentId,
-        active:
-          activeSelection?.kind === "child-session" &&
-          activeSelection.tab.sessionKey === tab.sessionKey,
-        showUnreadDot: shouldShowUnreadSessionIndicator({
-          active:
-            activeSelection?.kind === "child-session" &&
-            activeSelection.tab.sessionKey === tab.sessionKey,
-          lastMessageAt: tab.lastMessageAt,
-          readAt: effectiveReadAt,
-          runStatus: tab.runStatus,
-        }),
-        onSelect: () => onSelectSession(tab.sessionKey),
-      };
-    });
-
-    const fileTabs = workspaceFileTabs.map((file) => ({
-      key: `file:${file.key}`,
-      kind: "file" as const,
-      title: readWorkspaceFileTitle(file),
-      tooltip: file.path,
-      viewMode: file.viewMode,
-      active:
-        activeSelection?.kind === "file" &&
-        activeSelection.file.key === file.key,
-      onSelect: () => onSelectFile(file.key),
-      onClose: () => onCloseFile(file.key),
-    }));
-
-    return [...childTabs, ...fileTabs];
-  }, [
-    activeSelection,
-    onCloseFile,
-    onSelectFile,
-    onSelectSession,
-    optimisticReadAtBySessionKey,
-    resolvedChildTabs,
-    workspaceFileTabs,
-  ]);
+  const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(
+    () =>
+      buildWorkspaceTabsViewModel({
+        resolvedChildTabs,
+        workspaceFileTabs,
+        activeSelection,
+        optimisticReadAtBySessionKey,
+        onSelectSession,
+        onSelectFile,
+        onCloseFile,
+      }),
+    [
+      activeSelection,
+      onCloseFile,
+      onSelectFile,
+      onSelectSession,
+      optimisticReadAtBySessionKey,
+      resolvedChildTabs,
+      workspaceFileTabs,
+    ],
+  );
 
   if (!activeSelection) {
     return null;
   }
 
   return (
-    <aside className="hidden shrink-0 border-l border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex md:w-[26rem] lg:w-[30rem] xl:w-[34rem]">
+    <aside
+      className={cn(
+        displayMode === "overlay"
+          ? "fixed inset-0 z-40 flex bg-white"
+          : "hidden shrink-0 border-l border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex md:w-[26rem] lg:w-[30rem] xl:w-[34rem]",
+      )}
+    >
       <div className="flex h-full min-h-0 w-full flex-col">
         <div className="flex items-center justify-between gap-3 border-b border-gray-200/70 px-4 py-2.5">
           <button

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

@@ -0,0 +1,28 @@
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+type ChatSidebarListModeSwitchProps = { isProjectFirstView: boolean; onSelectMode: (mode: 'time-first' | 'project-first') => void };
+
+export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }: ChatSidebarListModeSwitchProps) {
+  return (
+    <div className="flex items-center gap-1.5 text-[11px]">
+      <button
+        type="button"
+        aria-pressed={!isProjectFirstView}
+        onClick={() => onSelectMode('time-first')}
+        className={cn('transition-colors', isProjectFirstView ? 'text-gray-400 hover:text-gray-600' : 'font-medium text-gray-600')}
+      >
+        {t('chatSidebarViewTime')}
+      </button>
+      <span className="text-gray-300">/</span>
+      <button
+        type="button"
+        aria-pressed={isProjectFirstView}
+        onClick={() => onSelectMode('project-first')}
+        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-gray-600' : 'text-gray-400 hover:text-gray-600')}
+      >
+        {t('chatSidebarViewProject')}
+      </button>
+    </div>
+  );
+}

package/src/{components/chat → features/chat/components}/chat-sidebar-project-groups.tsx

@@ -1,11 +1,11 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import { Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ChatSessionTypeOptionItem } from '@/components/chat/chat-session-type-option-item';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
-import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
-import { t } from '@/lib/i18n';
+import { Button } from '@/shared/components/ui/button';
+import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import type { NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
+import { t } from '@/shared/lib/i18n';
 
 export type ChatSidebarProjectGroup = {
   projectRoot: string;

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

@@ -1,13 +1,13 @@
-import type { SessionEntryView } from '@/api/types';
-import { AgentAvatar } from '@/components/common/AgentAvatar';
-import { SessionContextIconNode } from '@/components/common/session-context-icon';
-import { SessionRunBadge } from '@/components/common/SessionRunBadge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { type SessionContextView } from '@/lib/session-context.utils';
-import type { SessionRunStatus } from '@/lib/session-run-status';
-import { cn } from '@/lib/utils';
-import { formatDateTime, t } from '@/lib/i18n';
+import type { SessionEntryView } from '@/shared/lib/api';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
+import { SessionContextIconNode } from '@/features/chat/components/session/session-context-icon';
+import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { type SessionContextView } from '@/features/chat/utils/session-context.utils';
+import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
+import { cn } from '@/shared/lib/utils';
+import { formatDateTime, t } from '@/shared/lib/i18n';
 import { Check, GitBranch, Pencil, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {

package/src/{components/chat/ChatWelcome.test.tsx → features/chat/components/chat-welcome.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ChatWelcome } from '@/components/chat/ChatWelcome';
+import { ChatWelcome } from './chat-welcome';
 
 describe('ChatWelcome', () => {
   it('renders a lightweight draft agent select and allows switching', () => {

package/src/{components/chat/ChatWelcome.tsx → features/chat/components/chat-welcome.tsx}

@@ -1,15 +1,10 @@
-import type { AgentProfileView } from '@/api/types';
-import { AgentAvatar } from '@/components/common/AgentAvatar';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
-import { t } from '@/lib/i18n';
+import type { AgentProfileView } from '@/shared/lib/api';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
 import { Bot, BrainCircuit, AlarmClock, MessageCircle } from 'lucide-react';
 
-type ChatWelcomeProps = {
-  onCreateSession: () => void;
-  agents: AgentProfileView[];
-  selectedAgentId: string;
-  onSelectAgent: (agentId: string) => void;
-};
+type ChatWelcomeProps = { onCreateSession: () => void; agents: AgentProfileView[]; selectedAgentId: string; onSelectAgent: (agentId: string) => void };
 
 const capabilities = [
   {

package/src/features/chat/components/config/sessions-config-detail-pane.tsx

@@ -0,0 +1,244 @@
+import { useState } from 'react';
+import type { NcpMessageView, NcpSessionSummaryView, SessionEntryView } from '@/shared/lib/api';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import { useDeleteNcpSession, useNcpSessionMessages, useUpdateNcpSession } from '@/shared/hooks/use-config';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
+import { cn } from '@/shared/lib/utils';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { Bot, Hash, Inbox, MessageCircle, RefreshCw, Settings as SettingsIcon, User } from 'lucide-react';
+function normalizeNcpRole(role: NcpMessageView['role']): 'user' | 'assistant' | 'system' | 'tool' {
+  if (role === 'service') {
+    return 'system';
+  }
+  if (role === 'tool') {
+    return 'tool';
+  }
+  return role;
+}
+function extractNcpMessageText(message: NcpMessageView): string {
+  const parts: string[] = [];
+  for (const part of message.parts) {
+    if (part.type === 'text' || part.type === 'rich-text' || part.type === 'reasoning') {
+      parts.push(part.text);
+      continue;
+    }
+    if (part.type !== 'tool-invocation') {
+      continue;
+    }
+    const prefix = part.toolName?.trim() ? `[${part.toolName.trim()}]` : '[tool]';
+    if (part.state === 'result' && typeof part.result === 'string' && part.result.trim()) {
+      parts.push(`${prefix} ${part.result.trim()}`);
+      continue;
+    }
+    parts.push(prefix);
+  }
+  return parts.join('\n').trim();
+}
+function SessionMessageBubble({ message }: { message: NcpMessageView }) {
+  const role = normalizeNcpRole(message.role);
+  const isUser = role === 'user';
+  const content = extractNcpMessageText(message);
+  return (
+    <div className={cn('flex w-full mb-6', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[85%] rounded-[1.25rem] p-5 flex gap-3 text-sm',
+          isUser ? 'bg-primary text-white rounded-tr-sm' : 'bg-gray-50 text-gray-800 rounded-tl-sm border border-gray-100/50'
+        )}
+      >
+        <div className="shrink-0 pt-0.5">
+          {isUser ? <User className="w-4 h-4 text-primary-100" /> : <Bot className="w-4 h-4 text-gray-400" />}
+        </div>
+        <div className="flex-1 space-y-1 overflow-x-hidden">
+          <div className="flex items-baseline justify-between gap-4 mb-2">
+            <span className={cn('font-semibold text-xs capitalize', isUser ? 'text-primary-50' : 'text-gray-900')}>
+              {role}
+            </span>
+            <span className={cn('text-[10px]', isUser ? 'text-primary-200' : 'text-gray-400')}>
+              {formatDateTime(message.timestamp)}
+            </span>
+          </div>
+          <div className="whitespace-pre-wrap break-words leading-relaxed text-[15px]">{content || '-'}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+function SessionMetadataEditor(props: {
+  session: SessionEntryView;
+  isPending: boolean;
+  onSave: (data: { label: string; preferredModel: string }) => void;
+}) {
+  const [isEditingMeta, setIsEditingMeta] = useState(false);
+  const [draftLabel, setDraftLabel] = useState(props.session.label || '');
+  const [draftModel, setDraftModel] = useState(props.session.preferredModel || '');
+  const handleSave = () => {
+    props.onSave({ label: draftLabel, preferredModel: draftModel });
+    setIsEditingMeta(false);
+  };
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setIsEditingMeta((value) => !value)}
+        className={cn(
+          'h-8.5 rounded-lg shadow-none border-gray-200 transition-all text-xs font-semibold',
+          isEditingMeta ? 'bg-gray-100 text-gray-900' : 'hover:bg-gray-50 hover:text-gray-900'
+        )}
+      >
+        <SettingsIcon className="w-3.5 h-3.5 mr-1.5" />
+        {t('sessionsMetadata')}
+      </Button>
+      {isEditingMeta ? (
+        <div className="flex items-center gap-3 bg-gray-50/50 p-3 rounded-lg border border-gray-100 animate-slide-in">
+          <Input
+            placeholder={t('sessionsLabelPlaceholder')}
+            value={draftLabel}
+            onChange={(event) => setDraftLabel(event.target.value)}
+            className="h-8 text-sm bg-white"
+          />
+          <Input
+            placeholder={t('sessionsModelPlaceholder')}
+            value={draftModel}
+            onChange={(event) => setDraftModel(event.target.value)}
+            className="h-8 text-sm bg-white"
+          />
+          <Button size="sm" onClick={handleSave} className="h-8 px-4 shrink-0 shadow-none" disabled={props.isPending}>
+            {t('sessionsSaveMeta')}
+          </Button>
+        </div>
+      ) : null}
+    </>
+  );
+}
+function SessionEmptyState() {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center text-gray-400 p-8 h-full bg-white">
+      <div className="w-20 h-20 bg-gray-50 rounded-3xl flex items-center justify-center mb-6 border border-gray-100 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.02)] rotate-3">
+        <Inbox className="h-8 w-8 text-gray-300 -rotate-3" />
+      </div>
+      <h3 className="text-lg font-bold text-gray-900 mb-2">{t('sessionsNoSelectionTitle')}</h3>
+      <p className="text-sm text-center max-w-sm leading-relaxed">{t('sessionsNoSelectionDescription')}</p>
+    </div>
+  );
+}
+export function SessionsConfigDetailPane(props: {
+  sessionKey: string | null;
+  session: SessionEntryView | null;
+  summary: NcpSessionSummaryView | null;
+  channelLabel: string | null;
+  onClearSelection: () => void;
+}) {
+  const historyQuery = useNcpSessionMessages(props.sessionKey, 300);
+  const updateSession = useUpdateNcpSession();
+  const deleteSession = useDeleteNcpSession();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const handleSaveMeta = (data: { label: string; preferredModel: string }) => {
+    if (!props.sessionKey) {
+      return;
+    }
+    updateSession.mutate({
+      sessionId: props.sessionKey,
+      data: {
+        label: data.label.trim() || null,
+        preferredModel: data.preferredModel.trim() || null
+      }
+    });
+  };
+  const handleDeleteSession = async () => {
+    if (!props.sessionKey) {
+      return;
+    }
+    const confirmed = await confirm({
+      title: t('sessionsDeleteConfirm') + '?',
+      variant: 'destructive',
+      confirmLabel: t('sessionsDeleteConfirm')
+    });
+    if (!confirmed) {
+      return;
+    }
+    deleteSession.mutate({ sessionId: props.sessionKey }, { onSuccess: () => props.onClearSelection() });
+  };
+  return (
+    <div className="flex-1 min-w-0 flex flex-col overflow-hidden relative bg-white rounded-2xl shadow-sm border border-gray-200">
+      {(updateSession.isPending || deleteSession.isPending) ? (
+        <div className="absolute top-0 left-0 w-full h-1 bg-primary/20 overflow-hidden z-20">
+          <div className="h-full bg-primary animate-pulse w-1/3 rounded-r-full" />
+        </div>
+      ) : null}
+      {props.sessionKey && props.session && props.summary && props.channelLabel ? (
+        <>
+          <div className="shrink-0 border-b border-gray-100 bg-white px-4 py-4 z-10 space-y-4 sm:px-8 sm:py-5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="h-12 w-12 rounded-[14px] bg-gray-50 border border-gray-100 flex items-center justify-center text-gray-400 shrink-0">
+                  <Hash className="h-6 w-6" />
+                </div>
+                <div>
+                  <div className="flex items-center gap-2.5 mb-1.5">
+                    <h3 className="text-lg font-bold text-gray-900 tracking-tight">{props.session.label?.trim() || props.session.key.split(':').pop() || props.session.key}</h3>
+                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 uppercase tracking-widest">
+                      {props.channelLabel}
+                    </span>
+                    {props.summary.status === 'running' ? <SessionRunBadge status="running" className="h-4 w-4" /> : null}
+                  </div>
+                  <div className="text-xs text-gray-500 font-mono break-all line-clamp-1 opacity-70" title={props.sessionKey}>
+                    {props.sessionKey}
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <SessionMetadataEditor
+                  key={props.session.key}
+                  session={props.session}
+                  isPending={updateSession.isPending}
+                  onSave={handleSaveMeta}
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleDeleteSession}
+                  className="h-8.5 rounded-lg shadow-none hover:bg-red-50 hover:text-red-600 hover:border-red-200 border-gray-200 text-xs font-semibold text-red-500"
+                >
+                  {t('delete')}
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto p-4 relative [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-gray-300/80 [&::-webkit-scrollbar-thumb]:rounded-full sm:p-6">
+            {historyQuery.isLoading ? (
+              <div className="absolute inset-0 flex items-center justify-center bg-gray-50/50 backdrop-blur-sm z-10">
+                <div className="flex flex-col items-center gap-3 animate-pulse">
+                  <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+                  <span className="text-sm font-medium text-gray-500">{t('sessionsHistoryLoading')}</span>
+                </div>
+              </div>
+            ) : null}
+            {historyQuery.error ? (
+              <div className="text-center p-6 bg-red-50 rounded-xl text-red-600 border border-red-100 text-sm">
+                {(historyQuery.error as Error).message}
+              </div>
+            ) : null}
+            {!historyQuery.isLoading && historyQuery.data?.messages.length === 0 ? (
+              <div className="h-full flex flex-col items-center justify-center text-gray-400">
+                <MessageCircle className="w-12 h-12 mb-3 text-gray-300" />
+                <p className="text-sm">{t('sessionsEmpty')}</p>
+              </div>
+            ) : null}
+            <div className="max-w-3xl mx-auto">
+              {(historyQuery.data?.messages ?? []).map((message) => (
+                <SessionMessageBubble key={message.id} message={message} />
+              ))}
+            </div>
+          </div>
+        </>
+      ) : (
+        <SessionEmptyState />
+      )}
+      <ConfirmDialog />
+    </div>
+  );
+}

package/src/{components/chat → features/chat/components/conversation}/chat-attachment-upload-limit.test.ts

@@ -1,8 +1,5 @@
+import { DEFAULT_NCP_ATTACHMENT_MAX_BYTES, uploadFilesAsNcpDraftAttachments } from '@nextclaw/ncp-react';
 import { describe, expect, it, vi } from 'vitest';
-import {
-  DEFAULT_NCP_ATTACHMENT_MAX_BYTES,
-  uploadFilesAsNcpDraftAttachments
-} from '../../../../ncp-packages/nextclaw-ncp-react/src/attachments/ncp-attachments.ts';
 
 describe('ncp attachment upload limit', () => {
   it('accepts files larger than the previous 10MB cap', async () => {