@nextclaw/ui 0.12.8 → 0.12.10

package/src/components/chat/ncp/tests/ncp-chat-thread.manager.test.ts

@@ -0,0 +1,189 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { appQueryClient } from '@/app-query-client';
+import { NcpChatThreadManager } from '@/components/chat/ncp/ncp-chat-thread.manager';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
+
+const { deleteNcpSessionMock, deleteSummaryMock } = vi.hoisted(() => ({
+  deleteNcpSessionMock: vi.fn(async () => ({ deleted: true, sessionId: 'parent-session-1' })),
+  deleteSummaryMock: vi.fn(),
+}));
+
+vi.mock('@/api/ncp-session', () => ({
+  deleteNcpSession: deleteNcpSessionMock,
+}));
+
+vi.mock('@/api/ncp-session-query-cache', () => ({
+  deleteNcpSessionSummaryInQueryClient: deleteSummaryMock,
+}));
+
+describe('NcpChatThreadManager', () => {
+  beforeEach(() => {
+    useChatSessionListStore.setState({
+      optimisticReadAtBySessionKey: {},
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'parent-session-1',
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: 'parent-session-1',
+        workspacePanelParentKey: null,
+        childSessionTabs: [
+          {
+            sessionKey: 'child-session-1',
+            parentSessionKey: 'parent-session-1',
+            label: 'Child Session 1',
+            agentId: 'reviewer',
+          },
+        ],
+        activeChildSessionKey: null,
+      },
+    });
+  });
+
+  it('opens the child-session panel for the requested parent session and keeps focus on the chosen child', () => {
+    const uiManager = {
+      goToSession: vi.fn(),
+      goToChatRoot: vi.fn(),
+      goToProviders: vi.fn(),
+      confirm: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatThreadManager>[0];
+
+    const manager = new NcpChatThreadManager(
+      uiManager,
+      {} as ConstructorParameters<typeof NcpChatThreadManager>[1],
+      {} as ConstructorParameters<typeof NcpChatThreadManager>[2],
+    );
+
+    manager.openChildSessionPanel({
+      parentSessionKey: 'parent-session-1',
+      activeChildSessionKey: 'child-session-1',
+    });
+
+    expect(useChatThreadStore.getState().snapshot.workspacePanelParentKey).toBe('parent-session-1');
+    expect(useChatThreadStore.getState().snapshot.activeChildSessionKey).toBe('child-session-1');
+    expect(uiManager.goToSession).not.toHaveBeenCalled();
+  });
+
+  it('routes to the parent session before opening the child-session panel when needed', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'another-session',
+      },
+    });
+    const uiManager = {
+      goToSession: vi.fn(),
+      goToChatRoot: vi.fn(),
+      goToProviders: vi.fn(),
+      confirm: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatThreadManager>[0];
+
+    const manager = new NcpChatThreadManager(
+      uiManager,
+      {} as ConstructorParameters<typeof NcpChatThreadManager>[1],
+      {} as ConstructorParameters<typeof NcpChatThreadManager>[2],
+    );
+
+    manager.openChildSessionPanel({
+      parentSessionKey: 'parent-session-1',
+      activeChildSessionKey: 'child-session-1',
+    });
+
+    expect(uiManager.goToSession).toHaveBeenCalledWith('parent-session-1');
+  });
+
+  it('keeps preview and diff for the same file as separate workspace tabs', () => {
+    const uiManager = {
+      goToSession: vi.fn(),
+      goToChatRoot: vi.fn(),
+      goToProviders: vi.fn(),
+      confirm: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatThreadManager>[0];
+
+    const manager = new NcpChatThreadManager(
+      uiManager,
+      {} as ConstructorParameters<typeof NcpChatThreadManager>[1],
+      {} as ConstructorParameters<typeof NcpChatThreadManager>[2],
+    );
+
+    manager.openFilePreview({
+      path: 'README.md',
+      label: 'README.md',
+      viewMode: 'preview',
+    });
+    manager.openFilePreview({
+      path: 'README.md',
+      label: 'README.md',
+      viewMode: 'diff',
+      beforeText: 'old\n',
+      afterText: 'new\n',
+    });
+
+    expect(useChatThreadStore.getState().snapshot.workspaceFileTabs).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          key: 'parent-session-1::preview::README.md',
+          path: 'README.md',
+          viewMode: 'preview',
+        }),
+        expect.objectContaining({
+          key: 'parent-session-1::diff::README.md',
+          path: 'README.md',
+          viewMode: 'diff',
+        }),
+      ]),
+    );
+  });
+
+  it('clears the selected thread state after deleting the current session', async () => {
+    const removeQueries = vi.spyOn(appQueryClient, 'removeQueries').mockImplementation(async () => undefined);
+    const uiManager = {
+      goToSession: vi.fn(),
+      goToChatRoot: vi.fn(),
+      goToProviders: vi.fn(),
+      confirm: vi.fn(async () => true),
+    } as unknown as ConstructorParameters<typeof NcpChatThreadManager>[0];
+    const sessionListManager = {
+      setSelectedSessionKey: vi.fn((value: string | null) => {
+        useChatSessionListStore.getState().setSnapshot({
+          selectedSessionKey: value,
+        });
+      }),
+    } as unknown as ConstructorParameters<typeof NcpChatThreadManager>[1];
+    const streamActionsManager = {
+      resetStreamState: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatThreadManager>[2];
+    const manager = new NcpChatThreadManager(
+      uiManager,
+      sessionListManager,
+      streamActionsManager,
+    );
+
+    await (manager as unknown as { deleteCurrentSession: () => Promise<void> }).deleteCurrentSession();
+
+    expect(sessionListManager.setSelectedSessionKey).toHaveBeenCalledWith(null);
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      sessionKey: null,
+      canDeleteSession: false,
+      messages: [],
+      workspacePanelParentKey: null,
+      childSessionTabs: [],
+      activeChildSessionKey: null,
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+    });
+    expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
+    expect(deleteSummaryMock).toHaveBeenCalledWith(appQueryClient, 'parent-session-1');
+    expect(removeQueries).toHaveBeenCalledWith({
+      queryKey: ['ncp-session-messages', 'parent-session-1'],
+    });
+    expect(uiManager.goToChatRoot).toHaveBeenCalledWith({ replace: true });
+
+    removeQueries.mockRestore();
+  });
+});

