@nextclaw/ui 0.15.6 → 0.15.7

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

@@ -4,7 +4,8 @@ import {
   buildInlineTokensFromComposer,
   CHAT_INLINE_TOKENS_METADATA_KEY,
   readInlineTokensFromMetadata,
-  resolveInlineTokensForText
+  resolveInlineTokensForText,
+  resolveWorkspaceReferencePath,
 } from '@/features/chat/features/input/utils/chat-inline-token.utils';
 
 describe('chat-inline-token utils', () => {
@@ -143,4 +144,19 @@ describe('chat-inline-token utils', () => {
       },
     ]);
   });
+
+  it('resolves workspace token paths inside POSIX and Windows project roots', () => {
+    expect(resolveWorkspaceReferencePath({
+      projectRoot: '/tmp/project/',
+      relativePath: 'docs/guide.md',
+    })).toBe('/tmp/project/docs/guide.md');
+    expect(resolveWorkspaceReferencePath({
+      projectRoot: 'C:\\workspace\\nextclaw\\',
+      relativePath: 'docs/guide.md',
+    })).toBe('C:\\workspace\\nextclaw\\docs\\guide.md');
+    expect(resolveWorkspaceReferencePath({
+      projectRoot: '/tmp/project',
+      relativePath: '../secret.txt',
+    })).toBeNull();
+  });
 });

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

@@ -15,6 +15,23 @@ const CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN = /@folder:([^\s]+)/g;
 
 export type ChatInlineTokenSource = ChatInlineTokenMetadata;
 
+export function resolveWorkspaceReferencePath(params: {
+  projectRoot: string | null | undefined;
+  relativePath: string;
+}): string | null {
+  const projectRoot = params.projectRoot?.trim().replace(/[\\/]+$/, '') ?? '';
+  const relativeSegments = params.relativePath.trim().replace(/\\/g, '/').split('/');
+  if (
+    !projectRoot ||
+    relativeSegments.length === 0 ||
+    relativeSegments.some((segment) => !segment || segment === '.' || segment === '..')
+  ) {
+    return null;
+  }
+  const separator = projectRoot.includes('\\') ? '\\' : '/';
+  return `${projectRoot}${separator}${relativeSegments.join(separator)}`;
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }

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

