@nextclaw/ui 0.15.18 → 0.15.19

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

@@ -145,6 +145,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,
       }}

package/src/features/chat/features/message/utils/__tests__/chat-message-show-content-tool-card.utils.test.ts

@@ -150,6 +150,9 @@ describe("buildShowContentToolCard", () => {
               payload: {
                 appId: "reader",
                 path: "/tmp/reader.panel",
+                params: {
+                  file: { path: "/tmp/photo.png" },
+                },
               },
             },
             title: "Reader",
@@ -166,6 +169,9 @@ describe("buildShowContentToolCard", () => {
       panelApp: {
         appId: "reader",
         path: "/tmp/reader.panel",
+        params: {
+          file: { path: "/tmp/photo.png" },
+        },
         title: "Reader",
         action: {
           kind: "show-content",
@@ -176,6 +182,9 @@ describe("buildShowContentToolCard", () => {
               payload: {
                 appId: "reader",
                 path: "/tmp/reader.panel",
+                params: {
+                  file: { path: "/tmp/photo.png" },
+                },
               },
             },
             title: "Reader",

package/src/features/chat/features/message/utils/chat-inline-panel-app-card.utils.ts

@@ -5,6 +5,7 @@ import {
 } from "@/features/right-panel-resources";
 import { PANEL_APP_INLINE_HOST_CONTRACT } from "@nextclaw/shared";
 import type { DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
+import type { ChatContentParams } from "@nextclaw/agent-chat-ui";
 
 export function createFallbackPanelAppContentPath(appId: string, sourcePath?: string): string {
   return createPanelAppContentPath(appId, sourcePath);
@@ -37,11 +38,13 @@ export function readInlinePanelAppContentHeight(value: unknown): number | null {
 export function createInlinePanelAppTab(params: {
   appId: string;
   path?: string;
+  params?: ChatContentParams;
   title: string;
   url: string;
 }): DocBrowserTab {
-  const { appId, path, title, url } = params;
+  const { appId, params: contentParams, path, title, url } = params;
   return {
+    contentParams,
     currentUrl: url,
     dedupeKey: `panel-app:${path ?? appId}`,
     history: [url],

package/src/features/chat/features/message/utils/chat-message-show-content-tool-card.utils.ts

@@ -7,6 +7,10 @@ import type {
 import type {
   ToolCardViewSource,
 } from "./chat-message-tool-card.utils";
+import {
+  readUiContentParams,
+  type UiContentParams,
+} from "@nextclaw/shared";
 
 const SHOW_CONTENT_TOOL_NAMES = ["show_content", "show_file", "show_url", "show_panel_app"];
 
@@ -56,6 +60,14 @@ function readFileViewer(value: unknown): NonNullable<
     : undefined;
 }
 
+function readContentParams(value: unknown): UiContentParams | undefined | null {
+  try {
+    return readUiContentParams(value);
+  } catch {
+    return null;
+  }
+}
+
 function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null {
   if (!isRecord(value) || !isRecord(value.target)) {
     return null;
@@ -78,6 +90,16 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
     if (!path) {
       return null;
     }
+    const params = readContentParams(payload.params);
+    if (
+      params === null ||
+      (params && (
+        readFileViewer(payload.viewer) === "source" ||
+        !/\.html?$/i.test(path)
+      ))
+    ) {
+      return null;
+    }
     return {
       target: {
         type: "file",
@@ -86,6 +108,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
           line: readOptionalPositiveInteger(payload.line),
           column: readOptionalPositiveInteger(payload.column),
           viewer: readFileViewer(payload.viewer),
+          params: params ?? undefined,
         },
       },
       title,
@@ -116,12 +139,17 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
   if (!appId) {
     return null;
   }
+  const params = readContentParams(payload.params);
+  if (params === null) {
+    return null;
+  }
   return {
     target: {
       type: "panel_app",
       payload: {
         appId,
         path: readOptionalString(payload.path),
+        params: params ?? undefined,
       },
     },
     title,
@@ -180,6 +208,7 @@ export function buildShowContentToolCard(params: {
     ? {
         appId: request.target.payload.appId,
         path: request.target.payload.path,
+        params: request.target.payload.params,
         title: request.title,
         action: showContentAction,
       }

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

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

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-agent-runtime-queue.test.tsx

@@ -1,11 +1,17 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { NcpEventType, type NcpAgentClientEndpoint } from '@nextclaw/ncp';
+import {
+  NcpEventType,
+  type NcpAgentClientEndpoint,
+  type NcpAgentSendEnvelope,
+  type NcpEndpointSubscriber,
+  type NcpMessage,
+} from '@nextclaw/ncp';
 import { useNcpAgentRuntime } from '@nextclaw/ncp-react';
 import { DefaultNcpAgentConversationStateManager } from '@nextclaw/ncp-toolkit';
 
 describe('useNcpAgentRuntime backend queue submission', () => {
-  it('forwards and immediately shows a new message while a run is active', async () => {
+  it('keeps a queued message out of the conversation until the backend starts it', async () => {
     const manager = new DefaultNcpAgentConversationStateManager();
     manager.hydrate({ sessionId: 'session-1', messages: [] });
     await manager.dispatch({
@@ -16,18 +22,22 @@ describe('useNcpAgentRuntime backend queue submission', () => {
         messageId: 'assistant-1',
       },
     });
-    const send = vi.fn(async () => ({
+    const send = vi.fn(async (envelope: NcpAgentSendEnvelope) => ({
       assistantMessageId: null,
       runId: null,
       sessionId: 'session-1',
-      userMessageId: 'user-queued',
+      userMessageId: envelope.message.id,
     }));
+    let subscriber: NcpEndpointSubscriber | null = null;
     const client = {
       abort: vi.fn(async () => undefined),
       send,
       stop: vi.fn(async () => undefined),
       stream: vi.fn(async () => undefined),
-      subscribe: vi.fn(() => () => undefined),
+      subscribe: vi.fn((listener: NcpEndpointSubscriber) => {
+        subscriber = listener;
+        return () => undefined;
+      }),
     } as unknown as NcpAgentClientEndpoint;
     const { result } = renderHook(() => useNcpAgentRuntime({
       client,
@@ -46,13 +56,21 @@ describe('useNcpAgentRuntime backend queue submission', () => {
         parts: [{ type: 'text', text: 'queue this' }],
       }),
     }));
-    expect(result.current.visibleMessages).toEqual([
-      expect.objectContaining({
-        sessionId: 'session-1',
-        role: 'user',
-        status: 'final',
-        parts: [{ type: 'text', text: 'queue this' }],
-      }),
-    ]);
+    expect(result.current.visibleMessages).toEqual([]);
+
+    const queuedMessage = send.mock.calls[0][0].message as NcpMessage;
+    await act(async () => {
+      subscriber?.({
+        type: NcpEventType.MessageSent,
+        payload: {
+          sessionId: 'session-1',
+          message: queuedMessage,
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toEqual([queuedMessage]);
+    });
   });
 });

package/src/features/chat/features/workspace/components/__tests__/workspace-file-content-preview.test.tsx

@@ -87,3 +87,44 @@ it("reports same-origin HTML height changes without replacing the iframe", () =>
   unmount();
   expect(disconnect).toHaveBeenCalledTimes(1);
 });
+
+it("passes params through window.name without exposing values in the content URL", () => {
+  const { rerender } = render(
+    <WorkspaceFileContentPreview
+      contentUrl="/api/server-paths/content?path=%2Ftmp%2Fchart.html"
+      contentParams={{
+        chart: {
+          series: [3, 5, 8],
+        },
+      }}
+      kind="html"
+      label="chart.html"
+    />,
+  );
+
+  const frame = screen.getByTestId(
+    "workspace-html-preview",
+  ) as HTMLIFrameElement;
+  expect(frame.name).toContain('"series":[3,5,8]');
+  expect(frame.src).toContain("nextclawContentParams=1");
+  expect(frame.src).not.toContain("series");
+
+  rerender(
+    <WorkspaceFileContentPreview
+      contentUrl="/api/server-paths/content?path=%2Ftmp%2Fchart.html"
+      contentParams={{
+        chart: {
+          series: [13, 21, 34],
+        },
+      }}
+      kind="html"
+      label="chart.html"
+    />,
+  );
+
+  const nextFrame = screen.getByTestId(
+    "workspace-html-preview",
+  ) as HTMLIFrameElement;
+  expect(nextFrame).not.toBe(frame);
+  expect(nextFrame.name).toContain('"series":[13,21,34]');
+});

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -185,6 +185,7 @@ function WorkspacePreviewBody({
   contentUrl,
   contentUrlKind,
   contentLabel,
+  contentParams,
   directoryQuery,
   fileBasePath,
   onFileOpen,
@@ -200,6 +201,7 @@ function WorkspacePreviewBody({
   contentUrl: string | null;
   contentUrlKind: WorkspaceFileContentKind | null;
   contentLabel: string;
+  contentParams: ChatWorkspaceFileTab["params"];
   directoryQuery: ReturnType<typeof useServerPathBrowse> | null | undefined;
   fileBasePath: string | null;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
@@ -216,6 +218,7 @@ function WorkspacePreviewBody({
     return (
       <WorkspaceFileContentPreview
         contentUrl={contentUrl}
+        contentParams={contentParams ?? undefined}
         kind={contentUrlKind}
         label={contentLabel}
         onHtmlContentHeightChange={onHtmlContentHeightChange}
@@ -424,6 +427,7 @@ export function ChatSessionWorkspaceFilePreview({
             contentUrl={contentUrl}
             contentUrlKind={contentUrlKind}
             contentLabel={file.label?.trim() || resolvedPath}
+            contentParams={file.params}
             directoryQuery={directoryQuery}
             fileBasePath={sessionWorkingDir}
             onFileOpen={onFileOpen}

package/src/features/chat/features/workspace/components/workspace-file-content-preview.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useRef } from "react";
-import { readInlineContentHeight } from "@nextclaw/shared";
+import {
+  appendUiContentParamsBootstrapQuery,
+  createUiContentParamsWindowName,
+  readInlineContentHeight,
+  type UiContentParams,
+} from "@nextclaw/shared";
 import { WorkspaceDocxPreview } from "./file-content-preview/workspace-docx-preview";
 import { WorkspacePresentationPreview } from "./file-content-preview/workspace-presentation-preview";
 import { WorkspaceSpreadsheetPreview } from "./file-content-preview/workspace-spreadsheet-preview";
@@ -119,15 +124,18 @@ function WorkspaceUnsupportedContent({
 
 function WorkspaceHtmlPreview({
   contentUrl,
+  contentParams,
   label,
   onContentHeightChange,
 }: {
   contentUrl: string;
+  contentParams?: UiContentParams;
   label: string;
   onContentHeightChange?: (height: number) => void;
 }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const observerCleanupRef = useRef<(() => void) | null>(null);
+  const contentParamsWindowName = createUiContentParamsWindowName(contentParams);
 
   useEffect(
     () => () => {
@@ -177,10 +185,12 @@ function WorkspaceHtmlPreview({
   return (
     <iframe
       ref={iframeRef}
+      key={contentParamsWindowName ?? "no-content-params"}
       allowFullScreen
       className="h-full w-full border-0 bg-white"
       data-testid="workspace-html-preview"
-      src={contentUrl}
+      name={contentParamsWindowName}
+      src={appendUiContentParamsBootstrapQuery(contentUrl, contentParams)}
       title={label}
       onLoad={observeContentHeight}
     />
@@ -189,11 +199,13 @@ function WorkspaceHtmlPreview({
 
 export function WorkspaceFileContentPreview({
   contentUrl,
+  contentParams,
   kind,
   label,
   onHtmlContentHeightChange,
 }: {
   contentUrl: string;
+  contentParams?: UiContentParams;
   kind: WorkspaceFileContentKind;
   label: string;
   onHtmlContentHeightChange?: (height: number) => void;
@@ -243,6 +255,7 @@ export function WorkspaceFileContentPreview({
     return (
       <WorkspaceHtmlPreview
         contentUrl={contentUrl}
+        contentParams={contentParams}
         label={label}
         onContentHeightChange={onHtmlContentHeightChange}
       />

package/src/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils.ts

@@ -1,5 +1,6 @@
 import type { ChatFilePreviewViewer } from '@nextclaw/agent-chat-ui';
 import type { ChatWorkspaceFileTab } from '@/features/chat/stores/chat-thread.store';
+import { readUiContentParams } from '@nextclaw/shared';
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object';
@@ -27,6 +28,14 @@ function normalizeFilePreviewViewer(value: unknown): ChatFilePreviewViewer | nul
     : null;
 }
 
+function normalizeContentParams(value: unknown): ChatWorkspaceFileTab['params'] {
+  try {
+    return readUiContentParams(value) ?? null;
+  } catch {
+    return null;
+  }
+}
+
 export function normalizePersistedWorkspaceFileTab(
   value: unknown,
 ): ChatWorkspaceFileTab | null {
@@ -52,6 +61,7 @@ export function normalizePersistedWorkspaceFileTab(
     previewViewer: normalizeFilePreviewViewer(value.previewViewer),
     line: normalizeOptionalNumber(value.line),
     column: normalizeOptionalNumber(value.column),
+    params: normalizeContentParams(value.params),
     rawText: normalizeOptionalText(value.rawText),
     contentUrl: normalizeOptionalString(value.contentUrl),
     mimeType: normalizeOptionalString(value.mimeType),
@@ -75,6 +85,7 @@ export function toPersistedWorkspaceFileTab(
     previewViewer: tab.previewViewer,
     line: tab.line,
     column: tab.column,
+    params: tab.params,
     rawText: tab.rawText,
     contentUrl: tab.contentUrl,
     mimeType: tab.mimeType,

package/src/features/chat/features/workspace/utils/chat-workspace-file-tab.utils.ts

@@ -29,6 +29,7 @@ export function createWorkspaceFileTab(
     previewViewer,
     line: action.line ?? null,
     column: action.column ?? null,
+    params: action.params ?? null,
     rawText: action.rawText ?? null,
     contentUrl: action.contentUrl?.trim() || null,
     mimeType: action.mimeType?.trim() || null,

package/src/features/chat/managers/__tests__/chat-thread.manager.test.ts

@@ -301,13 +301,15 @@ describe('ChatThreadManager', () => {
     );
 
     manager.openFilePreview({
-      path: 'README.md',
-      label: 'README.md',
+      path: 'chart.html',
+      label: 'Chart',
       viewMode: 'preview',
+      previewViewer: 'rendered',
+      params: { chart: { series: [3, 5, 8] } },
     });
     manager.openFilePreview({
-      path: 'README.md',
-      label: 'README.md',
+      path: 'chart.html',
+      label: 'Chart',
       viewMode: 'diff',
       beforeText: 'old\n',
       afterText: 'new\n',
@@ -316,13 +318,14 @@ describe('ChatThreadManager', () => {
     expect(useChatThreadStore.getState().snapshot.workspaceFileTabs).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          key: 'parent-session-1::preview:rendered::README.md',
-          path: 'README.md',
+          key: 'parent-session-1::preview:rendered::chart.html',
+          path: 'chart.html',
           viewMode: 'preview',
+          params: { chart: { series: [3, 5, 8] } },
         }),
         expect.objectContaining({
-          key: 'parent-session-1::diff::README.md',
-          path: 'README.md',
+          key: 'parent-session-1::diff::chart.html',
+          path: 'chart.html',
           viewMode: 'diff',
         }),
       ]),

package/src/features/chat/managers/__tests__/chat-ui.manager.test.ts

@@ -88,6 +88,9 @@ describe('ChatUiManager content display', () => {
         type: 'panel_app',
         payload: {
           appId: 'reader',
+          params: {
+            file: { path: '/tmp/photo.png' },
+          },
         },
       },
       title: 'Reader',
@@ -95,6 +98,9 @@ describe('ChatUiManager content display', () => {
 
     expect(docBrowserManager.openTarget).toHaveBeenCalledWith({
       dedupeKey: 'panel-app:encoded-reader',
+      contentParams: {
+        file: { path: '/tmp/photo.png' },
+      },
       historyPolicy: 'managed',
       kind: 'panel-app',
       resourceUri: 'nextclaw://panel-app/encoded-reader',

package/src/features/chat/managers/chat-thread.manager.ts

@@ -347,6 +347,7 @@ export class ChatThreadManager {
       previewViewer: nextViewer,
       line: sourceTab.line ?? undefined,
       column: sourceTab.column ?? undefined,
+      params: sourceTab.params ?? undefined,
       rawText: sourceTab.rawText ?? undefined,
       contentUrl: sourceTab.contentUrl ?? undefined,
       mimeType: sourceTab.mimeType ?? undefined,
@@ -419,6 +420,7 @@ export class ChatThreadManager {
         previewViewer: request.target.payload.viewer,
         line: request.target.payload.line,
         column: request.target.payload.column,
+        params: request.target.payload.params,
       });
       return;
     }

package/src/features/chat/managers/chat-ui.manager.ts

@@ -96,21 +96,27 @@ export class ChatUiManager {
       });
       return;
     }
-    const { appId, path } = target.payload;
+    const { appId, params: contentParams, path } = target.payload;
     if (path) {
       this.docBrowserManager.open(createPanelAppResourceUri(appId, path), {
+        contentParams,
         title,
       });
       return;
     }
     const entry = await this.resolvePanelAppEntry(appId);
     if (entry) {
-      this.docBrowserManager.openTarget(createPanelAppRightPanelResourceTarget(entry), {
-        title,
-      });
+      this.docBrowserManager.openTarget(
+        {
+          ...createPanelAppRightPanelResourceTarget(entry),
+          contentParams,
+        },
+        { title },
+      );
       return;
     }
     this.docBrowserManager.open(createPanelAppResourceUri(appId), {
+      contentParams,
       title,
     });
   };

package/src/features/chat/stores/__tests__/chat-thread.store.test.ts

@@ -60,6 +60,7 @@ describe('chat thread workspace panel persistence', () => {
           label: 'README.md',
           viewMode: 'preview',
           previewViewer: 'rendered',
+          params: { chart: { series: [3, 5, 8] } },
           rawText: '# Hello',
           fullLines: [],
         },
@@ -98,6 +99,9 @@ describe('chat thread workspace panel persistence', () => {
     expect(persisted.state.snapshot.isSending).toBeUndefined();
     expect(persisted.state.snapshot.workspaceFileTabs[0].rawText).toBe('# Hello');
     expect(persisted.state.snapshot.workspaceFileTabs[0].previewViewer).toBe('rendered');
+    expect(persisted.state.snapshot.workspaceFileTabs[0].params).toEqual({
+      chart: { series: [3, 5, 8] },
+    });
     expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toBeUndefined();
   });
 

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

@@ -1,7 +1,11 @@
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type { NcpMessage } from '@nextclaw/ncp';
-import type { ChatFileOperationLineViewModel, ChatFilePreviewViewer } from '@nextclaw/agent-chat-ui';
+import type {
+  ChatContentParams,
+  ChatFileOperationLineViewModel,
+  ChatFilePreviewViewer,
+} from '@nextclaw/agent-chat-ui';
 import type {
   SessionContextWindowView,
   SessionTypeIconView
@@ -38,6 +42,7 @@ export type ChatWorkspaceFileTab = {
   previewViewer?: ChatFilePreviewViewer | null;
   line?: number | null;
   column?: number | null;
+  params?: ChatContentParams | null;
   rawText?: string | null;
   /** Attachment/binary content URL for workspace-native media preview. */
   contentUrl?: string | null;