package/src/components/chat/presenter/chat-presenter-context.tsx

@@ -1,4 +1,8 @@
-import type { ChatComposerNode, ChatToolActionViewModel } from '@nextclaw/agent-chat-ui';
+import type {
+  ChatComposerNode,
+  ChatFileOpenActionViewModel,
+  ChatToolActionViewModel,
+} from '@nextclaw/agent-chat-ui';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
@@ -37,9 +41,16 @@ export type ChatThreadManagerLike = {
   deleteSession: () => void;
   createSession: () => void;
   goToProviders: () => void;
+  openChildSessionPanel: (params: {
+    parentSessionKey: string;
+    activeChildSessionKey?: string | null;
+  }) => void;
+  openFilePreview: (action: ChatFileOpenActionViewModel) => void;
   openSessionFromToolAction: (action: ChatToolActionViewModel) => void;
   selectChildSessionDetail: (sessionKey: string) => void;
-  closeChildSessionDetail: () => void;
+  selectWorkspaceFile: (fileKey: string) => void;
+  closeWorkspaceFile: (fileKey: string) => void;
+  closeWorkspacePanel: () => void;
   goToParentSession: () => void;
 };
 

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

@@ -6,6 +6,7 @@ import { ChatSessionHeaderActions } from '@/components/chat/session-header/chat-
 const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
   onDeleteSession: vi.fn(),