@@ -0,0 +1,159 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatInlineFilePreview } from "@/features/chat/features/message/components/chat-inline-file-preview";
+
+const captures = vi.hoisted(() => ({
+  filePreviewProps: [] as Array<{
+    showBreadcrumbs?: boolean;
+    onHtmlContentHeightChange?: (height: number) => void;
+  }>,
+}));
+
+vi.mock(
+  "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
+  () => ({
+    ChatSessionWorkspaceFilePreview: (props: {
+      showBreadcrumbs?: boolean;
+      onHtmlContentHeightChange?: (height: number) => void;
+    }) => {
+      captures.filePreviewProps.push(props);
+      return <div data-testid="inline-workspace-file-preview" />;
+    },
+  }),
+);
+
+vi.mock("@/shared/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  captures.filePreviewProps = [];
+});
+
+it("renders adaptive inline HTML without persistent file chrome", () => {
+  const onFileOpen = vi.fn();
+  const { container } = render(
+    <ChatInlineFilePreview
+      display={{
+        target: {
+          type: "file",
+          payload: { path: "preview.html", viewer: "rendered" },
+        },
+        title: "Preview",
+        description: "Rendered HTML",
+      }}
+      parentSessionKey={null}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      onFileOpen={onFileOpen}
+    />,
+  );
+
+  expect(screen.queryByText("Preview")).toBeNull();
+  expect(screen.queryByText("preview.html")).toBeNull();
+  expect(screen.queryByText("Rendered HTML")).toBeNull();
+  const preview = container.querySelector(
+    '[data-chat-inline-file-preview="true"]',
+  );
+  const actions = container.querySelector(
+    '[data-chat-inline-file-actions="true"]',
+  );
+  const viewport = container.querySelector<HTMLElement>(
+    '[data-chat-inline-file-viewport="true"]',
+  );
+  const iframeSurface = screen.getByTestId("inline-workspace-file-preview");
+  expect(preview?.classList.contains("border")).toBe(false);
+  expect(preview?.classList.contains("pt-9")).toBe(false);
+  expect(actions?.classList.contains("left-1/2")).toBe(true);
+  expect(actions?.classList.contains("-translate-x-1/2")).toBe(true);
+  expect(actions?.classList.contains("bottom-full")).toBe(true);
+  expect(actions?.classList.contains("pb-2")).toBe(true);
+  expect(actions?.classList.contains("right-2")).toBe(false);
+  expect(actions?.classList.contains("opacity-0")).toBe(true);
+  expect(actions?.classList.contains("pointer-events-none")).toBe(true);
+  expect(
+    actions?.classList.contains("group-hover/inline-html:opacity-100"),
+  ).toBe(true);
+  expect(
+    actions?.classList.contains("group-hover/inline-html:pointer-events-auto"),
+  ).toBe(true);
+  expect(
+    actions?.classList.contains("group-focus-within/inline-html:opacity-100"),
+  ).toBe(true);
+  expect(
+    actions?.classList.contains(
+      "group-focus-within/inline-html:pointer-events-auto",
+    ),
+  ).toBe(true);
+  expect(
+    container.querySelector('[data-chat-inline-file-actions-surface="true"]'),
+  ).toBeTruthy();
+  expect(viewport?.classList.contains("rounded-lg")).toBe(true);
+  expect(viewport?.classList.contains("h-[240px]")).toBe(true);
+  expect(viewport?.classList.contains("max-h-[min(80vh,720px)]")).toBe(true);
+  expect(captures.filePreviewProps.at(-1)?.showBreadcrumbs).toBe(false);
+  expect(captures.filePreviewProps.at(-1)?.onHtmlContentHeightChange).toEqual(
+    expect.any(Function),
+  );
+
+  act(() => {
+    captures.filePreviewProps.at(-1)?.onHtmlContentHeightChange?.(560);
+  });
+
+  expect(viewport?.style.height).toBe("560px");
+  expect(screen.getByTestId("inline-workspace-file-preview")).toBe(
+    iframeSurface,
+  );
+
+  fireEvent.click(screen.getByLabelText("chatPanelCardExpand"));
+  fireEvent.click(screen.getByLabelText("chatWorkspaceOpenSource"));
+
+  expect(onFileOpen).toHaveBeenNthCalledWith(1, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "rendered",
+    line: undefined,
+    column: undefined,
+  });
+  expect(onFileOpen).toHaveBeenNthCalledWith(2, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "source",
+    line: undefined,
+    column: undefined,
+  });
+});
+
+it("keeps file chrome for non-HTML inline previews", () => {
+  const { container } = render(
+    <ChatInlineFilePreview
+      display={{
+        target: {
+          type: "file",
+          payload: { path: "notes.md", viewer: "rendered" },
+        },
+        title: "Notes",
+      }}
+      parentSessionKey={null}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      onFileOpen={vi.fn()}
+    />,
+  );
+
+  expect(screen.getByText("Notes")).toBeTruthy();
+  expect(screen.getByText("notes.md")).toBeTruthy();
+  expect(
+    container
+      .querySelector('[data-chat-inline-file-preview="true"]')
+      ?.classList.contains("border"),
+  ).toBe(true);
+  expect(
+    container.querySelector('[data-chat-inline-file-actions="true"]'),
+  ).toBeNull();
+  expect(
+    captures.filePreviewProps.at(-1)?.onHtmlContentHeightChange,
+  ).toBeUndefined();
+});

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

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { isValidElement } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
@@ -20,6 +20,7 @@ const captures = vi.hoisted(() => ({
   handleToolAction: vi.fn(),
   showContent: vi.fn(),
   filePreviewProps: [] as Array<{ showBreadcrumbs?: boolean }>,
+  selectedSession: null as null | { projectRoot: string; workingDir?: string | null },
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -31,6 +32,7 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
       onToolAction?: (action: unknown) => void;
       onFileOpen?: (action: unknown) => void;
       onAttachmentOpen?: (file: unknown) => void;
+      onInlineTokenClick?: (token: unknown) => void;
       renderInlineDisplay?: (display: unknown) => unknown;
       renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
@@ -53,6 +55,10 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state", () => ({
+  useNcpChatSelectedSession: () => captures.selectedSession,
+}));
+
 vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
 }));
