@nextclaw/ui 0.15.5 → 0.15.7

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -1,33 +1,21 @@
 import { useMemo, useState } from "react";
 import {
-  Check,
   ChevronDown,
   Loader2,
   MessageSquareText,
   Search,
 } from "lucide-react";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { useNcpSessionListView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import {
-  useNcpSessionListView,
-  type NcpSessionListItemView,
-} from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
-import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
-import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
-import {
-  formatSessionListTime,
-  sessionActivityPreviewText,
-  sessionDisplayName,
-} from "@/features/chat/features/session/utils/chat-session-display.utils";
-import { sortSessionItemsByActivityAtDesc } from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
-import { resolveSessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
-import {
-  buildSessionTypeOptions,
-  type ChatSessionTypeOption,
-} from "@/features/chat/features/session-type/utils/chat-session-type.utils";
-import {
-  shouldShowUnreadSessionIndicator,
-  useChatSessionListStore,
-} from "@/features/chat/stores/chat-session-list.store";
+  groupSessionsByDate,
+  groupSessionsByProject,
+  sortSessionItemsByActivityAtDesc,
+} from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import { ChatSidebarListModeSwitch } from "@/features/chat/components/chat-sidebar-list-mode-switch";
+import { buildSessionTypeOptions } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { ChatSessionSwitcherGroups } from "@/features/chat/features/session/components/session-header/chat-session-switcher-groups";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import {
@@ -38,6 +26,7 @@ import { ChatPopoverContent } from "@/features/chat/components/chat-popover-cont
 import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
+import { useProjects } from "@/shared/hooks/use-projects";
 
 const SWITCHER_TRIGGER_CLASS =
   "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
@@ -68,96 +57,6 @@ function ChatSessionTitleSwitcherLoadingState() {
   );
 }
 
-function ChatSessionSwitchItem({
-  item,
-  selectedSessionKey,
-  optimisticReadAtBySessionKey,
-  sessionTypeOptions,
-  onSelect,
-}: {
-  item: NcpSessionListItemView;
-  selectedSessionKey: string | null;
-  optimisticReadAtBySessionKey: Record<string, string>;
-  sessionTypeOptions: ChatSessionTypeOption[];
-  onSelect: (sessionKey: string) => void;
-}) {
-  const { session, runStatus } = item;
-  const active = selectedSessionKey === session.key;
-  const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
-  const effectiveReadAt =
-    optimisticReadAt && session.readAt
-      ? optimisticReadAt.localeCompare(session.readAt) > 0
-        ? optimisticReadAt
-        : session.readAt
-      : (optimisticReadAt ?? session.readAt);
-  const shouldShowUnread = shouldShowUnreadSessionIndicator({
-    active,
-    lastMessageAt: session.lastMessageAt,
-    readAt: effectiveReadAt,
-    runStatus,
-  });
-  const previewText =
-    sessionActivityPreviewText(session) ??
-    session.projectName ??
-    session.projectRoot ??
-    `${session.messageCount}`;
-  const trailingText = formatSessionListTime(
-    session.lastMessageAt ?? session.createdAt,
-  );
-  const sessionContext = resolveSessionContextView(session, sessionTypeOptions);
-
-  return (
-    <button
-      type="button"
-      aria-current={active ? "page" : undefined}
-      className={cn(
-        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
-        active
-          ? "bg-accent text-accent-foreground"
-          : "text-popover-foreground hover:bg-accent/70",
-      )}
-      onClick={() => onSelect(session.key)}
-    >
-      <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
-        {active ? (
-          <Check className="h-3.5 w-3.5" />
-        ) : shouldShowUnread ? (
-          <span
-            aria-label={t("chatSessionUnread")}
-            className="h-2 w-2 rounded-full bg-primary"
-          />
-        ) : null}
-      </span>
-      <span className="min-w-0 flex-1">
-        <span className="flex min-w-0 items-center gap-1.5">
-          <span className="min-w-0 truncate text-[13px] font-medium">
-            {sessionDisplayName(session)}
-          </span>
-          {sessionContext.label ? (
-            <span className="shrink-0 rounded-full border border-border/70 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-muted-foreground">
-              {sessionContext.label}
-            </span>
-          ) : null}
-          {sessionContext.icon ? (
-            <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center text-muted-foreground">
-              <SessionContextIconNode icon={sessionContext.icon} />
-            </span>
-          ) : null}
-        </span>
-        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
-          <span className="min-w-0 truncate">{previewText}</span>
-          <span className="shrink-0">{trailingText}</span>
-        </span>
-      </span>
-      {runStatus ? (
-        <span className="mt-0.5 shrink-0">
-          <SessionRunBadge status={runStatus} />
-        </span>
-      ) : null}
-    </button>
-  );
-}
-
 function ChatSessionTitleSwitcherPopover({
   selectedSessionKey,
   title,
@@ -171,14 +70,51 @@ function ChatSessionTitleSwitcherPopover({
   const optimisticReadAtBySessionKey = useChatSessionListStore(
     (state) => state.optimisticReadAtBySessionKey,
   );
+  const pinnedSessionKeys = useChatSessionListStore(
+    (state) => state.snapshot.pinnedSessionKeys,
+  );
+  const pinnedProjectRoots = useChatSessionListStore(
+    (state) => state.snapshot.pinnedProjectRoots,
+  );
+  const collapsedProjectRoots = useChatSessionListStore(
+    (state) => state.snapshot.collapsedProjectRoots,
+  );
+  const listMode = useChatSessionListStore(
+    (state) => state.snapshot.listMode,
+  );
   const sessionTypesData = useChatQueryStore(
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
   );
   const { isLoading, items } = useNcpSessionListView({ query: searchQuery });
+  const projectsQuery = useProjects();
+  const visibleProjects = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    const projects = projectsQuery.data?.projects ?? [];
+    if (!query) {
+      return projects;
+    }
+    return projects.filter((project) =>
+      project.name.toLowerCase().includes(query) ||
+      project.rootPath.toLowerCase().includes(query)
+    );
+  }, [projectsQuery.data?.projects, searchQuery]);
   const sortedItems = useMemo(
     () => sortSessionItemsByActivityAtDesc(items),
     [items],
   );
+  const dateGroups = useMemo(
+    () => groupSessionsByDate(sortedItems, new Set(pinnedSessionKeys)),
+    [pinnedSessionKeys, sortedItems],
+  );
+  const projectGroups = useMemo(
+    () => groupSessionsByProject(
+      sortedItems,
+      new Set(pinnedSessionKeys),
+      new Set(pinnedProjectRoots),
+      visibleProjects,
+    ),
+    [pinnedProjectRoots, pinnedSessionKeys, sortedItems, visibleProjects],
+  );
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
     [sessionTypesData?.options],
@@ -198,6 +134,16 @@ function ChatSessionTitleSwitcherPopover({
       setSearchQuery("");
     }
   };
+  const sessionListProps = {
+    selectedSessionKey,
+    optimisticReadAtBySessionKey,
+    sessionTypeOptions,
+    onSelect: selectSession,
+  };
+  const isProjectFirstView = listMode === "project-first";
+  const hasVisibleGroups = isProjectFirstView
+    ? projectGroups.length > 0
+    : dateGroups.length > 0;
 
   return (
     <Popover open={isOpen} onOpenChange={updateOpen}>
@@ -222,8 +168,14 @@ function ChatSessionTitleSwitcherPopover({
         className="w-[22rem] max-w-[calc(100vw-2rem)] p-0"
       >
         <div className="space-y-2 border-b border-border px-3 py-2">
-          <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
-            {t("chatSessionSwitcherTitle")}
+          <div className="flex items-center justify-between gap-3">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
+              {t("chatSessionSwitcherTitle")}
+            </div>
+            <ChatSidebarListModeSwitch
+              isProjectFirstView={isProjectFirstView}
+              onSelectMode={presenter.chatSessionListManager.setListMode}
+            />
           </div>
           <div className="relative">
             <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/65" />
@@ -240,25 +192,27 @@ function ChatSessionTitleSwitcherPopover({
         <div className="max-h-80 overflow-y-auto p-1.5">
           {isLoading ? (
             <ChatSessionTitleSwitcherLoadingState />
-          ) : sortedItems.length > 0 ? (
-            <div className="space-y-1">
-              {sortedItems.map((item) => (
-                <ChatSessionSwitchItem
-                  key={item.session.key}
-                  item={item}
-                  selectedSessionKey={selectedSessionKey}
-                  optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
-                  sessionTypeOptions={sessionTypeOptions}
-                  onSelect={selectSession}
-                />
-              ))}
-            </div>
+          ) : hasVisibleGroups ? (
+            <ChatSessionSwitcherGroups
+              collapsedProjectRoots={collapsedProjectRoots}
+              dateGroups={dateGroups}
+              isProjectFirstView={isProjectFirstView}
+              onToggleProjectCollapsed={
+                presenter.chatSessionListManager.toggleProjectCollapsed
+              }
+              projectGroups={projectGroups}
+              {...sessionListProps}
+            />
           ) : (
             <ChatSessionTitleSwitcherEmptyState
               label={
                 searchQuery.trim()
                   ? t("chatSessionSwitcherNoResults")
-                  : t("sessionsEmpty")
+                  : t(
+                      isProjectFirstView
+                        ? "chatSidebarProjectViewEmpty"
+                        : "sessionsEmpty",
+                    )
               }
             />
           )}
@@ -281,7 +235,7 @@ export function ChatSessionTitleSwitcher({
     (state) => state.isSidebarCollapsed,
   );
 
-  if (layoutMode !== "desktop" || !isSidebarCollapsed) {
+  if (layoutMode === "desktop" && !isSidebarCollapsed) {
     return <ChatSessionTitle title={title} />;
   }
 

package/src/features/chat/features/session/utils/__tests__/chat-sidebar-session-groups.utils.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { groupSessionsByProject } from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+
+describe("groupSessionsByProject", () => {
+  it("uses registered projects as the project-first baseline", () => {
+    const groups = groupSessionsByProject([], new Set(), new Set(), [{
+      name: "Knowledge",
+      rootPath: "/tmp/knowledge",
+      template: "knowledge-base",
+      createdAt: "2026-07-15T00:00:00.000Z",
+      updatedAt: "2026-07-15T00:00:00.000Z",
+    }]);
+
+    expect(groups).toEqual([{
+      projectRoot: "/tmp/knowledge",
+      projectName: "Knowledge",
+      items: [],
+      latestUpdatedAt: new Date("2026-07-15T00:00:00.000Z").getTime(),
+      isPinned: false,
+    }]);
+  });
+});

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -2,7 +2,7 @@ import {
   CHAT_SESSION_MATERIALIZATION_METADATA_KEY,
   type AgentRunSessionMaterializationMetadata,
 } from "@nextclaw/shared";
-import { buildInlineSkillTokensFromComposer, CHAT_UI_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import { buildInlineTokensFromComposer, CHAT_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
@@ -20,7 +20,7 @@ export function buildChatRunMetadata(payload: {
   sessionType?: string;
   projectRoot?: string | null;
   requestedSkills?: string[];
-  composerNodes?: Parameters<typeof buildInlineSkillTokensFromComposer>[0];
+  composerNodes?: Parameters<typeof buildInlineTokensFromComposer>[0];
   sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
 }): Record<string, unknown> {
   const projectRoot = normalizeSessionProjectRootValue(payload.projectRoot);
@@ -35,11 +35,11 @@ export function buildChatRunMetadata(payload: {
   if (requestedSkills.length > 0) {
     metadata.requested_skill_refs = requestedSkills;
   }
-  const inlineSkillTokens = payload.composerNodes
-    ? buildInlineSkillTokensFromComposer(payload.composerNodes)
+  const inlineTokens = payload.composerNodes
+    ? buildInlineTokensFromComposer(payload.composerNodes)
     : [];
-  if (inlineSkillTokens.length > 0) {
-    metadata[CHAT_UI_INLINE_TOKENS_METADATA_KEY] = inlineSkillTokens;
+  if (inlineTokens.length > 0) {
+    metadata[CHAT_INLINE_TOKENS_METADATA_KEY] = inlineTokens;
   }
   if (payload.sessionMaterialization) {
     metadata[CHAT_SESSION_MATERIALIZATION_METADATA_KEY] = payload.sessionMaterialization;

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -1,4 +1,4 @@
-import type { SessionEntryView } from "@/shared/lib/api";
+import type { ProjectView, SessionEntryView } from "@/shared/lib/api";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { getSessionProjectName } from "@/shared/lib/session-project";
 import { t } from "@/shared/lib/i18n";
@@ -96,9 +96,20 @@ export function groupSessionsByProject(
   items: NcpSessionListItemView[],
   pinnedSessionKeys: ReadonlySet<string> = new Set(),
   pinnedProjectRoots: ReadonlySet<string> = new Set(),
+  projects: readonly ProjectView[] = [],
 ): ChatSidebarProjectGroup[] {
   const grouped = new Map<string, ChatSidebarProjectGroup>();
 
+  for (const project of projects) {
+    grouped.set(project.rootPath, {
+      projectRoot: project.rootPath,
+      projectName: project.name,
+      items: [],
+      latestUpdatedAt: new Date(project.updatedAt).getTime(),
+      isPinned: pinnedProjectRoots.has(project.rootPath),
+    });
+  }
+
   for (const item of items) {
     const projectRoot = item.session.projectRoot?.trim();
     if (!projectRoot) {

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

@@ -16,6 +16,7 @@ import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { useAgents } from "@/shared/hooks/use-agents";
+import { useProjects } from "@/shared/hooks/use-projects";
 import type { NcpSessionSummaryView } from "@/shared/lib/api";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
@@ -55,6 +56,7 @@ export function ChatConversationWelcome({
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
   );
   const agentsQuery = useAgents();
+  const projectsQuery = useProjects();
   const draftAgentId = threadSnapshot.agentId ?? selectedAgentId;
   const availableAgents = resolveChatWelcomeAgents({
     agents: agentsQuery.data?.agents,
@@ -80,6 +82,7 @@ export function ChatConversationWelcome({
   });
   const projectOptions = buildChatWelcomeProjectOptions({
     defaultProjectRoot,
+    projects: projectsQuery.data?.projects ?? [],
     sessionSummaries,
   });
   const selectDraftAgent = (agentId: string) => {

package/src/features/chat/features/welcome/components/chat-welcome.tsx

@@ -106,6 +106,7 @@ export function ChatWelcome({
         <ChatSessionProjectDialog
           open={isProjectDialogOpen}
           currentProjectRoot={resolvedProjectRoot}
+          defaultWorkspacePath={defaultProjectRoot}
           isSaving={isProjectSaving}
           onOpenChange={setIsProjectDialogOpen}
           onSave={saveProjectRoot}

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-project-options.utils.test.ts

@@ -48,4 +48,24 @@ describe("buildChatWelcomeProjectOptions", () => {
       },
     ]);
   });
+
+  it("includes a registered project before it has any sessions", () => {
+    const options = buildChatWelcomeProjectOptions({
+      defaultProjectRoot: "/Users/demo/.nextclaw/workspace",
+      projects: [{
+        name: "Knowledge",
+        rootPath: "/tmp/knowledge",
+        template: "knowledge-base",
+        createdAt: "2026-07-15T00:00:00.000Z",
+        updatedAt: "2026-07-15T00:00:00.000Z",
+      }],
+      sessionSummaries: [],
+    });
+
+    expect(options).toEqual([{
+      projectRoot: "/tmp/knowledge",
+      projectName: "Knowledge",
+      sessionCount: 0,
+    }]);
+  });
 });

package/src/features/chat/features/welcome/utils/chat-welcome-project-options.utils.ts

@@ -1,4 +1,4 @@
-import type { NcpSessionSummaryView } from "@/shared/lib/api";
+import type { NcpSessionSummaryView, ProjectView } from "@/shared/lib/api";
 import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import { getSessionProjectName } from "@/shared/lib/session-project";
 
@@ -17,14 +17,27 @@ function readSessionActivityAt(session: {
 
 export function buildChatWelcomeProjectOptions(params: {
   defaultProjectRoot: string | null;
+  projects?: readonly ProjectView[];
   sessionSummaries: readonly NcpSessionSummaryView[];
 }): ChatWelcomeProjectOption[] {
-  const { defaultProjectRoot, sessionSummaries } = params;
+  const { defaultProjectRoot, projects = [], sessionSummaries } = params;
   const groups = new Map<
     string,
     ChatWelcomeProjectOption & { latestUpdatedAt: number }
   >();
 
+  for (const project of projects) {
+    if (project.rootPath === defaultProjectRoot) {
+      continue;
+    }
+    groups.set(project.rootPath, {
+      projectRoot: project.rootPath,
+      projectName: project.name,
+      sessionCount: 0,
+      latestUpdatedAt: new Date(project.updatedAt).getTime(),
+    });
+  }
+
   for (const session of adaptNcpSessionSummaries([...sessionSummaries])) {
     const projectRoot = session.projectRoot?.trim();
     if (!projectRoot || projectRoot === defaultProjectRoot) {

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

@@ -20,6 +20,7 @@ const destroyPresentationMock = vi.fn();
 type RenderWorkspaceFilePreviewOptions = {
   file?: Partial<ChatWorkspaceFileTab>;
   onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
+  onHtmlContentHeightChange?: (height: number) => void;
   refreshVersion?: number;
   sessionProjectRoot?: string | null;
   sessionWorkingDir?: string | null;
@@ -104,6 +105,7 @@ function mockTextRead(overrides: TextReadDataOverrides = {}) {
 function renderWorkspaceFilePreview({
   file,
   onFileOpen = vi.fn(),
+  onHtmlContentHeightChange,
   refreshVersion,
   sessionProjectRoot = "/tmp",
   sessionWorkingDir = "/tmp",
@@ -116,6 +118,7 @@ function renderWorkspaceFilePreview({
       sessionWorkingDir={sessionWorkingDir}
       refreshVersion={refreshVersion}
       showBreadcrumbs={showBreadcrumbs}
+      onHtmlContentHeightChange={onHtmlContentHeightChange}
       onFileOpen={onFileOpen}
     />,
   );
@@ -316,9 +319,7 @@ describe("ChatSessionWorkspaceFilePreview rendering", () => {
       });
 
       expect(screen.getByTestId(testId)).toBeTruthy();
-      expect(
-        screen.queryByText(t("chatWorkspacePreviewTruncated")),
-      ).toBeNull();
+      expect(screen.queryByText(t("chatWorkspacePreviewTruncated"))).toBeNull();
     },
   );
 });
@@ -751,9 +752,7 @@ describe("ChatSessionWorkspaceFilePreview text rendering", () => {
     });
     const indexButton = screen.getByRole("button", { name: "index.ts" });
     fireEvent.click(componentsTreeItem.querySelector("button")!);
-    expect(
-      componentsTreeItem.getAttribute("aria-expanded"),
-    ).toBe("true");
+    expect(componentsTreeItem.getAttribute("aria-expanded")).toBe("true");
     expect(onFileOpen).not.toHaveBeenCalled();
 
     fireEvent.click(indexButton);

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

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { WorkspaceFileContentPreview } from "@/features/chat/features/workspace/components/workspace-file-content-preview";
+
+const defaultResizeObserver = globalThis.ResizeObserver;
+
+afterEach(() => {
+  vi.stubGlobal("ResizeObserver", defaultResizeObserver);
+});
+
+it("reports same-origin HTML height changes without replacing the iframe", () => {
+  const observe = vi.fn();
+  const disconnect = vi.fn();
+  let notifyResize: ResizeObserverCallback = () => undefined;
+  class HeightResizeObserver {
+    constructor(callback: ResizeObserverCallback) {
+      notifyResize = callback;
+    }
+
+    observe = observe;
+
+    unobserve = vi.fn();
+
+    disconnect = disconnect;
+  }
+  vi.stubGlobal("ResizeObserver", HeightResizeObserver);
+  const onHtmlContentHeightChange = vi.fn();
+  const { unmount } = render(
+    <WorkspaceFileContentPreview
+      contentUrl="/api/server-paths/content?path=%2Ftmp%2Fexample.html"
+      kind="html"
+      label="example.html"
+      onHtmlContentHeightChange={onHtmlContentHeightChange}
+    />,
+  );
+  const frame = screen.getByTestId(
+    "workspace-html-preview",
+  ) as HTMLIFrameElement;
+  const iframeDocument = document.implementation.createHTMLDocument();
+  Object.defineProperty(frame, "contentDocument", {
+    configurable: true,
+    value: iframeDocument,
+  });
+  const { documentElement } = iframeDocument;
+  Object.defineProperty(documentElement, "scrollHeight", {
+    configurable: true,
+    value: 640,
+  });
+
+  fireEvent.load(frame);
+
+  expect(onHtmlContentHeightChange).toHaveBeenLastCalledWith(640);
+  expect(observe).toHaveBeenCalledWith(documentElement);
+  expect(screen.getByTestId("workspace-html-preview")).toBe(frame);
+
+  Object.defineProperty(documentElement, "scrollHeight", {
+    configurable: true,
+    value: 900,
+  });
+  notifyResize([], {} as ResizeObserver);
+
+  expect(onHtmlContentHeightChange).toHaveBeenLastCalledWith(900);
+  expect(screen.getByTestId("workspace-html-preview")).toBe(frame);
+
+  unmount();
+  expect(disconnect).toHaveBeenCalledTimes(1);
+});

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

@@ -180,6 +180,7 @@ function WorkspacePreviewBody({
   directoryQuery,
   fileBasePath,
   onFileOpen,
+  onHtmlContentHeightChange,
   previewBlock,
   previewKind,
   previewViewer,
@@ -194,6 +195,7 @@ function WorkspacePreviewBody({
   directoryQuery: ReturnType<typeof useServerPathBrowse> | null | undefined;
   fileBasePath: string | null;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  onHtmlContentHeightChange?: (height: number) => void;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: "text" | "markdown" | "binary";
   previewViewer: "source" | "rendered" | null;
@@ -208,6 +210,7 @@ function WorkspacePreviewBody({
         contentUrl={contentUrl}
         kind={contentUrlKind}
         label={contentLabel}
+        onHtmlContentHeightChange={onHtmlContentHeightChange}
       />
     );
   }
@@ -291,6 +294,7 @@ type ChatSessionWorkspaceFilePreviewProps = {
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
   showBreadcrumbs?: boolean;
+  onHtmlContentHeightChange?: (height: number) => void;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
 };
 
@@ -300,6 +304,7 @@ export function ChatSessionWorkspaceFilePreview({
   sessionProjectRoot,
   sessionWorkingDir,
   showBreadcrumbs = true,
+  onHtmlContentHeightChange,
   onFileOpen,
 }: ChatSessionWorkspaceFilePreviewProps) {
   const isPreviewMode = file.viewMode === "preview";
@@ -384,7 +389,8 @@ export function ChatSessionWorkspaceFilePreview({
     previewQuery?.data?.startLine,
     previewText,
   ]);
-  const isTextPreviewTruncated = !contentUrl && Boolean(previewQuery?.data?.truncated);
+  const isTextPreviewTruncated =
+    !contentUrl && Boolean(previewQuery?.data?.truncated);
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
   const breadcrumb = useMemo(
     () =>
@@ -394,12 +400,7 @@ export function ChatSessionWorkspaceFilePreview({
         sessionProjectRoot: breadcrumbBasePath,
         truncated: isTextPreviewTruncated,
       }),
-    [
-      breadcrumbBasePath,
-      isTextPreviewTruncated,
-      previewPathKind,
-      resolvedPath,
-    ],
+    [breadcrumbBasePath, isTextPreviewTruncated, previewPathKind, resolvedPath],
   );
 
   return (
@@ -422,6 +423,7 @@ export function ChatSessionWorkspaceFilePreview({
             directoryQuery={directoryQuery}
             fileBasePath={sessionWorkingDir}
             onFileOpen={onFileOpen}
+            onHtmlContentHeightChange={onHtmlContentHeightChange}
             previewBlock={previewBlock}
             previewKind={previewKind}
             previewViewer={previewViewer}