@nextclaw/ui 0.15.4 → 0.15.6

package/src/features/chat/features/input/utils/__tests__/chat-inline-token.utils.test.ts

@@ -1,8 +1,8 @@
 import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
 import {
   buildInlineTokensFromTextProtocol,
-  buildInlineSkillTokensFromComposer,
-  CHAT_UI_INLINE_TOKENS_METADATA_KEY,
+  buildInlineTokensFromComposer,
+  CHAT_INLINE_TOKENS_METADATA_KEY,
   readInlineTokensFromMetadata,
   resolveInlineTokensForText
 } from '@/features/chat/features/input/utils/chat-inline-token.utils';
@@ -10,7 +10,7 @@ import {
 describe('chat-inline-token utils', () => {
   it('builds ordered inline skill tokens from composer nodes', () => {
     expect(
-      buildInlineSkillTokensFromComposer([
+      buildInlineTokensFromComposer([
         createChatComposerTextNode('before '),
         createChatComposerTokenNode({
           tokenKind: 'skill',
@@ -42,7 +42,7 @@ describe('chat-inline-token utils', () => {
   it('reads generic inline token metadata safely', () => {
     expect(
       readInlineTokensFromMetadata({
-        [CHAT_UI_INLINE_TOKENS_METADATA_KEY]: [
+        [CHAT_INLINE_TOKENS_METADATA_KEY]: [
           {
             kind: 'skill',
             key: 'weather',
@@ -97,4 +97,50 @@ describe('chat-inline-token utils', () => {
       }
     ]);
   });
+
+  it('serializes and parses workspace file and directory references', () => {
+    expect(
+      buildInlineTokensFromComposer([
+        createChatComposerTokenNode({
+          tokenKind: 'workspace_file',
+          tokenKey: 'src/file name.ts',
+          label: 'file name.ts',
+        }),
+        createChatComposerTokenNode({
+          tokenKind: 'workspace_directory',
+          tokenKey: 'docs/设计',
+          label: '设计',
+        }),
+      ]),
+    ).toEqual([
+      {
+        kind: 'workspace_file',
+        key: 'src/file name.ts',
+        label: 'file name.ts',
+        rawText: '@file:src%2Ffile%20name.ts',
+      },
+      {
+        kind: 'workspace_directory',
+        key: 'docs/设计',
+        label: '设计',
+        rawText: '@folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+    expect(
+      buildInlineTokensFromTextProtocol('review @file:src%2Ffile%20name.ts and @folder:docs%2F%E8%AE%BE%E8%AE%A1'),
+    ).toEqual([
+      {
+        kind: 'workspace_file',
+        key: 'src/file name.ts',
+        label: 'file name.ts',
+        rawText: '@file:src%2Ffile%20name.ts',
+      },
+      {
+        kind: 'workspace_directory',
+        key: 'docs/设计',
+        label: '设计',
+        rawText: '@folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+  });
 });

package/src/features/chat/features/input/utils/__tests__/chat-input-bar.utils.test.ts

@@ -83,6 +83,25 @@ describe('buildChatSlashItems', () => {
 
     expect(items.map((item) => item.value)).toEqual(['weather', 'web-search', 'docs']);
   });
+
+  it('keeps skill source groups contiguous in their catalog order', () => {
+    const items = buildChatSlashItems(
+      [
+        createSkillRecord({ key: 'project:zeta', label: 'Zeta', groupKey: 'project', groupLabel: 'Project skills' }),
+        createSkillRecord({ key: 'global:alpha', label: 'Alpha', groupKey: 'global', groupLabel: 'Global skills' }),
+        createSkillRecord({ key: 'project:alpha', label: 'Alpha', groupKey: 'project', groupLabel: 'Project skills' }),
+      ],
+      '',
+      texts,
+    );
+
+    expect(items.map((item) => item.value)).toEqual(['project:alpha', 'project:zeta', 'global:alpha']);
+    expect(items.map((item) => [item.sectionKey, item.sectionLabel])).toEqual([
+      ['project', 'Project skills'],
+      ['project', 'Project skills'],
+      ['global', 'Global skills'],
+    ]);
+  });
 });
 
 describe('buildSkillPickerModel', () => {
@@ -158,6 +177,38 @@ describe('buildSkillPickerModel', () => {
     ]);
   });
 
+  it('groups the skill catalog by source when no recent group is visible', () => {
+    const model = buildSkillPickerModel({
+      skillRecords: [
+        createSkillRecord({ key: 'project:review', label: 'Review', groupKey: 'project', groupLabel: 'Project skills' }),
+        createSkillRecord({ key: 'workspace:docs', label: 'Docs', groupKey: 'workspace', groupLabel: 'NextClaw skills' }),
+        createSkillRecord({ key: 'global:browser', label: 'Browser', groupKey: 'global', groupLabel: 'Global skills' }),
+        createSkillRecord({ key: 'builtin:weather', label: 'Weather', groupKey: 'builtin', groupLabel: 'Built-in skills' })
+      ],
+      recentSkillValues: [],
+      groupedRecentSkillValues: [],
+      selectedSkills: [],
+      isLoading: false,
+      onSelectedKeysChange: vi.fn(),
+      texts: {
+        title: 'Skills',
+        searchPlaceholder: 'Search skills',
+        emptyLabel: 'No skills',
+        loadingLabel: 'Loading',
+        manageLabel: 'Manage',
+        recentSkillsLabel: 'Recent',
+        allSkillsLabel: 'All skills'
+      }
+    });
+
+    expect(model.groups?.map((group) => [group.key, group.label])).toEqual([
+      ['project', 'Project skills'],
+      ['workspace', 'NextClaw skills'],
+      ['global', 'Global skills'],
+      ['builtin', 'Built-in skills']
+    ]);
+  });
+
   it('still reorders recent skills even when grouped labels are omitted', () => {
     const model = buildSkillPickerModel({
       skillRecords: [

package/src/features/chat/features/input/utils/chat-composer-state.utils.ts

@@ -10,9 +10,7 @@ import {
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpMessagePart } from '@nextclaw/ncp';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-
-const CHAT_SKILL_TOKEN_PREFIX = '$';
-const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+import { serializeChatComposerTokenText } from './chat-composer-token-protocol.utils';
 
 function appendTextPart(parts: NcpMessagePart[], text: string): NcpMessagePart[] {
   if (text.length === 0) {
@@ -110,13 +108,9 @@ export function deriveNcpMessagePartsFromComposer(
       continue;
     }
 
-    if (node.tokenKind === 'skill') {
-      parts = appendTextPart(parts, `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`);
-      continue;
-    }
-
-    if (node.tokenKind === 'panel_app') {
-      parts = appendTextPart(parts, `${CHAT_PANEL_APP_TOKEN_PREFIX}${node.tokenKey}`);
+    const tokenText = serializeChatComposerTokenText(node);
+    if (tokenText) {
+      parts = appendTextPart(parts, tokenText);
       continue;
     }
 

package/src/features/chat/features/input/utils/chat-composer-token-protocol.utils.ts

@@ -0,0 +1,29 @@
+import {
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+} from '@nextclaw/shared';
+
+const CHAT_SKILL_TOKEN_PREFIX = '$';
+const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+const CHAT_WORKSPACE_FILE_TOKEN_PREFIX = '@file:';
+const CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX = '@folder:';
+
+export function serializeChatComposerTokenText(params: {
+  tokenKey: string;
+  tokenKind: string;
+}): string | null {
+  const { tokenKey, tokenKind } = params;
+  if (tokenKind === 'skill') {
+    return `${CHAT_SKILL_TOKEN_PREFIX}${tokenKey}`;
+  }
+  if (tokenKind === 'panel_app') {
+    return `${CHAT_PANEL_APP_TOKEN_PREFIX}${tokenKey}`;
+  }
+  if (tokenKind === CHAT_WORKSPACE_FILE_TOKEN_KIND) {
+    return `${CHAT_WORKSPACE_FILE_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
+  if (tokenKind === CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND) {
+    return `${CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
+  return null;
+}

package/src/features/chat/features/input/utils/chat-inline-token.utils.ts

@@ -1,11 +1,19 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import {
+  CHAT_INLINE_TOKENS_METADATA_KEY,
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+  type ChatInlineTokenMetadata,
+} from '@nextclaw/shared';
+import { serializeChatComposerTokenText } from './chat-composer-token-protocol.utils';
 
-export const CHAT_UI_INLINE_TOKENS_METADATA_KEY = 'ui_inline_tokens';
-const CHAT_SKILL_TOKEN_PREFIX = '$';
+export { CHAT_INLINE_TOKENS_METADATA_KEY };
 const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
 const CHAT_PANEL_APP_TOKEN_PATTERN = /@panel-app:([A-Za-z0-9_-]+)/g;
+const CHAT_WORKSPACE_FILE_TOKEN_PATTERN = /@file:([^\s]+)/g;
+const CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN = /@folder:([^\s]+)/g;
 
-export type ChatInlineTokenSource = { kind: string; key: string; label: string; rawText: string };
+export type ChatInlineTokenSource = ChatInlineTokenMetadata;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -33,22 +41,60 @@ function dedupeInlineTokens(tokens: readonly ChatInlineTokenSource[]): ChatInlin
   return output;
 }
 
-export function buildInlineSkillTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
+export function buildInlineTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const node of nodes) {
-    if (node.type !== 'token' || node.tokenKind !== 'skill') {
+    if (node.type !== 'token') {
+      continue;
+    }
+    if (
+      node.tokenKind !== 'skill' &&
+      node.tokenKind !== CHAT_WORKSPACE_FILE_TOKEN_KIND &&
+      node.tokenKind !== CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
+    ) {
+      continue;
+    }
+    const rawText = serializeChatComposerTokenText(node);
+    if (!rawText) {
       continue;
     }
     tokens.push({
-      kind: 'skill',
+      kind: node.tokenKind,
       key: node.tokenKey,
       label: node.label,
-      rawText: `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`
+      rawText,
     });
   }
   return dedupeInlineTokens(tokens);
 }
 
+function appendWorkspaceTokens(params: {
+  kind: typeof CHAT_WORKSPACE_FILE_TOKEN_KIND | typeof CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
+  pattern: RegExp;
+  text: string;
+  tokens: ChatInlineTokenSource[];
+}): void {
+  const { kind, pattern, text, tokens } = params;
+  for (const match of text.matchAll(pattern)) {
+    const encodedKey = match[1];
+    if (!encodedKey) {
+      continue;
+    }
+    let key: string;
+    try {
+      key = decodeURIComponent(encodedKey);
+    } catch {
+      continue;
+    }
+    tokens.push({
+      kind,
+      key,
+      label: key.split('/').filter(Boolean).at(-1) ?? key,
+      rawText: match[0],
+    });
+  }
+}
+
 export function buildInlineTokensFromTextProtocol(text: string): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const match of text.matchAll(CHAT_PANEL_APP_TOKEN_PATTERN)) {
@@ -63,6 +109,18 @@ export function buildInlineTokensFromTextProtocol(text: string): ChatInlineToken
       rawText: `${CHAT_PANEL_APP_TOKEN_PREFIX}${key}`
     });
   }
+  appendWorkspaceTokens({
+    kind: CHAT_WORKSPACE_FILE_TOKEN_KIND,
+    pattern: CHAT_WORKSPACE_FILE_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
+  appendWorkspaceTokens({
+    kind: CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+    pattern: CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
   return dedupeInlineTokens(tokens);
 }
 
@@ -76,7 +134,7 @@ export function resolveInlineTokensForText(
 export function readInlineTokensFromMetadata(
   metadata: Record<string, unknown> | undefined
 ): ChatInlineTokenSource[] {
-  const raw = metadata?.[CHAT_UI_INLINE_TOKENS_METADATA_KEY];
+  const raw = metadata?.[CHAT_INLINE_TOKENS_METADATA_KEY];
   if (!Array.isArray(raw)) {
     return [];
   }

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -1,5 +1,6 @@
 import type {
   ChatSkillPickerOption,
+  ChatSkillPickerOptionGroup,
   ChatSkillPickerProps,
   ChatSlashItem,
 } from '@nextclaw/agent-chat-ui';
@@ -139,6 +140,13 @@ export function buildChatSlashItems(
 ): ChatSlashItem[] {
   const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
   const recentOrderIndex = buildRecentOrderIndex(recentSkillValues);
+  const groupOrderIndex = new Map<string, number>();
+  for (const record of skillRecords) {
+    const groupKey = record.groupKey?.trim();
+    if (groupKey && !groupOrderIndex.has(groupKey)) {
+      groupOrderIndex.set(groupKey, groupOrderIndex.size);
+    }
+  }
 
   return skillRecords
     .map((record, order) => ({
@@ -148,6 +156,11 @@ export function buildChatSlashItems(
     }))
     .filter((entry) => entry.score > 0)
     .sort((left, right) => {
+      const leftGroupIndex = groupOrderIndex.get(left.record.groupKey?.trim() ?? '') ?? Number.POSITIVE_INFINITY;
+      const rightGroupIndex = groupOrderIndex.get(right.record.groupKey?.trim() ?? '') ?? Number.POSITIVE_INFINITY;
+      if (leftGroupIndex !== rightGroupIndex) {
+        return leftGroupIndex - rightGroupIndex;
+      }
       const leftTier = resolveSlashMatchTier(left.score);
       const rightTier = resolveSlashMatchTier(right.score);
       if (rightTier !== leftTier) {
@@ -178,6 +191,8 @@ export function buildChatSlashItems(
         `${texts.slashSkillSpecLabel}: ${record.key}`,
         ...(record.scopeLabel ? [`${texts.slashSkillScopeLabel}: ${record.scopeLabel}`] : [])
       ],
+      sectionKey: record.groupKey,
+      sectionLabel: record.groupLabel,
       tokenKind: 'skill',
       tokenKey: record.key,
       value: record.key
@@ -193,6 +208,46 @@ function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPick
   }));
 }
 
+function buildSkillPickerGroups(params: {
+  skillRecords: ChatSkillRecord[];
+  recentKeySet: Set<string>;
+  recentSkillsLabel: string;
+  allSkillsLabel: string;
+}): ChatSkillPickerOptionGroup[] | undefined {
+  const { allSkillsLabel, recentKeySet, recentSkillsLabel, skillRecords } = params;
+  const recentRecords = skillRecords.filter((record) => recentKeySet.has(record.key));
+  const groupedRecords = new Map<string, { label: string; records: ChatSkillRecord[] }>();
+  for (const record of skillRecords) {
+    if (recentKeySet.has(record.key)) {
+      continue;
+    }
+    const groupKey = record.groupKey?.trim() || 'all-skills';
+    const groupLabel = record.groupLabel?.trim() || allSkillsLabel;
+    const group = groupedRecords.get(groupKey) ?? { label: groupLabel, records: [] };
+    group.records.push(record);
+    groupedRecords.set(groupKey, group);
+  }
+  const sourceGroups = [...groupedRecords].map(([key, group]) => ({
+    key,
+    label: group.label,
+    options: buildSkillPickerOptions(group.records),
+  }));
+  const hasSourceGroups = sourceGroups.some((group) => group.key !== 'all-skills');
+  if (recentRecords.length === 0 && !hasSourceGroups) {
+    return undefined;
+  }
+  return [
+    ...(recentRecords.length > 0
+      ? [{
+          key: 'recent-skills',
+          label: recentSkillsLabel,
+          options: buildSkillPickerOptions(recentRecords),
+        }]
+      : []),
+    ...sourceGroups,
+  ].filter((group) => group.options.length > 0);
+}
+
 export function buildSkillPickerModel(params: {
   skillRecords: ChatSkillRecord[];
   recentSkillValues?: string[];
@@ -221,14 +276,9 @@ export function buildSkillPickerModel(params: {
   } = params;
   const prioritizedSkillRecords = prioritizeSkillRecords(skillRecords, recentSkillValues ?? []);
   const recentKeySet = new Set(groupedRecentSkillValues ?? []);
-  const recentSkillOptions = buildSkillPickerOptions(
-    prioritizedSkillRecords.filter((record) => recentKeySet.has(record.key))
-  );
-  const remainingSkillOptions = buildSkillPickerOptions(
-    prioritizedSkillRecords.filter((record) => !recentKeySet.has(record.key))
-  );
   return {
     title: texts.title,
+    allGroupsLabel: texts.allSkillsLabel,
     searchPlaceholder: texts.searchPlaceholder,
     emptyLabel: texts.emptyLabel,
     loadingLabel: texts.loadingLabel,
@@ -236,21 +286,12 @@ export function buildSkillPickerModel(params: {
     manageLabel: texts.manageLabel,
     manageHref: '/marketplace/skills',
     options: buildSkillPickerOptions(prioritizedSkillRecords),
-    groups:
-      recentSkillOptions.length > 0
-        ? [
-            {
-              key: 'recent-skills',
-              label: texts.recentSkillsLabel,
-              options: recentSkillOptions
-            },
-            {
-              key: 'all-skills',
-              label: texts.allSkillsLabel,
-              options: remainingSkillOptions
-            }
-          ].filter((group) => group.options.length > 0)
-        : undefined,
+    groups: buildSkillPickerGroups({
+      skillRecords: prioritizedSkillRecords,
+      recentKeySet,
+      recentSkillsLabel: texts.recentSkillsLabel,
+      allSkillsLabel: texts.allSkillsLabel,
+    }),
     selectedKeys: selectedSkills,
     onSelectedKeysChange
   };

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

@@ -19,6 +19,7 @@ const captures = vi.hoisted(() => ({
   openFilePreview: vi.fn(),
   handleToolAction: vi.fn(),
   showContent: vi.fn(),
+  filePreviewProps: [] as Array<{ showBreadcrumbs?: boolean }>,
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -61,12 +62,25 @@ vi.mock("@/shared/lib/i18n", () => ({
   t: (key: string) => key,
 }));
 
+vi.mock(
+  "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
+  () => ({
+    ChatSessionWorkspaceFilePreview: (props: {
+      showBreadcrumbs?: boolean;
+    }) => {
+      captures.filePreviewProps.push(props);
+      return <div data-testid="inline-workspace-file-preview" />;
+    },
+  }),
+);
+
 beforeEach(() => {
   captures.renders = [];
   captures.language = "en";
   captures.openFilePreview.mockReset();
   captures.handleToolAction.mockReset();
   captures.showContent.mockReset();
+  captures.filePreviewProps = [];
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -484,22 +498,40 @@ it("passes the inline panel app renderer to the shared chat UI", () => {
   expect(captures.renders[captures.renders.length - 1]?.renderPanelAppCard).toEqual(expect.any(Function));
 });
 
-it("passes the inline display renderer to the shared chat UI", () => {
+it("renders inline file displays through the workspace file preview", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 
   const renderInlineDisplay =
     captures.renders[captures.renders.length - 1]?.renderInlineDisplay;
 
   expect(renderInlineDisplay).toEqual(expect.any(Function));
-  expect(
-    renderInlineDisplay?.({
-      target: {
-        type: "file",
-        payload: { path: "README.md" },
-      },
-      title: "README",
-    }),
-  ).toBeUndefined();
+  const rendered = renderInlineDisplay?.({
+    target: {
+      type: "file",
+      payload: { path: "preview.html", viewer: "rendered" },
+    },
+    title: "Preview",
+    description: "Rendered HTML",
+  });
+
+  if (!isValidElement<{ display?: unknown }>(rendered)) {
+    throw new Error("Expected inline file renderer to return a React element");
+  }
+  expect(rendered.props.display).toEqual({
+    target: {
+      type: "file",
+      payload: { path: "preview.html", viewer: "rendered" },
+    },
+    title: "Preview",
+    description: "Rendered HTML",
+  });
+
+  render(rendered);
+
+  expect(screen.getByText("Preview")).toBeTruthy();
+  expect(screen.getByText("preview.html")).toBeTruthy();
+  expect(screen.queryByText("Rendered HTML")).toBeNull();
+  expect(captures.filePreviewProps.at(-1)?.showBreadcrumbs).toBe(false);
 });
 
 it("keeps inline panel app displays expandable from the card header", () => {

package/src/features/chat/features/message/components/chat-inline-file-preview.tsx

@@ -0,0 +1,80 @@
+import type {
+  ChatFileOpenActionViewModel,
+  ChatInlineDisplayViewModel,
+} from "@nextclaw/agent-chat-ui";
+import { FileText } from "lucide-react";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
+import { createWorkspaceFileTab } from "@/features/chat/features/workspace/utils/chat-workspace-file-tab.utils";
+
+type ChatInlineFilePreviewProps = {
+  display: ChatInlineDisplayViewModel;
+  parentSessionKey: string | null;
+  sessionProjectRoot: string | null;
+  sessionWorkingDir: string | null;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+};
+
+function readFileName(path: string): string {
+  return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
+}
+
+export function ChatInlineFilePreview({
+  display,
+  parentSessionKey,
+  sessionProjectRoot,
+  sessionWorkingDir,
+  onFileOpen,
+}: ChatInlineFilePreviewProps) {
+  if (display.target.type !== "file") {
+    return null;
+  }
+  const { path, line, column, viewer } = display.target.payload;
+  const file = createWorkspaceFileTab(
+    {
+      path,
+      label: display.title,
+      viewMode: "preview",
+      previewViewer: viewer,
+      line,
+      column,
+    },
+    parentSessionKey,
+  );
+  if (!file) {
+    return null;
+  }
+  const title = display.title ?? readFileName(file.path);
+
+  return (
+    <section
+      className="my-2 w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
+      data-chat-inline-file-preview="true"
+      data-chat-message-wide-content="true"
+    >
+      <header className="border-b border-border bg-muted/45 px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
+          <FileText
+            className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+            aria-hidden
+          />
+          <span className="truncate">{title}</span>
+        </div>
+        <p
+          className="mt-1 truncate font-mono text-[11px] font-normal text-muted-foreground"
+          title={file.path}
+        >
+          {file.path}
+        </p>
+      </header>
+      <div className="h-[420px] min-h-[240px] max-h-[min(60vh,420px)] overflow-hidden">
+        <ChatSessionWorkspaceFilePreview
+          file={file}
+          sessionProjectRoot={sessionProjectRoot}
+          sessionWorkingDir={sessionWorkingDir}
+          showBreadcrumbs={false}
+          onFileOpen={onFileOpen}
+        />
+      </div>
+    </section>
+  );
+}