@nextclaw/ui 0.15.18 → 0.15.20

package/src/features/chat/features/input/input-surface-plugins/context-reference-plugin.utils.ts

@@ -5,20 +5,28 @@ import {
   type ChatInputSurfacePlugin,
   type ChatInputSurfaceTriggerSpec,
 } from '@nextclaw/agent-chat-ui';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import type {
+  ChatInputProductPluginData,
+  ContextReferenceLocation,
+} from './chat-input-product-plugin-adapters.types';
 import {
-  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
-  CHAT_WORKSPACE_FILE_TOKEN_KIND,
-} from '@nextclaw/shared';
-import type { PanelAppEntryView, ServerPathSearchEntryView } from '@/shared/lib/api';
-import type { ChatInputProductPluginData } from './chat-input-product-plugin-adapters.types';
+  buildBackNavigationItem,
+  buildCurrentDirectoryReferenceItem,
+  buildFilesNavigationItem,
+  buildProjectReferenceItems,
+  buildProjectsNavigationItem,
+  buildWorkspaceReferenceItems,
+  FILES_NAVIGATION_ITEM_KEY,
+  PROJECTS_NAVIGATION_ITEM_KEY,
+  ROOT_NAVIGATION_ITEM_KEY,
+  type ContextReferenceInputSurfaceTexts,
+} from './context-reference-items.utils';
 import {
   scoreInputSurfaceSearchCandidate,
   resolveInputSurfaceMatchTier,
 } from './input-surface-search.utils';
 