@@ -81,6 +87,7 @@ beforeEach(() => {
   captures.handleToolAction.mockReset();
   captures.showContent.mockReset();
   captures.filePreviewProps = [];
+  captures.selectedSession = null;
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -100,9 +107,7 @@ it("reuses adapted message references when the source message object is unchange
   const firstMessages =
     captures.renders[captures.renders.length - 1]?.messages ?? [];
 
-  rerender(
-    <ChatMessageListContainer messages={[message]} isSending={false} />,
-  );
+  rerender(<ChatMessageListContainer messages={[message]} isSending={false} />);
 
   const secondMessages =
     captures.renders[captures.renders.length - 1]?.messages ?? [];
@@ -223,7 +228,7 @@ it("adds a completed assistant process summary without inventing a duration", ()
         toolCallId: "tool-1",
         toolName: "exec_command",
         state: "result",
-        args: "{\"cmd\":\"git status\"}",
+        args: '{"cmd":"git status"}',
         result: "clean",
       },
       {
@@ -270,7 +275,7 @@ it("derives completed assistant process duration from message lifecycle", () =>
         toolCallId: "tool-1",
         toolName: "exec_command",
         state: "result",
-        args: "{\"cmd\":\"git status\"}",
+        args: '{"cmd":"git status"}',
         result: "clean",
       },
       {
@@ -322,6 +327,53 @@ it("wires markdown file link actions to the workspace file preview manager", ()
   expect(captures.openFilePreview).toHaveBeenCalledWith(action);
 });
 
+it("opens workspace file and directory tokens from the message", () => {
+  captures.selectedSession = {
+    projectRoot: "/tmp/project",
+    workingDir: "/tmp/project/packages/ui",
+  };
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+  const onInlineTokenClick = captures.renders[captures.renders.length - 1]?.onInlineTokenClick;
+
+  onInlineTokenClick?.({
+    kind: "workspace_file",
+    key: "docs/guide.md",
+    label: "guide.md",
+    rawText: "@file:docs%2Fguide.md",
+  });
+  onInlineTokenClick?.({
+    kind: "workspace_directory",
+    key: "packages/server",
+    label: "server",
+    rawText: "@folder:packages%2Fserver",
+  });
+
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(1, {
+    path: "/tmp/project/docs/guide.md",
+    label: "guide.md",
+    viewMode: "preview",
+  });
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(2, {
+    path: "/tmp/project/packages/server",
+    label: "server",
+    viewMode: "preview",
+  });
+});
+
+it("opens panel app tokens through the existing content owner", () => {
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+  captures.renders[captures.renders.length - 1]?.onInlineTokenClick?.({
+    kind: "panel_app",
+    key: "task-board",
+    label: "Task Board",
+    rawText: "@panel-app:task-board",
+  });
+
+  expect(captures.showContent).toHaveBeenCalledWith({
+    target: { type: "panel_app", payload: { appId: "task-board" } },
+  });
+});
+
 it("opens message attachments in the workspace file preview", () => {
   const message = {
     id: "assistant-attachment",
@@ -385,12 +437,16 @@ it("renders context inheritance as a divider without repeating inherited message
       isSending={false}
     />,
   );
-  const renderedMessages = captures.renders.flatMap((rendered) => rendered.messages);
+  const renderedMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
   const renderedPayload = JSON.stringify(renderedMessages);
 
   expect(screen.getByText("chatContextInheritanceInherited")).toBeTruthy();
   expect(container.querySelector('[title*="parent-session"]')).toBeTruthy();
-  expect(container.querySelector('[title*="chatContextInheritanceMessages: 1"]')).toBeTruthy();
+  expect(
+    container.querySelector('[title*="chatContextInheritanceMessages: 1"]'),
+  ).toBeTruthy();
   expect(renderedPayload).toContain("child visible request");
   expect(renderedPayload).not.toContain("parent context");
 });
@@ -416,7 +472,7 @@ it("keeps Hermes tool invocation parts as tool cards instead of flattening them
         toolCallId: "hermes-inline-tool-1",
         toolName: "search_files",
         state: "call",
-        args: "{\"pattern\":\"*.py\"}",
+        args: '{"pattern":"*.py"}',
       },
       {
         type: "text",
@@ -495,10 +551,12 @@ it("delegates tool actions to the chat thread manager owner", () => {
 it("passes the inline panel app renderer to the shared chat UI", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 
-  expect(captures.renders[captures.renders.length - 1]?.renderPanelAppCard).toEqual(expect.any(Function));
+  expect(
+    captures.renders[captures.renders.length - 1]?.renderPanelAppCard,
+  ).toEqual(expect.any(Function));
 });
 
-it("renders inline file displays through the workspace file preview", () => {
+it("connects inline HTML actions to the chat thread manager", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 
   const renderInlineDisplay =
@@ -514,24 +572,30 @@ it("renders inline file displays through the workspace file preview", () => {
     description: "Rendered HTML",
   });
 
-  if (!isValidElement<{ display?: unknown }>(rendered)) {
+  if (!isValidElement(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);
+  fireEvent.click(screen.getByLabelText("chatPanelCardExpand"));
+  fireEvent.click(screen.getByLabelText("chatWorkspaceOpenSource"));
+
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(1, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "rendered",
+    line: undefined,
+    column: undefined,
+  });
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(2, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "source",
+    line: undefined,
+    column: undefined,
+  });
 });
 
 it("keeps inline panel app displays expandable from the card header", () => {
@@ -548,7 +612,9 @@ it("keeps inline panel app displays expandable from the card header", () => {
   });
 
   if (!isValidElement<{ showExpandAction?: boolean }>(rendered)) {
-    throw new Error("Expected inline panel app renderer to return a React element");
+    throw new Error(
+      "Expected inline panel app renderer to return a React element",
+    );
   }
   expect(rendered.props.showExpandAction).toBeUndefined();
 });

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

@@ -1,10 +1,14 @@
+import { useState } from "react";
 import type {
   ChatFileOpenActionViewModel,
   ChatInlineDisplayViewModel,
 } from "@nextclaw/agent-chat-ui";
-import { FileText } from "lucide-react";
+import { Code2, FileText, PanelRightOpen } 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";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type ChatInlineFilePreviewProps = {
   display: ChatInlineDisplayViewModel;
@@ -14,9 +18,7 @@ type ChatInlineFilePreviewProps = {
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
 };
 
-function readFileName(path: string): string {
-  return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
-}
+const INLINE_HTML_MIN_HEIGHT = 240;
 
 export function ChatInlineFilePreview({
   display,
@@ -25,6 +27,9 @@ export function ChatInlineFilePreview({
   sessionWorkingDir,
   onFileOpen,
 }: ChatInlineFilePreviewProps) {
+  const [htmlContentHeight, setHtmlContentHeight] = useState<number | null>(
+    null,
+  );
   if (display.target.type !== "file") {
     return null;
   }
@@ -43,35 +48,99 @@ export function ChatInlineFilePreview({
   if (!file) {
     return null;
   }
-  const title = display.title ?? readFileName(file.path);
+  const title =
+    file.label ?? file.path.split(/[\\/]/).filter(Boolean).pop() ?? file.path;
+  const isRenderedHtml =
+    file.previewViewer === "rendered" && /\.html?$/i.test(file.path);
+  const openInWorkspace = (previewViewer: "rendered" | "source") => {
+    onFileOpen({
+      path: file.path,
+      label: file.label ?? undefined,
+      viewMode: "preview",
+      previewViewer,
+      line: file.line ?? undefined,
+      column: file.column ?? undefined,
+    });
+  };
 
   return (
     <section
-      className="my-2 w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
+      className={cn(
+        "my-2 w-full max-w-[48rem]",
+        isRenderedHtml
+          ? "group/inline-html relative overflow-visible"
+          : "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}
+      {isRenderedHtml ? (
+        <div
+          className={cn(
+            "pointer-events-none absolute bottom-full left-1/2 z-10 -translate-x-1/2 pb-2 opacity-0 transition-opacity duration-150",
+            "group-hover/inline-html:pointer-events-auto group-hover/inline-html:opacity-100 group-focus-within/inline-html:pointer-events-auto group-focus-within/inline-html:opacity-100",
+          )}
+          data-chat-inline-file-actions="true"
         >
-          {file.path}
-        </p>
-      </header>
-      <div className="h-[420px] min-h-[240px] max-h-[min(60vh,420px)] overflow-hidden">
+          <div
+            className="flex items-center gap-0.5 rounded-lg bg-background/95 p-0.5 shadow-md ring-1 ring-border/60 backdrop-blur-sm"
+            data-chat-inline-file-actions-surface="true"
+          >
+            <IconActionButton
+              size="sm"
+              icon={<PanelRightOpen className="h-3.5 w-3.5" />}
+              label={t("chatPanelCardExpand")}
+              tooltipSide="top"
+              onClick={() => openInWorkspace("rendered")}
+            />
+            <IconActionButton
+              size="sm"
+              icon={<Code2 className="h-3.5 w-3.5" />}
+              label={t("chatWorkspaceOpenSource")}
+              tooltipSide="top"
+              onClick={() => openInWorkspace("source")}
+            />
+          </div>
+        </div>
+      ) : (
+        <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={cn(
+          "min-h-[240px] overflow-hidden",
+          isRenderedHtml
+            ? "h-[240px] max-h-[min(80vh,720px)] rounded-lg"
+            : "h-[420px] max-h-[min(60vh,420px)]",
+        )}
+        data-chat-inline-file-viewport="true"
+        style={
+          isRenderedHtml && htmlContentHeight
+            ? { height: Math.max(INLINE_HTML_MIN_HEIGHT, htmlContentHeight) }
+            : undefined
+        }
+      >
         <ChatSessionWorkspaceFilePreview
           file={file}
           sessionProjectRoot={sessionProjectRoot}
           sessionWorkingDir={sessionWorkingDir}
           showBreadcrumbs={false}
+          onHtmlContentHeightChange={
+            isRenderedHtml ? setHtmlContentHeight : undefined
+          }
           onFileOpen={onFileOpen}
         />
       </div>

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

@@ -14,7 +14,10 @@ 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 {
+  readInlineTokensFromMetadata,
+  resolveWorkspaceReferencePath,
+} from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import {
   readContextCompactionTimeline,
@@ -362,9 +365,27 @@ export function ChatMessageListContainer({
   const sessionSkillsQuery = useChatQueryStore((state) => state.snapshot.sessionSkillsQuery);
   const handleInlineTokenClick = useCallback(
     (token: ChatInlineTokenViewModel) => {
-      if (token.kind !== "skill") {
+      if (token.kind === "panel_app") {
+        void presenter.chatUiManager.showContent({
+          target: { type: "panel_app", payload: { appId: token.key } },
+        });
+        return;
+      }
+      if (token.kind === "workspace_file" || token.kind === "workspace_directory") {
+        const path = resolveWorkspaceReferencePath({
+          projectRoot: selectedSession?.projectRoot,
+          relativePath: token.key,
+        });
+        if (path) {
+          presenter.chatThreadManager.openFilePreview({
+            path,
+            label: token.label,
+            viewMode: "preview",
+          });
+        }
         return;
       }
+      if (token.kind !== "skill") return;
       const skillKey = token.key.trim();
       if (!skillKey) {
         return;
@@ -382,7 +403,7 @@ export function ChatMessageListContainer({
         previewViewer: "rendered",
       });
     },
-    [presenter.chatThreadManager, sessionSkillsQuery],
+    [presenter.chatThreadManager, presenter.chatUiManager, selectedSession?.projectRoot, sessionSkillsQuery],
   );
   const handleAttachmentOpen = useCallback(
     (file: { label: string; mimeType: string; dataUrl?: string; sizeBytes?: number; isImage: boolean }) => {

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

@@ -107,6 +107,7 @@ export function buildChatMessageTexts(
     copyMessageLabel: t("chatMessageCopy"),
     copiedMessageLabel: t("chatMessageCopied"),
     mermaidDiagramLabel: t("chatMermaidDiagram"),
+    mermaidLoadingLabel: t("chatMermaidLoading"),
     mermaidRenderErrorLabel: t("chatMermaidRenderError"),
     typingLabel: t("chatTyping"),
     reasoningCharacterCountTemplates: {