+  onOpenChildSessions: vi.fn(),
 }));
 
 vi.mock('@/components/chat/hooks/use-chat-session-project', () => ({
@@ -20,6 +21,7 @@ describe('ChatSessionHeaderActions', () => {
   beforeEach(() => {
     mocks.updateSessionProject.mockReset();
     mocks.onDeleteSession.mockReset();
+    mocks.onOpenChildSessions.mockReset();
   });
 
   it('keeps only the set-project action in the more-actions menu when a project is already attached', async () => {
@@ -31,6 +33,8 @@ describe('ChatSessionHeaderActions', () => {
         canDeleteSession
         isDeletePending={false}
         projectRoot="/tmp/project-alpha"
+        childSessionCount={0}
+        onOpenChildSessions={mocks.onOpenChildSessions}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
@@ -51,6 +55,8 @@ describe('ChatSessionHeaderActions', () => {
         canDeleteSession={false}
         isDeletePending={false}
         projectRoot={null}
+        childSessionCount={0}
+        onOpenChildSessions={mocks.onOpenChildSessions}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
@@ -60,4 +66,24 @@ describe('ChatSessionHeaderActions', () => {
     expect(screen.getByText('Set Project Directory')).toBeTruthy();
     expect(screen.queryByText('Clear Project Directory')).toBeNull();
   });
+
+  it('shows a dedicated child-session entry button when the current session has child sessions', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ChatSessionHeaderActions
+        sessionKey="session-children"
+        canDeleteSession
+        isDeletePending={false}
+        projectRoot={null}
+        childSessionCount={2}
+        onOpenChildSessions={mocks.onOpenChildSessions}
+        onDeleteSession={mocks.onDeleteSession}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'View child sessions' }));
+
+    expect(mocks.onOpenChildSessions).toHaveBeenCalledTimes(1);
+  });
 });

package/src/components/chat/session-header/chat-session-header-actions.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FolderOpen, MoreHorizontal, Trash2 } from 'lucide-react';
+import { FolderOpen, GitBranch, MoreHorizontal, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useChatSessionProject } from '@/components/chat/hooks/use-chat-session-project';
@@ -12,6 +12,8 @@ type ChatSessionHeaderActionsProps = {
   canDeleteSession: boolean;
   isDeletePending: boolean;
   projectRoot?: string | null;
+  childSessionCount?: number;
+  onOpenChildSessions?: () => void;
   onDeleteSession: () => void;
 };
 
@@ -20,6 +22,8 @@ export function ChatSessionHeaderActions({
   canDeleteSession,
   isDeletePending,
   projectRoot,
+  childSessionCount = 0,
+  onOpenChildSessions,
   onDeleteSession,
 }: ChatSessionHeaderActionsProps) {
   const updateSessionProject = useChatSessionProject();
@@ -46,6 +50,20 @@ export function ChatSessionHeaderActions({
 
   return (
     <>
+      {childSessionCount > 0 && onOpenChildSessions ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="rounded-lg shrink-0 text-gray-400 hover:text-gray-700"
+          aria-label={t('chatSessionOpenChildSessions')}
+          title={t('chatSessionOpenChildSessions')}
+          onClick={onOpenChildSessions}
+          disabled={isBusy}
+        >
+          <GitBranch className="h-4 w-4" />
+        </Button>
+      ) : null}
       <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
         <PopoverTrigger asChild>
           <Button

package/src/components/chat/stores/chat-input.store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { SessionSkillEntryView, ThinkingLevel } from '@/api/types';
+import type { SessionSkillEntryView, SessionTypeIconView, ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-state';
 
@@ -24,6 +24,7 @@ export type ChatInputSnapshot = {
   sessionTypeOptions: Array<{
     value: string;
     label: string;
+    icon?: SessionTypeIconView | null;
     ready?: boolean;
     reason?: string | null;
     reasonMessage?: string | null;

package/src/components/chat/stores/chat-thread.store.ts

@@ -1,8 +1,9 @@
 import { create } from 'zustand';
 import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
+import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
-import type { AgentProfileView } from '@/api/types';
+import type { AgentProfileView, SessionTypeIconView } from '@/api/types';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -11,12 +12,30 @@ export type ChatChildSessionTab = {
   agentId?: string | null;
 };
 
+export type ChatWorkspaceFileTab = {
+  key: string;
+  parentSessionKey: string | null;
+  path: string;
+  label?: string | null;
+  viewMode: 'preview' | 'diff';
+  line?: number | null;
+  column?: number | null;
+  rawText?: string | null;
+  beforeText?: string | null;
+  afterText?: string | null;
+  patchText?: string | null;
+  oldStartLine?: number | null;
+  newStartLine?: number | null;
+  fullLines?: ChatFileOperationLineViewModel[];
+};
+
 export type ChatThreadSnapshot = {
   isProviderStateResolved: boolean;
   modelOptions: ChatModelOption[];
   sessionTypeUnavailable: boolean;
   sessionTypeUnavailableMessage?: string | null;
   sessionTypeLabel?: string | null;
+  sessionTypeIcon?: SessionTypeIconView | null;
   sessionKey: string | null;
   agentId?: string | null;
   agentDisplayName?: string | null;
@@ -34,8 +53,11 @@ export type ChatThreadSnapshot = {
   isAwaitingAssistantOutput: boolean;
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
+  workspacePanelParentKey?: string | null;
   childSessionTabs: ChatChildSessionTab[];
   activeChildSessionKey?: string | null;
+  workspaceFileTabs: ChatWorkspaceFileTab[];
+  activeWorkspaceFileKey?: string | null;
 };
 
 type ChatThreadStore = {
@@ -49,6 +71,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeUnavailable: false,
   sessionTypeUnavailableMessage: null,
   sessionTypeLabel: null,
+  sessionTypeIcon: null,
   sessionKey: null,
   agentId: null,
   agentDisplayName: null,
@@ -66,8 +89,11 @@ const initialSnapshot: ChatThreadSnapshot = {
   isAwaitingAssistantOutput: false,
   parentSessionKey: null,
   parentSessionLabel: null,
+  workspacePanelParentKey: null,
   childSessionTabs: [],
   activeChildSessionKey: null,
+  workspaceFileTabs: [],
+  activeWorkspaceFileKey: null,
 };
 
 export const useChatThreadStore = create<ChatThreadStore>((set) => ({

package/src/components/chat/useChatSessionTypeState.ts

@@ -1,6 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { AgentProfileView, ChatSessionTypeOptionView, SessionEntryView } from '@/api/types';
+import type {
+  AgentProfileView,
+  ChatSessionTypeOptionView,
+  SessionEntryView,
+  SessionTypeIconView
+} from '@/api/types';
 import { t } from '@/lib/i18n';
 
 export const DEFAULT_SESSION_TYPE = 'native';
@@ -8,6 +13,7 @@ export const DEFAULT_SESSION_TYPE = 'native';
 export type ChatSessionTypeOption = {
   value: string;
   label: string;
+  icon: SessionTypeIconView | null;
   ready: boolean;
   reason?: string | null;
   reasonMessage?: string | null;
@@ -71,6 +77,7 @@ export function buildSessionTypeOptions(
     deduped.set(value, {
       value,
       label: option.label?.trim() || resolveSessionTypeLabel(value),
+      icon: option.icon ?? null,
       ready: option.ready ?? true,
       reason: option.reason ?? null,
       reasonMessage: option.reasonMessage ?? null,
@@ -83,6 +90,7 @@ export function buildSessionTypeOptions(
     deduped.set(DEFAULT_SESSION_TYPE, {
       value: DEFAULT_SESSION_TYPE,
       label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
+      icon: null,
       ready: true,
       reason: null,
       reasonMessage: null,
@@ -129,6 +137,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
       options.push({
         value: currentSessionType,
         label: resolveSessionTypeLabel(currentSessionType),
+        icon: null,
         ready: true,
         reason: null,
         reasonMessage: null,

package/src/components/chat/workspace/chat-session-workspace-file-breadcrumbs.tsx

@@ -0,0 +1,86 @@
+import { Fragment } from "react";
+import { ChevronRight, FileCode2, FolderTree } from "lucide-react";
+import type { WorkspaceFileBreadcrumbViewModel } from "@/lib/session-project/workspace-file-breadcrumb";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+function WorkspaceBreadcrumbMetaChip({
+  tone = "neutral",
+  value,
+}: {
+  tone?: "neutral" | "warning";
+  value: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 items-center rounded-sm border px-1.5 text-[10px] font-medium leading-none",
+        tone === "warning"
+          ? "border-amber-200 bg-amber-50 text-amber-700"
+          : "border-gray-200 bg-gray-50 text-gray-500",
+      )}
+    >
+      {value}
+    </span>
+  );
+}
+
+export function ChatSessionWorkspaceFileBreadcrumbs({
+  breadcrumb,
+}: {
+  breadcrumb: WorkspaceFileBreadcrumbViewModel;
+}) {
+  return (
+    <div
+      data-testid="workspace-file-breadcrumbs"
+      title={breadcrumb.fullPath}
+      className="workspace-horizontal-scrollbar overflow-x-auto overflow-y-hidden border-b border-gray-200/80 bg-gray-50/55"
+    >
+      <div
+        data-testid="workspace-file-breadcrumb-scroll"
+        className="flex min-w-max items-center gap-2.5 px-3 py-1.5"
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-1 pr-1">
+          {breadcrumb.segments.map((segment, index) => (
+            <Fragment key={segment.key}>
+              <span
+                className={cn(
+                  "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none",
+                  segment.kind === "workspace"
+                    ? "bg-primary/8 text-primary"
+                    : segment.isCurrent
+                      ? "bg-gray-200/70 text-gray-900"
+                      : "text-gray-500",
+                )}
+              >
+                {segment.kind === "workspace" ? (
+                  <FolderTree className="h-3 w-3 shrink-0" />
+                ) : segment.isCurrent ? (
+                  <FileCode2 className="h-3 w-3 shrink-0" />
+                ) : null}
+                <span>{segment.label}</span>
+              </span>
+              {index < breadcrumb.segments.length - 1 ? (
+                <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />
+              ) : null}
+            </Fragment>
+          ))}
+        </div>
+
+        {breadcrumb.locationLabel || breadcrumb.truncated ? (
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+            {breadcrumb.locationLabel ? (
+              <WorkspaceBreadcrumbMetaChip value={breadcrumb.locationLabel} />
+            ) : null}
+            {breadcrumb.truncated ? (
+              <WorkspaceBreadcrumbMetaChip
+                tone="warning"
+                value={t("chatWorkspacePreviewTruncated")}
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/common/BrandHeader.tsx

@@ -1,5 +1,6 @@
 import { useAppMeta } from '@/hooks/useConfig';
 import type { ReactNode } from 'react';
+import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
 
 type BrandHeaderProps = {
   className?: string;
@@ -10,6 +11,7 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
   const { data } = useAppMeta();
   const productName = data?.name ?? 'NextClaw';
   const productVersion = data?.productVersion?.trim();
+  const resolvedSuffix = suffix ?? <RuntimeStatusEntry />;
 
   return (
     <div className={className ?? 'flex items-center gap-2.5'}>
@@ -19,7 +21,7 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
       <div className="flex items-baseline gap-2 min-w-0">
         <span className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{productName}</span>
         {productVersion ? <span className="text-[13px] font-medium text-gray-500">v{productVersion}</span> : null}
-        {suffix ? <span className="inline-flex items-center shrink-0">{suffix}</span> : null}
+        {resolvedSuffix ? <span className="inline-flex items-center shrink-0">{resolvedSuffix}</span> : null}
       </div>
     </div>
   );

package/src/components/common/session-context-icon.tsx

@@ -1,4 +1,5 @@
 import { type SessionContextIcon } from '@/lib/session-context.utils';
+import { resolveAppResourceUri } from '@/lib/app-resource-uri';
 import { LogoBadge } from '@/components/common/LogoBadge';
 import { getChannelLogo } from '@/lib/logos';
 import { cn } from '@/lib/utils';
@@ -8,6 +9,18 @@ export function SessionContextIconNode({ icon, className }: { icon: SessionConte
   if (icon.kind === 'channel-logo') {
     return <ChannelLogoIcon channel={icon.channel} className={className} />;
   }
+  if (icon.kind === 'runtime-image') {
+    const runtimeIconSrc = resolveAppResourceUri(icon.src);
+    return (
+      <LogoBadge
+        name={icon.name?.trim() || icon.alt?.trim() || 'runtime'}
+        src={runtimeIconSrc ?? undefined}
+        className={cn('h-[1.125rem] w-[1.125rem]', className)}
+        imgClassName="h-full w-full object-contain"
+        fallback={<Bot className={cn('h-3 w-3 text-gray-500', className)} />}
+      />
+    );
+  }
   if (icon.icon === 'heartbeat') {
     return <HeartPulse className={cn('h-3.5 w-3.5', className)} />;
   }
@@ -22,8 +35,8 @@ function ChannelLogoIcon(
     <LogoBadge
       name={channel}
       src={logoSrc}
-      className={cn('h-4 w-4 rounded-[4px] border border-gray-200/80 bg-white', className)}
-      imgClassName="h-3 w-3 object-contain"
+      className={cn('h-[1.125rem] w-[1.125rem]', className)}
+      imgClassName="h-full w-full object-contain"
       fallback={<Bot className="h-3 w-3 text-gray-500" />}
     />
   );

package/src/components/common/{TagInput.tsx → tag-input.tsx}

@@ -1,7 +1,8 @@
-import { useState } from 'react';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
+import { useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { t } from "@/lib/i18n";
+import { TagChip } from "@/components/ui/tag-chip";
 
 interface TagInputProps {
   value: string[];
@@ -10,15 +11,20 @@ interface TagInputProps {
   placeholder?: string;
 }
 
-export function TagInput({ value, onChange, className, placeholder = '' }: TagInputProps) {
-  const [input, setInput] = useState('');
+export function TagInput({
+  value,
+  onChange,
+  className,
+  placeholder = "",
+}: TagInputProps) {
+  const [input, setInput] = useState("");
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input.trim()) {
+    if (e.key === "Enter" && input.trim()) {
       e.preventDefault();
       onChange([...value, input.trim()]);
-      setInput('');
-    } else if (e.key === 'Backspace' && !input && value.length > 0) {
+      setInput("");
+    } else if (e.key === "Backspace" && !input && value.length > 0) {
       onChange(value.slice(0, -1));
     }
   };
@@ -28,21 +34,23 @@ export function TagInput({ value, onChange, className, placeholder = '' }: TagIn
   };
 
   return (
-    <div className={cn('flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]', className)}>
+    <div
+      className={cn(
+        "flex min-h-[42px] flex-wrap gap-2 rounded-xl border border-gray-200/80 bg-white p-2",
+        className,
+      )}
+    >
       {value.map((tag, index) => (
-        <span
-          key={index}
-          className="inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm"
-        >
+        <TagChip key={index} tone="info" className="gap-1 px-2 py-1 text-sm">
           {tag}
           <button
             type="button"
             onClick={() => removeTag(index)}
-            className="hover:text-red-300 transition-colors"
+            className="transition-colors hover:text-rose-200"
           >
             <X className="h-3 w-3" />
           </button>
-        </span>
+        </TagChip>
       ))}
       <input
         type="text"
@@ -50,7 +58,7 @@ export function TagInput({ value, onChange, className, placeholder = '' }: TagIn
         onChange={(e) => setInput(e.target.value)}
         onKeyDown={handleKeyDown}
         className="flex-1 outline-none min-w-[100px] bg-transparent text-sm"
-        placeholder={placeholder || t('enterTag')}
+        placeholder={placeholder || t("enterTag")}
       />
     </div>
   );