-const FILES_NAVIGATION_ITEM_KEY = 'context-reference:navigate:files';
-const ROOT_NAVIGATION_ITEM_KEY = 'context-reference:navigate:root';
-const WORKSPACE_SECTION_KEY = 'workspace';
 const PANEL_APP_SECTION_KEY = 'panel-apps';
 
 export const CONTEXT_REFERENCE_TRIGGER_SPEC: ChatInputSurfaceTriggerSpec = {
@@ -33,34 +41,10 @@ export type PanelAppInputSurfaceItemTexts = {
   subtitle: string;
 };
 
-export type ContextReferenceInputSurfaceTexts = {
-  backLabel: string;
-  backDescription: string;
-  backHintLabel: string;
-  currentDirectoryLabel: string;
-  directoryDescription: string;
-  fileDescription: string;
-  filesDescription: string;
-  filesHintLabel: string;
-  filesLabel: string;
-  filesSubtitle: string;
-  panelAppSectionLabel: string;
-  parentLabel: string;
-  parentDescription: string;
-  parentHintLabel: string;
-  projectRootLabel: string;
-  searchFailedLabel: string;
-  workspaceSectionLabel: string;
-};
-
 function getPanelAppActivityTime(entry: PanelAppEntryView): number {
   return Date.parse(entry.lastOpenedAt ?? entry.updatedAt) || 0;
 }
 
-function resolveProjectLabel(projectRoot: string): string {
-  return projectRoot.split(/[\\/]+/).filter(Boolean).at(-1) ?? projectRoot;
-}
-
 function resolvePanelAppInputSurfaceEntries(params: {
   entries: readonly PanelAppEntryView[];
   query: string;
@@ -155,171 +139,64 @@ function buildPanelAppReferenceItems(params: {
   }));
 }
 
-function buildPathPreview(params: {
-  kind: 'directory' | 'file';
-  projectRoot: string;
-  relativePath: string;
-}) {
-  const { kind, projectRoot, relativePath } = params;
-  const pathSegments = relativePath.split('/').filter(Boolean);
-  return {
-    rootLabel: resolveProjectLabel(projectRoot),
-    segments: pathSegments.map((label, index) => ({
-      label,
-      kind: index === pathSegments.length - 1 ? kind : 'directory' as const,
-    })),
-  };
-}
-
-function buildWorkspaceReferenceItems(params: {
-  entries: readonly ServerPathSearchEntryView[];
-  navigateDirectories: boolean;
-  projectRoot: string;
-  texts: ContextReferenceInputSurfaceTexts;
-}): ChatInputSurfaceItem[] {
-  const projectLabel = resolveProjectLabel(params.projectRoot);
-  return params.entries.map((entry) => {
-    const navigates = params.navigateDirectories && entry.kind === 'directory';
-    return {
-      key: `workspace:${entry.kind}:${entry.relativePath}`,
-      icon: entry.kind === 'directory' ? 'folder' : 'file',
-      title: entry.name,
-      subtitle: entry.parentRelativePath || projectLabel,
-      description: entry.kind === 'directory'
-        ? params.texts.directoryDescription
-        : params.texts.fileDescription,
-      detailLines: [
-        `${params.texts.projectRootLabel}: ${params.projectRoot}`,
-        entry.relativePath,
-      ],
-      sectionKey: WORKSPACE_SECTION_KEY,
-      sectionLabel: params.texts.workspaceSectionLabel,
-      value: entry.relativePath,
-      tokenKind: navigates
-        ? undefined
-        : entry.kind === 'directory'
-          ? CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
-          : CHAT_WORKSPACE_FILE_TOKEN_KIND,
-      tokenKey: navigates ? undefined : entry.relativePath,
-      selectionBehavior: navigates ? 'navigate' : undefined,
-      pathPreview: buildPathPreview({
-        kind: entry.kind,
-        projectRoot: params.projectRoot,
-        relativePath: entry.relativePath,
-      }),
-    } satisfies ChatInputSurfaceItem;
-  });
-}
-
-function resolveParentReferencePath(referencePath: string): string | null {
-  const segments = referencePath.split('/').filter(Boolean);
-  if (segments.length === 0) {
-    return null;
-  }
-  return segments.slice(0, -1).join('/');
-}
-
-function buildCurrentDirectoryReferenceItem(params: {
-  projectRoot: string;
-  referencePath: string;
-  texts: ContextReferenceInputSurfaceTexts;
-}): ChatInputSurfaceItem {
-  const { projectRoot, referencePath, texts } = params;
-  const title = referencePath.split('/').filter(Boolean).at(-1) ?? referencePath;
-  return {
-    key: `context-reference:current-directory:${referencePath}`,
-    icon: 'folder',
-    title: texts.currentDirectoryLabel,
-    subtitle: title,
-    description: texts.directoryDescription,
-    detailLines: [
-      `${texts.projectRootLabel}: ${projectRoot}`,
-      referencePath,
-    ],
-    sectionKey: WORKSPACE_SECTION_KEY,
-    sectionLabel: texts.workspaceSectionLabel,
-    value: referencePath,
-    tokenKind: CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
-    tokenKey: referencePath,
-    pathPreview: buildPathPreview({
-      kind: 'directory',
-      projectRoot,
-      relativePath: referencePath,
-    }),
-  };
-}
-
-function buildFilesNavigationItem(texts: ContextReferenceInputSurfaceTexts): ChatInputSurfaceItem {
-  return {
-    key: FILES_NAVIGATION_ITEM_KEY,
-    icon: 'files',
-    title: texts.filesLabel,
-    subtitle: texts.filesSubtitle,
-    description: texts.filesDescription,
-    detailLines: [],
-    hintLabel: texts.filesHintLabel,
-    selectionBehavior: 'navigate',
-  };
-}
-
-function buildBackNavigationItem(params: {
-  referencePath: string;
-  texts: ContextReferenceInputSurfaceTexts;
-}): ChatInputSurfaceItem {
-  const { referencePath, texts } = params;
-  const isProjectRoot = !referencePath;
-  return {
-    key: ROOT_NAVIGATION_ITEM_KEY,
-    icon: 'back',
-    title: isProjectRoot ? texts.backLabel : texts.parentLabel,
-    subtitle: '',
-    description: isProjectRoot ? texts.backDescription : texts.parentDescription,
-    detailLines: [],
-    hintLabel: isProjectRoot ? texts.backHintLabel : texts.parentHintLabel,
-    value: resolveParentReferencePath(referencePath) ?? '',
-    selectionBehavior: 'navigate',
-  };
-}
-
 export function createContextReferenceInputSurfacePlugin(params: {
   itemTexts: {
     context: ContextReferenceInputSurfaceTexts;
     panelApp: PanelAppInputSurfaceItemTexts;
   };
   menuTexts: ChatInputSurfaceMenuTexts;
-  onNavigate: (path: string | null) => void;
+  onNavigate: (location: ContextReferenceLocation) => void;
 }): ChatInputSurfacePlugin<ChatInputProductPluginData> {
   return createInputSurfaceTriggeredPanelPlugin({
     key: 'context-reference',
     trigger: CONTEXT_REFERENCE_TRIGGER_SPEC,
     resolvePanel: ({ data, trigger }) => {
-      const isFilesMode = data.referencePath !== null;
+      const isFilesMode = data.referenceLocation.view === 'files';
+      const isProjectsMode = data.referenceLocation.view === 'projects';
       const isBrowsing = isFilesMode && !trigger.query.trim();
+      const referencePath = data.referenceLocation.view === 'files'
+        ? data.referenceLocation.path
+        : '';
       const workspaceItems = buildWorkspaceReferenceItems({
         entries: data.serverPathEntries,
         navigateDirectories: isBrowsing,
         projectRoot: data.projectRoot,
         texts: params.itemTexts.context,
       });
-      const currentDirectoryItem = isBrowsing && data.referencePath
+      const projectItems = buildProjectReferenceItems({
+        projects: data.projects,
+        query: trigger.query,
+        texts: params.itemTexts.context,
+      });
+      const currentDirectoryItem = isBrowsing && referencePath
         ? buildCurrentDirectoryReferenceItem({
             projectRoot: data.projectRoot,
-            referencePath: data.referencePath,
+            referencePath,
             texts: params.itemTexts.context,
           })
         : null;
       const items = isFilesMode
         ? [
             buildBackNavigationItem({
-              referencePath: data.referencePath ?? '',
+              location: data.referenceLocation,
               texts: params.itemTexts.context,
             }),
             ...(currentDirectoryItem ? [currentDirectoryItem] : []),
             ...workspaceItems,
           ]
-        : [
+        : isProjectsMode
+          ? [
+              buildBackNavigationItem({
+                location: data.referenceLocation,
+                texts: params.itemTexts.context,
+              }),
+              ...projectItems,
+            ]
+          : [
             buildFilesNavigationItem(params.itemTexts.context),
+            buildProjectsNavigationItem(params.itemTexts.context),
             ...(trigger.query ? workspaceItems : []),
+            ...(trigger.query ? projectItems : []),
             ...buildPanelAppReferenceItems({
               entries: data.panelApps,
               query: trigger.query,
@@ -329,25 +206,37 @@ export function createContextReferenceInputSurfacePlugin(params: {
           ];
       const relevantLoading = isFilesMode
         ? data.isServerPathSearchLoading
-        : data.isPanelAppsLoading || (Boolean(trigger.query) && data.isServerPathSearchLoading);
+        : isProjectsMode
+          ? data.isProjectsLoading
+          : data.isPanelAppsLoading ||
+            (Boolean(trigger.query) && (data.isProjectsLoading || data.isServerPathSearchLoading));
+      const errorMessage = isProjectsMode && data.projectsError
+        ? `${params.itemTexts.context.projectsLoadFailedLabel}: ${data.projectsError}`
+        : data.serverPathSearchError
+          ? `${params.itemTexts.context.searchFailedLabel}: ${data.serverPathSearchError}`
+          : null;
       return {
-        isLoading: isFilesMode
-          ? relevantLoading
-          : relevantLoading && items.length === 0,
+        isLoading: isProjectsMode ? relevantLoading : relevantLoading && items.length === 0,
         items,
-        notice: data.serverPathSearchError
+        notice: errorMessage
           ? {
-              message: `${params.itemTexts.context.searchFailedLabel}: ${data.serverPathSearchError}`,
+              message: errorMessage,
               tone: 'error',
             }
           : undefined,
         onSelectItem: (item) => {
           if (item.key === FILES_NAVIGATION_ITEM_KEY) {
-            params.onNavigate('');
+            params.onNavigate({ view: 'files', path: '' });
+          } else if (item.key === PROJECTS_NAVIGATION_ITEM_KEY) {
+            params.onNavigate({ view: 'projects' });
           } else if (item.key === ROOT_NAVIGATION_ITEM_KEY) {
-            params.onNavigate(data.referencePath ? item.value ?? '' : null);
+            params.onNavigate(
+              isFilesMode && referencePath
+                ? { view: 'files', path: item.value ?? '' }
+                : { view: 'root' },
+            );
           } else if (item.selectionBehavior === 'navigate' && item.value) {
-            params.onNavigate(item.value);
+            params.onNavigate({ view: 'files', path: item.value });
           }
         },
         texts: params.menuTexts,

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

@@ -226,6 +226,35 @@ describe('chat inline token workspace references', () => {
     ]);
   });
 
+  it('serializes project references with their registered path and display name', () => {
+    expect(
+      buildInlineTokensFromComposer([
+        createChatComposerTokenNode({
+          tokenKind: 'project',
+          tokenKey: '/tmp/NextClaw Project',
+          label: 'NextClaw',
+        }),
+      ]),
+    ).toEqual([
+      {
+        kind: 'project',
+        key: '/tmp/NextClaw Project',
+        label: 'NextClaw',
+        rawText: '@project:%2Ftmp%2FNextClaw%20Project',
+      },
+    ]);
+    expect(
+      buildInlineTokensFromTextProtocol('review @project:%2Ftmp%2FNextClaw%20Project'),
+    ).toEqual([
+      {
+        kind: 'project',
+        key: '/tmp/NextClaw Project',
+        label: 'NextClaw Project',
+        rawText: '@project:%2Ftmp%2FNextClaw%20Project',
+      },
+    ]);
+  });
+
   it('resolves workspace token paths inside POSIX and Windows project roots', () => {
     expect(resolveWorkspaceReferencePath({
       projectRoot: '/tmp/project/',

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

@@ -1,10 +1,12 @@
 import {
+  CHAT_PROJECT_TOKEN_KIND,
   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_PROJECT_TOKEN_PREFIX = '@project:';
 const CHAT_WORKSPACE_FILE_TOKEN_PREFIX = '@file:';
 const CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX = '@folder:';
 
@@ -20,6 +22,9 @@ export function serializeChatComposerTokenText(params: {
   if (tokenKind === 'panel_app') {
     return `${CHAT_PANEL_APP_TOKEN_PREFIX}${tokenKey}`;
   }
+  if (tokenKind === CHAT_PROJECT_TOKEN_KIND) {
+    return `${CHAT_PROJECT_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
   if (tokenKind === CHAT_WORKSPACE_FILE_TOKEN_KIND) {
     return `${CHAT_WORKSPACE_FILE_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
   }

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

@@ -2,6 +2,7 @@ import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import {
   CHAT_INLINE_TOKENS_METADATA_KEY,
   CHAT_INLINE_TOKENS_SCHEMA_VERSION,
+  CHAT_PROJECT_TOKEN_KIND,
   CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
   CHAT_WORKSPACE_FILE_TOKEN_KIND,
   type ChatInlineTokenMetadata,
@@ -13,6 +14,7 @@ import { serializeChatComposerTokenText } from './chat-composer-token-protocol.u
 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_PROJECT_TOKEN_PATTERN = /@project:([^\s]+)/g;
 const CHAT_WORKSPACE_FILE_TOKEN_PATTERN = /@file:([^\s]+)/g;
 const CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN = /@folder:([^\s]+)/g;
 
@@ -96,6 +98,7 @@ export function buildInlineTokensFromComposer(
     }
     if (
       node.tokenKind !== 'skill' &&
+      node.tokenKind !== CHAT_PROJECT_TOKEN_KIND &&
       node.tokenKind !== CHAT_WORKSPACE_FILE_TOKEN_KIND &&
       node.tokenKind !== CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
     ) {
@@ -121,6 +124,15 @@ export function buildInlineTokensFromComposer(
       });
       continue;
     }
+    if (node.tokenKind === CHAT_PROJECT_TOKEN_KIND) {
+      tokens.push({
+        kind: CHAT_PROJECT_TOKEN_KIND,
+        key: node.tokenKey,
+        label: node.label,
+        rawText,
+      });
+      continue;
+    }
     const workspaceKind = node.tokenKind === CHAT_WORKSPACE_FILE_TOKEN_KIND
       ? CHAT_WORKSPACE_FILE_TOKEN_KIND
       : CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
@@ -134,8 +146,11 @@ export function buildInlineTokensFromComposer(
   return dedupeInlineTokens(tokens);
 }
 
-function appendWorkspaceTokens(params: {
-  kind: typeof CHAT_WORKSPACE_FILE_TOKEN_KIND | typeof CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
+function appendEncodedKeyTokens(params: {
+  kind:
+    | typeof CHAT_PROJECT_TOKEN_KIND
+    | typeof CHAT_WORKSPACE_FILE_TOKEN_KIND
+    | typeof CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
   pattern: RegExp;
   text: string;
   tokens: ChatInlineTokenSource[];
@@ -155,7 +170,7 @@ function appendWorkspaceTokens(params: {
     tokens.push({
       kind,
       key,
-      label: key.split('/').filter(Boolean).at(-1) ?? key,
+      label: key.split(/[\\/]+/).filter(Boolean).at(-1) ?? key,
       rawText: match[0],
     });
   }
@@ -175,13 +190,19 @@ export function buildInlineTokensFromTextProtocol(text: string): ChatInlineToken
       rawText: `${CHAT_PANEL_APP_TOKEN_PREFIX}${key}`
     });
   }
-  appendWorkspaceTokens({
+  appendEncodedKeyTokens({
+    kind: CHAT_PROJECT_TOKEN_KIND,
+    pattern: CHAT_PROJECT_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
+  appendEncodedKeyTokens({
     kind: CHAT_WORKSPACE_FILE_TOKEN_KIND,
     pattern: CHAT_WORKSPACE_FILE_TOKEN_PATTERN,
     text,
     tokens,
   });
-  appendWorkspaceTokens({
+  appendEncodedKeyTokens({
     kind: CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
     pattern: CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN,
     text,

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

@@ -72,6 +72,9 @@ it("renders panel apps through the shared adaptive inline surface", () => {
     <ChatInlinePanelAppCard
       panelApp={{
         appId: "weather-card",
+        params: {
+          city: "Shanghai",
+        },
         title: "Weather",
       }}
     />,
@@ -99,6 +102,8 @@ it("renders panel apps through the shared adaptive inline surface", () => {
   expect(iframe.getAttribute("src")).toBe(
     "/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline",
   );
+  expect(iframe.name).toContain('"city":"Shanghai"');
+  expect(iframe.getAttribute("src")).not.toContain("Shanghai");
 
   fireEvent(
     window,
@@ -118,6 +123,9 @@ it("renders panel apps through the shared adaptive inline surface", () => {
 
   expect(mocks.openTarget).toHaveBeenCalledWith(
     expect.objectContaining({
+      contentParams: {
+        city: "Shanghai",
+      },
       dedupeKey: "panel-app:weather-card",
       kind: "panel-app",
       title: "Weather",
@@ -126,6 +134,33 @@ it("renders panel apps through the shared adaptive inline surface", () => {
   );
 });
 
+it("replaces the inline iframe when params change at the same URL", () => {
+  const { rerender } = render(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: "weather-card",
+        params: { city: "Shanghai" },
+        title: "Weather",
+      }}
+    />,
+  );
+  const firstIframe = screen.getByTitle("Weather");
+
+  rerender(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: "weather-card",
+        params: { city: "Beijing" },
+        title: "Weather",
+      }}
+    />,
+  );
+
+  const nextIframe = screen.getByTitle("Weather") as HTMLIFrameElement;
+  expect(nextIframe).not.toBe(firstIframe);
+  expect(nextIframe.name).toContain('"city":"Beijing"');
+});
+
 it("renders and expands a panel app from an explicit external path", () => {
   render(
     <ChatInlinePanelAppCard

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

@@ -453,7 +453,7 @@ 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", () => {
+it("opens workspace and project reference tokens from the message", () => {
   captures.selectedSession = {
     projectRoot: "/tmp/project",
     workingDir: "/tmp/project/packages/ui",
@@ -474,6 +474,12 @@ it("opens workspace file and directory tokens from the message", () => {
     label: "server",
     rawText: "@folder:packages%2Fserver",
   });
+  onInlineTokenClick?.({
+    kind: "project",
+    key: "/tmp/nextclaw",
+    label: "NextClaw",
+    rawText: "@project:%2Ftmp%2Fnextclaw",
+  });
 
   expect(captures.openFilePreview).toHaveBeenNthCalledWith(1, {
     path: "/tmp/project/docs/guide.md",
@@ -485,6 +491,11 @@ it("opens workspace file and directory tokens from the message", () => {
     label: "server",
     viewMode: "preview",
   });
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(3, {
+    path: "/tmp/nextclaw",
+    label: "NextClaw",
+    viewMode: "preview",
+  });
 });
 
 it("opens panel app tokens through the existing content owner", () => {

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

@@ -31,7 +31,7 @@ export function ChatInlineFilePreview({
   if (display.target.type !== "file") {
     return null;
   }
-  const { path, line, column, viewer } = display.target.payload;
+  const { path, line, column, params, viewer } = display.target.payload;
   const file = createWorkspaceFileTab(
     {
       path,
@@ -40,6 +40,7 @@ export function ChatInlineFilePreview({
       previewViewer: viewer,
       line,
       column,
+      params,
     },
     parentSessionKey,
   );
@@ -58,6 +59,7 @@ export function ChatInlineFilePreview({
       previewViewer,
       line: file.line ?? undefined,
       column: file.column ?? undefined,
+      params: file.params ?? undefined,
     });
   };
 

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

@@ -19,10 +19,11 @@ import { ChatInlineContentSurface } from "@/features/chat/features/message/compo
 import { useDocBrowser } from "@/shared/components/doc-browser";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
+import { createUiContentParamsWindowName } from "@nextclaw/shared";
 
 type ChatInlinePanelAppDescriptor = Pick<
   ChatPanelAppCardViewModel,
-  "appId" | "path" | "title"
+  "appId" | "params" | "path" | "title"
 >;
 
 export function ChatInlinePanelAppCard({
@@ -60,21 +61,27 @@ export function ChatInlinePanelAppCard({
     () =>
       createInlinePanelAppTab({
         appId: entry?.id ?? panelApp.appId,
+        params: panelApp.params,
         path: panelApp.path,
         title,
         url,
-      }),
-    [entry?.id, panelApp.appId, panelApp.path, title, url],
+    }),
+    [entry?.id, panelApp.appId, panelApp.params, panelApp.path, title, url],
   );
-  const iframeInstanceId = `${tab.id}:${tab.navVersion}:${iframeId}`;
+  const contentParamsWindowName = createUiContentParamsWindowName(panelApp.params);
+  const iframeInstanceId = `${tab.id}:${tab.navVersion}:${iframeId}:${contentParamsWindowName ?? ""}`;
   const openExpanded = () => {
     if (target) {
-      docBrowser.openTarget(target);
+      docBrowser.openTarget({
+        ...target,
+        contentParams: panelApp.params,
+      });
       return;
     }
     docBrowser.open(url, {
       dedupeKey: tab.dedupeKey,
       kind: tab.kind,
+      contentParams: panelApp.params,
       title,
     });
   };
@@ -130,6 +137,7 @@ export function ChatInlinePanelAppCard({
         ref={iframeRef}
         key={iframeInstanceId}
         src={cardUrl}
+        name={contentParamsWindowName}
         title={title}
         sandbox={PANEL_APP_IFRAME_SANDBOX}
         tabIndex={0}

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

@@ -6,6 +6,7 @@ import {
   type RefObject,
 } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
+import { CHAT_PROJECT_TOKEN_KIND } from "@nextclaw/shared";
 import { toast } from "sonner";
 import {
   type ChatInlineDisplayViewModel,
@@ -145,6 +146,7 @@ function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
     <ChatInlinePanelAppCard
       panelApp={{
         appId: display.target.payload.appId,
+        params: display.target.payload.params,
         path: display.target.payload.path,
         title: display.title,
       }}
@@ -345,13 +347,16 @@ export function ChatMessageListContainer({
       }
       if (
         "key" in token &&
-        (token.kind === "workspace_file" ||
+        (token.kind === CHAT_PROJECT_TOKEN_KIND ||
+          token.kind === "workspace_file" ||
           token.kind === "workspace_directory")
       ) {
-        const path = resolveWorkspaceReferencePath({
-          projectRoot: selectedSession?.projectRoot,
-          relativePath: token.key,
-        });
+        const path = token.kind === CHAT_PROJECT_TOKEN_KIND
+          ? token.key
+          : resolveWorkspaceReferencePath({
+              projectRoot: selectedSession?.projectRoot,
+              relativePath: token.key,
+            });
         if (path) {
           presenter.chatThreadManager.openFilePreview({
             path,