@nextclaw/ui 0.15.17 → 0.15.19

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -7,7 +7,10 @@ import {
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { ArrowDown } from "lucide-react";
-import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import {
+  ChatContextCompactionDivider,
+  ChatMessageListContainer,
+} from "@/features/chat/features/message/components/chat-message-list.container";
 import { ChatConversationTrack } from "@/features/chat/components/conversation/chat-conversation-track";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
@@ -19,6 +22,7 @@ type ChatConversationContentProps = {
   hasPreviousMessages: boolean;
   historyError: Error | null;
   isLoadingPreviousMessages: boolean;
+  isContextCompacting?: boolean;
   isSending: boolean;
   messages: readonly NcpMessage[];
   sessionKey: string | null;
@@ -34,6 +38,7 @@ export function ChatConversationContent({
   hasPreviousMessages,
   historyError,
   isLoadingPreviousMessages,
+  isContextCompacting = false,
   isSending,
   messages,
   sessionKey,
@@ -110,6 +115,7 @@ export function ChatConversationContent({
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
                 />
+                {isContextCompacting ? <ChatContextCompactionDivider /> : null}
               </ChatConversationTrack>
             ) : null}
             {bottomSlot ? (

package/src/features/chat/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -1,5 +1,5 @@
 import { memo, type ReactNode } from "react";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 
@@ -20,7 +20,6 @@ const mocks = vi.hoisted(() => {
     setAttachments: vi.fn(),
     addAttachments: vi.fn(() => []),
     removeAttachment: vi.fn(),
-    setSelectedModel: vi.fn(),
     setSelectedThinkingLevel: vi.fn(),
     syncSessionPreferences: vi.fn(),
     setPendingSessionType: vi.fn(),
@@ -43,9 +42,9 @@ const mocks = vi.hoisted(() => {
     sendError: null,
   };
   const inputQuery = {
-    defaultModel: undefined,
+    defaultModel: undefined as string | undefined,
     defaultProjectRoot: null,
-    fallbackPreferredModel: undefined,
+    fallbackPreferredModel: undefined as string | undefined,
     fallbackPreferredThinking: null,
     isProviderStateResolved: true,
     isSkillsLoading: false,
@@ -138,17 +137,20 @@ vi.mock(
   () => ({
     ChatConversationContent: ({
       bottomSlot,
+      isContextCompacting,
       messages,
       showWelcome,
       welcomeSlot,
     }: {
       bottomSlot?: ReactNode;
+      isContextCompacting?: boolean;
       messages: readonly unknown[];
       showWelcome: boolean;
       welcomeSlot?: ReactNode;
     }) => (
       <div
         data-testid="conversation-content"
+        data-context-compacting={String(Boolean(isContextCompacting))}
         data-show-welcome={String(showWelcome)}
       >
         {showWelcome ? (
@@ -264,7 +266,10 @@ describe("SessionConversationArea input boundary", () => {
     mocks.agent.isRunning = true;
     mocks.agent.isSending = true;
     mocks.agent.snapshot.contextWindow = null;
+    mocks.inputQuery.defaultModel = undefined;
+    mocks.inputQuery.fallbackPreferredModel = undefined;
     mocks.inputQuery.selectedSession = null;
+    mocks.inputQuery.sessionTypeState.selectedSessionType = "default";
   });
 
   it("passes running state without treating an active run as a send request in flight", () => {
@@ -297,6 +302,23 @@ describe("SessionConversationArea input boundary", () => {
     expect(mocks.inputRenderSpy).toHaveBeenCalledOnce();
   });
 
+  it("shows compaction feedback only for the active session", () => {
+    renderArea("session-1");
+    const inputProps = mocks.inputRenderSpy.mock.calls[0]?.[0] as {
+      onContextCompactingChange: (sessionId: string, isCompacting: boolean) => void;
+    };
+
+    act(() => inputProps.onContextCompactingChange("session-1", true));
+
+    expect(screen.getByTestId("conversation-content").dataset.contextCompacting)
+      .toBe("true");
+
+    act(() => inputProps.onContextCompactingChange("session-1", false));
+
+    expect(screen.getByTestId("conversation-content").dataset.contextCompacting)
+      .toBe("false");
+  });
+
   it("does not replace the welcome composer just because draft send starts", () => {
     renderArea(null);
 
@@ -330,6 +352,30 @@ describe("SessionConversationArea input boundary", () => {
     expect(mocks.initialPromptSpy).toHaveBeenCalledWith("每天整理项目风险");
   });
 
+  it("syncs draft preferences with the selected runtime context", () => {
+    mocks.inputQuery.defaultModel = "openai/gpt-5";
+    mocks.inputQuery.fallbackPreferredModel = "minimax/MiniMax-M3";
+    const rendered = renderArea(null);
+    mocks.inputActions.syncSessionPreferences.mockClear();
+
+    mocks.inputQuery.sessionTypeState.selectedSessionType = "codex";
+    rendered.rerender(
+      <MemoryRouter>
+        <SessionConversationArea sessionKey={null} />
+      </MemoryRouter>,
+    );
+
+    expect(mocks.inputActions.syncSessionPreferences).toHaveBeenCalledOnce();
+    expect(mocks.inputActions.syncSessionPreferences).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        defaultModel: "openai/gpt-5",
+        fallbackPreferredModel: "minimax/MiniMax-M3",
+        selectedSessionKey: null,
+        selectedSessionType: "codex",
+      }),
+    );
+  });
+
   it("surfaces selected-session failure previews at the conversation bottom", () => {
     mocks.inputQuery.selectedSession = {
       activityPreview: {

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
@@ -200,6 +200,23 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     inputSnapshot,
     setPendingSessionType: inputActions.setPendingSessionType,
   });
+  const [compactingSessionIds, setCompactingSessionIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const handleContextCompactingChange = useCallback(
+    (compactingSessionId: string, isCompacting: boolean) => {
+      setCompactingSessionIds((current) => {
+        const next = new Set(current);
+        if (isCompacting) {
+          next.add(compactingSessionId);
+        } else {
+          next.delete(compactingSessionId);
+        }
+        return next;
+      });
+    },
+    [],
+  );
   useEffect(() => {
     inputActions.syncSessionPreferences({
       defaultModel: inputQuery.defaultModel,
@@ -208,6 +225,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
       modelOptions: inputQuery.modelOptions,
       selectedSessionExists: Boolean(inputQuery.selectedSession),
       selectedSessionKey: inputQuery.selectedSessionKey,
+      selectedSessionType: inputQuery.sessionTypeState.selectedSessionType,
       selectedSessionPreferredModel:
         inputQuery.selectedSession?.preferredModel ?? undefined,
       selectedSessionPreferredThinking:
@@ -221,6 +239,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     inputQuery.modelOptions,
     inputQuery.selectedSession,
     inputQuery.selectedSessionKey,
+    inputQuery.sessionTypeState.selectedSessionType,
   ]);
   useSessionConversationDraftRouteState({
     sessionKey,
@@ -336,6 +355,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         inputActions={inputActions}
         inputQuery={inputQuery}
         inputSnapshot={displayInputSnapshot}
+        onContextCompactingChange={handleContextCompactingChange}
         surface={surface}
       />
     ),
@@ -345,6 +365,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
       inputController,
       inputActions,
       inputQuery,
+      handleContextCompactingChange,
     ],
   );
   const showWelcome =
@@ -365,6 +386,9 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         isHistoryLoading={agent.isHydrating}
         isLoadingPreviousMessages={agent.isLoadingPreviousMessages}
         isSending={controller.isSending}
+        isContextCompacting={Boolean(
+          sessionKey && compactingSessionIds.has(sessionKey),
+        )}
         bottomSlot={sessionFailureSlot}
         messages={agent.visibleMessages}
         sessionKey={sessionKey}

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -192,6 +192,7 @@ type SessionConversationInputProps = {
   readonly inputActions: SessionConversationInputActions;
   readonly inputQuery: SessionConversationInputQuery;
   readonly inputSnapshot: SessionConversationInputSnapshot;
+  readonly onContextCompactingChange?: (sessionId: string, isCompacting: boolean) => void;
   readonly surface?: 'default' | 'embedded';
 };
 
@@ -202,6 +203,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     inputActions,
     inputQuery,
     inputSnapshot,
+    onContextCompactingChange,
     surface = 'default',
   } = props;
   const presenter = usePresenter();
@@ -225,6 +227,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   });
   const slashCommands = useSessionConversationSlashCommands({
     language,
+    onContextCompactingChange,
     selectedSessionKey: inputQuery.selectedSessionKey,
   });
   const handleSlashPanelAppSelect = useCallback(

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-input-state.test.tsx

@@ -36,6 +36,7 @@ describe('useSessionConversationInputState session preferences', () => {
         modelOptions: MODEL_OPTIONS,
         selectedSessionExists: true,
         selectedSessionKey: 'session-a',
+        selectedSessionType: 'native',
         selectedSessionPreferredModel: 'deepseek/deepseek-v4-flash',
       });
     });
@@ -46,6 +47,7 @@ describe('useSessionConversationInputState session preferences', () => {
         modelOptions: MODEL_OPTIONS,
         selectedSessionExists: false,
         selectedSessionKey: 'session-b',
+        selectedSessionType: 'native',
       });
     });
     expect(result.current.inputSnapshot.selectedModel).toBe('deepseek/deepseek-v4-flash');
@@ -55,9 +57,48 @@ describe('useSessionConversationInputState session preferences', () => {
         modelOptions: MODEL_OPTIONS,
         selectedSessionExists: true,
         selectedSessionKey: 'session-b',
+        selectedSessionType: 'native',
         selectedSessionPreferredModel: 'minimax/MiniMax-M3',
       });
     });
     expect(result.current.inputSnapshot.selectedModel).toBe('minimax/MiniMax-M3');
   });
+
+  it('prefers the runtime recent model and otherwise restores the runtime default in a draft', () => {
+    const { result } = renderHook(() => useSessionConversationInputState());
+
+    act(() => {
+      result.current.inputActions.syncSessionPreferences({
+        fallbackPreferredModel: 'deepseek/deepseek-v4-flash',
+        modelOptions: MODEL_OPTIONS,
+        selectedSessionExists: false,
+        selectedSessionKey: null,
+        selectedSessionType: 'native',
+      });
+    });
+    expect(result.current.inputSnapshot.selectedModel).toBe('deepseek/deepseek-v4-flash');
+
+    act(() => {
+      result.current.inputActions.syncSessionPreferences({
+        defaultModel: 'deepseek/deepseek-v4-flash',
+        fallbackPreferredModel: 'minimax/MiniMax-M3',
+        modelOptions: MODEL_OPTIONS,
+        selectedSessionExists: false,
+        selectedSessionKey: null,
+        selectedSessionType: 'codex',
+      });
+    });
+    expect(result.current.inputSnapshot.selectedModel).toBe('minimax/MiniMax-M3');
+
+    act(() => {
+      result.current.inputActions.syncSessionPreferences({
+        defaultModel: 'deepseek/deepseek-v4-flash',
+        modelOptions: MODEL_OPTIONS,
+        selectedSessionExists: false,
+        selectedSessionKey: null,
+        selectedSessionType: 'hermes',
+      });
+    });
+    expect(result.current.inputSnapshot.selectedModel).toBe('deepseek/deepseek-v4-flash');
+  });
 });

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-slash-commands.test.tsx

@@ -68,6 +68,34 @@ describe('useSessionConversationSlashCommands', () => {
     ));
   });
 
+  it('reports visible compaction state for the lifetime of the request', async () => {
+    let resolveRequest!: () => void;
+    mocks.compactNcpSessionContext.mockReturnValue(new Promise((resolve) => {
+      resolveRequest = () => resolve({
+        compacted: true,
+        sessionId: 'session-1',
+      });
+    }));
+    const onContextCompactingChange = vi.fn();
+    const { result } = renderHook(() => useSessionConversationSlashCommands({
+      language: 'en',
+      selectedSessionKey: 'session-1',
+      onContextCompactingChange,
+    }));
+
+    act(() => result.current.find((entry) => entry.key === 'compact-context')?.onSelect());
+
+    expect(onContextCompactingChange).toHaveBeenCalledWith('session-1', true);
+    expect(onContextCompactingChange).not.toHaveBeenCalledWith('session-1', false);
+
+    act(() => resolveRequest());
+
+    await waitFor(() => expect(onContextCompactingChange).toHaveBeenLastCalledWith(
+      'session-1',
+      false,
+    ));
+  });
+
   it('does not expose session commands before a session exists', () => {
     const { result } = renderHook(() => useSessionConversationSlashCommands({
       language: 'en',

package/src/features/chat/features/conversation/hooks/use-session-conversation-input-query.ts

@@ -124,7 +124,7 @@ export function useSessionConversationInputQuery(params: UseSessionConversationI
   );
 
   return useMemo(() => ({
-    defaultModel: config?.agents.defaults.model,
+    defaultModel: sessionTypeState.selectedSessionTypeOption?.recommendedModel ?? config?.agents.defaults.model,
     defaultProjectRoot,
     fallbackPreferredModel,
     fallbackPreferredThinking,

package/src/features/chat/features/conversation/hooks/use-session-conversation-input-state.ts

@@ -53,7 +53,6 @@ export type SessionConversationInputActions = {
   readonly setAttachments: (attachments: readonly NcpDraftAttachment[]) => void;
   readonly addAttachments: (attachments: readonly NcpDraftAttachment[]) => readonly NcpDraftAttachment[];
   readonly removeAttachment: (attachmentId: string) => void;
-  readonly setSelectedModel: (model: SessionConversationInputStateValue) => void;
   readonly setSelectedThinkingLevel: (level: ThinkingLevel | null) => void;
   readonly syncSessionPreferences: (params: SessionConversationPreferenceSyncParams) => void;
   readonly setPendingSessionType: (sessionType: SetStateAction<string>) => void;

package/src/features/chat/features/conversation/hooks/use-session-conversation-preference-actions.ts

@@ -16,6 +16,7 @@ export type SessionConversationPreferenceSyncParams = {
   readonly modelOptions: ChatModelOption[];
   readonly selectedSessionExists: boolean;
   readonly selectedSessionKey?: string | null;
+  readonly selectedSessionType: string;
   readonly selectedSessionPreferredModel?: string;
   readonly selectedSessionPreferredThinking?: ThinkingLevel | null;
 };
@@ -34,10 +35,7 @@ export const useSessionConversationPreferenceActions = ({
   selectedThinkingLevel: currentSelectedThinkingLevel,
   updatePreferences,
 }: SessionConversationPreferenceActionsParams) => {
-  const previousSessionKeyRef = useRef<string | null | undefined>(undefined);
-  const setSelectedModel = useCallback((selectedModel: ConversationPreferenceValue) => {
-    updatePreferences({ selectedModel });
-  }, [updatePreferences]);
+  const previousPreferenceContextRef = useRef<string | undefined>(undefined);
   const setSelectedThinkingLevel = useCallback((selectedThinkingLevel: ThinkingLevel | null) => {
     updatePreferences({ selectedThinkingLevel });
   }, [updatePreferences]);
@@ -48,19 +46,21 @@ export const useSessionConversationPreferenceActions = ({
     modelOptions,
     selectedSessionExists,
     selectedSessionKey: sessionKey,
+    selectedSessionType,
     selectedSessionPreferredModel,
     selectedSessionPreferredThinking,
   }: SessionConversationPreferenceSyncParams) => {
     const selectedSessionKey = sessionKey ?? null;
-    const sessionChanged = previousSessionKeyRef.current !== selectedSessionKey;
-    const preserveCurrentPreference = sessionChanged && Boolean(selectedSessionKey) && !selectedSessionExists;
+    const preferenceContextKey = JSON.stringify([selectedSessionType, selectedSessionKey]);
+    const preferenceContextChanged = previousPreferenceContextRef.current !== preferenceContextKey;
+    const preserveCurrentPreference = preferenceContextChanged && Boolean(selectedSessionKey) && !selectedSessionExists;
     const selectedModel = resolveSelectedModelValue({
       currentSelectedModel: currentSelectedModel ?? undefined,
       modelOptions,
       selectedSessionPreferredModel,
       fallbackPreferredModel,
       defaultModel,
-      preferSessionPreferredModel: sessionChanged,
+      preferSessionPreferredModel: preferenceContextChanged,
       preserveCurrentSelectedModelOnSessionChange: preserveCurrentPreference,
     });
     const modelOption = modelOptions.find((option) => option.value === selectedModel);
@@ -72,7 +72,7 @@ export const useSessionConversationPreferenceActions = ({
       fallbackPreferredThinking,
       defaultThinkingLevel:
         (modelOption?.thinkingCapability?.default as ThinkingLevel | null | undefined) ?? null,
-      preferSessionPreferredThinking: sessionChanged,
+      preferSessionPreferredThinking: preferenceContextChanged,
       preserveCurrentSelectedThinkingOnSessionChange: preserveCurrentPreference,
     });
     if (
@@ -82,13 +82,12 @@ export const useSessionConversationPreferenceActions = ({
       updatePreferences({ selectedModel, selectedThinkingLevel });
     }
     if (!selectedSessionKey || selectedSessionExists) {
-      previousSessionKeyRef.current = selectedSessionKey;
+      previousPreferenceContextRef.current = preferenceContextKey;
     }
   }, [currentSelectedModel, currentSelectedThinkingLevel, updatePreferences]);
 
   return useMemo(() => ({
-    setSelectedModel,
     setSelectedThinkingLevel,
     syncSessionPreferences,
-  }), [setSelectedModel, setSelectedThinkingLevel, syncSessionPreferences]);
+  }), [setSelectedThinkingLevel, syncSessionPreferences]);
 };

package/src/features/chat/features/conversation/hooks/use-session-conversation-slash-commands.ts

@@ -7,9 +7,10 @@ import type { ChatSlashCommandDescriptor } from '@/features/chat/features/input/
 
 export function useSessionConversationSlashCommands(params: {
   language: I18nLanguage;
+  onContextCompactingChange?: (sessionId: string, isCompacting: boolean) => void;
   selectedSessionKey?: string | null;
 }): readonly ChatSlashCommandDescriptor[] {
-  const { language, selectedSessionKey } = params;
+  const { language, onContextCompactingChange, selectedSessionKey } = params;
   const presenter = usePresenter();
   const compactingSessionIdsRef = useRef(new Set<string>());
   const compactContext = useCallback(async (sessionId: string) => {
@@ -17,6 +18,7 @@ export function useSessionConversationSlashCommands(params: {
       return;
     }
     compactingSessionIdsRef.current.add(sessionId);
+    onContextCompactingChange?.(sessionId, true);
     try {
       await compactNcpSessionContext(sessionId);
       toast.success(t('chatSlashCommandCompactContextSuccess', language));
@@ -25,8 +27,9 @@ export function useSessionConversationSlashCommands(params: {
       toast.error(`${t('chatSlashCommandCompactContextFailed', language)}: ${message}`);
     } finally {
       compactingSessionIdsRef.current.delete(sessionId);
+      onContextCompactingChange?.(sessionId, false);
     }
-  }, [language]);
+  }, [language, onContextCompactingChange]);
 
   return useMemo(() => {
     const sessionId = selectedSessionKey?.trim();

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/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,
       }}
@@ -159,16 +160,19 @@ const renderChatPanelAppCard = (panelApp: ChatPanelAppCardViewModel) => (
   <ChatInlinePanelAppCard panelApp={panelApp} />
 );
 
-function ChatContextCompactionDivider({
+export function ChatContextCompactionDivider({
   checkpoint,
 }: {
-  checkpoint: ContextCompactionTimelineView;
+  checkpoint?: ContextCompactionTimelineView;
 }) {
-  const title = [
-    `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
-    `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
-    `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
-  ].join("\n");
+  const isCompacting = !checkpoint || checkpoint.status === "compressing";
+  const title = checkpoint
+    ? [
+        `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
+        `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
+        `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
+      ].join("\n")
+    : undefined;
   return (
     <div
       className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground"
@@ -176,13 +180,13 @@ function ChatContextCompactionDivider({
     >
       <div className="h-px flex-1 bg-border" />
       <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
-        {checkpoint.status === "compressing" ? (
+        {isCompacting ? (
           <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
         ) : (
           <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/45" />
         )}
         <span>
-          {checkpoint.status === "compressing"
+          {isCompacting
             ? t("chatContextCompactionCompressing")
             : t("chatContextCompactionCompressed")}
         </span>