@nextclaw/ui 0.20.0 → 0.20.2

package/src/features/chat/features/session/components/chat-sidebar-session-item.tsx

@@ -1,14 +1,23 @@
-import { AgentAvatar } from '@/shared/components/common/agent-avatar';
-import { SessionContextIconNode } from '@/features/chat/features/session/components/session-context-icon';
-import { SessionRunBadge } from '@/features/chat/features/session/components/session-run-badge';
-import { ChatSessionMoreActionsMenu } from '@/features/chat/features/session/components/session-header/chat-session-more-actions-menu';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
-import { Input } from '@/shared/components/ui/input';
-import { type SessionContextView } from '@/features/chat/features/session/utils/session-context.utils';
-import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
-import { cn } from '@/shared/lib/utils';
-import { t } from '@/shared/lib/i18n';
-import { Check, GitBranch, Pencil, Pin, X } from 'lucide-react';
+import { AgentAvatar } from "@/shared/components/common/agent-avatar";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
+import { ChatSessionMoreActionsMenu } from "@/features/chat/features/session/components/session-header/chat-session-more-actions-menu";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { Input } from "@/shared/components/ui/input";
+import { type SessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
+import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+import {
+  AlarmClock,
+  Check,
+  Folder,
+  GitBranch,
+  Pencil,
+  Pin,
+  X,
+} from "lucide-react";
+import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
 
 type ChatSidebarSessionItemProps = {
   sessionKey: string;
@@ -24,11 +33,12 @@ type ChatSidebarSessionItemProps = {
   agentLabel?: string | null;
   agentAvatarUrl?: string | null;
   childSessionCount?: number;
+  cronJobCount?: number;
+  projectName?: string | null;
   isEditing: boolean;
   draftLabel: string;
   isSaving: boolean;
   onSelect: () => void;
-  onOpenChildSessions?: () => void;
   onStartEditing: () => void;
   onDraftLabelChange: (value: string) => void;
   onSave: () => void | Promise<void>;
@@ -38,7 +48,12 @@ type ChatSidebarSessionItemProps = {
 
 type ChatSidebarSessionEditingViewProps = Pick<
   ChatSidebarSessionItemProps,
-  'sessionKey' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
+  | "sessionKey"
+  | "draftLabel"
+  | "isSaving"
+  | "onDraftLabelChange"
+  | "onSave"
+  | "onCancel"
 >;
 
 function ChatSidebarSessionEditingView({
@@ -47,7 +62,7 @@ function ChatSidebarSessionEditingView({
   isSaving,
   onDraftLabelChange,
   onSave,
-  onCancel
+  onCancel,
 }: ChatSidebarSessionEditingViewProps) {
   return (
     <div className="space-y-2">
@@ -55,32 +70,34 @@ function ChatSidebarSessionEditingView({
         value={draftLabel}
         onChange={(event) => onDraftLabelChange(event.target.value)}
         onKeyDown={(event) => {
-          if (event.key === 'Enter') {
+          if (event.key === "Enter") {
             event.preventDefault();
             void onSave();
-          } else if (event.key === 'Escape') {
+          } else if (event.key === "Escape") {
             event.preventDefault();
             onCancel();
           }
         }}
-        placeholder={t('sessionsLabelPlaceholder')}
+        placeholder={t("sessionsLabelPlaceholder")}
         className="h-8 rounded-lg border-border bg-background text-xs"
         autoFocus
         disabled={isSaving}
       />
       <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0 truncate text-[11px] text-muted-foreground/65">{sessionKey}</div>
+        <div className="min-w-0 truncate text-[11px] text-muted-foreground/65">
+          {sessionKey}
+        </div>
         <div className="flex items-center gap-1">
           <IconActionButton
             icon={<Check className="h-3.5 w-3.5" />}
-            label={t('save')}
+            label={t("save")}
             tooltip={false}
             onClick={() => void onSave()}
             disabled={isSaving}
           />
           <IconActionButton
             icon={<X className="h-3.5 w-3.5" />}
-            label={t('cancel')}
+            label={t("cancel")}
             tooltip={false}
             onClick={onCancel}
             disabled={isSaving}
@@ -93,8 +110,15 @@ function ChatSidebarSessionEditingView({
 
 type ChatSidebarSessionDisplayViewProps = Omit<
   ChatSidebarSessionItemProps,
-  'sessionKey' | 'isEditing' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
-> & Pick<ChatSidebarSessionItemProps, 'sessionKey'>;
+  | "sessionKey"
+  | "isEditing"
+  | "draftLabel"
+  | "isSaving"
+  | "onDraftLabelChange"
+  | "onSave"
+  | "onCancel"
+> &
+  Pick<ChatSidebarSessionItemProps, "sessionKey">;
 
 function ChatSidebarSessionDisplayView({
   sessionKey,
@@ -110,93 +134,113 @@ function ChatSidebarSessionDisplayView({
   agentLabel,
   agentAvatarUrl,
   childSessionCount = 0,
+  cronJobCount = 0,
+  projectName,
   onSelect,
-  onOpenChildSessions,
   onStartEditing,
-  onTogglePinned
+  onTogglePinned,
 }: ChatSidebarSessionDisplayViewProps) {
-  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-32' : 'pr-20';
-
   return (
     <div className="group/session relative">
-      <button type="button" onClick={onSelect} className="w-full text-left">
-        <div className={cn('flex min-h-6 min-w-0 items-center', trailingControlsClassName)}>
-          <span className="flex min-w-0 items-center gap-1.5">
-            {agentId?.trim() && agentId.trim().toLowerCase() !== 'main' ? (
-              <AgentAvatar
-                agentId={agentId}
-                displayName={agentLabel}
-                avatarUrl={agentAvatarUrl}
-                className="h-5 w-5 shrink-0"
-              />
-            ) : null}
-            <span className="truncate leading-6 font-medium">{title}</span>
-            {context.label ? (
+      <ChatSidebarContextCard
+        title={title}
+        metrics={[
+          {
+            icon: <Folder className="h-3.5 w-3.5" />,
+            label: t("chatSidebarContextProject"),
+            value: projectName,
+          },
+          {
+            icon: <GitBranch className="h-3.5 w-3.5" />,
+            label: t("chatSidebarContextChildSessions"),
+            value: childSessionCount,
+          },
+          {
+            icon: <AlarmClock className="h-3.5 w-3.5" />,
+            label: t("chatSidebarContextScheduledTasks"),
+            value: cronJobCount,
+          },
+        ]}
+      >
+        <button type="button" onClick={onSelect} className="w-full text-left">
+          <div
+            className={cn(
+              "flex min-h-6 min-w-0 items-center",
+              runStatus && "pr-6",
+              "group-hover/session:pr-20 group-has-[[data-session-actions]:focus-within]/session:pr-20",
+            )}
+          >
+            <span className="flex min-w-0 items-center gap-1.5">
+              {agentId?.trim() && agentId.trim().toLowerCase() !== "main" ? (
+                <AgentAvatar
+                  agentId={agentId}
+                  displayName={agentLabel}
+                  avatarUrl={agentAvatarUrl}
+                  className="h-5 w-5 shrink-0"
+                />
+              ) : null}
+              <span className="truncate leading-6 font-medium">{title}</span>
+              {context.label ? (
+                <span
+                  className={cn(
+                    "shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none",
+                    active
+                      ? "border-border/70 bg-background/80 text-foreground/75"
+                      : "border-transparent bg-muted/70 text-muted-foreground",
+                  )}
+                >
+                  {context.label}
+                </span>
+              ) : null}
+              {context.icon ? (
+                <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
+                  <SessionContextIconNode
+                    icon={context.icon}
+                    className={cn(
+                      "h-[13px] w-[13px]",
+                      active ? "text-foreground/75" : "text-muted-foreground",
+                    )}
+                  />
+                </span>
+              ) : null}
+            </span>
+          </div>
+          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground/65">
+            <span className="min-w-0 truncate">{previewText}</span>
+            {showUnreadDot ? (
               <span
-                className={cn(
-                  'shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none',
-                  active
-                    ? 'border-border/70 bg-background/80 text-foreground/75'
-                    : 'border-transparent bg-muted/70 text-muted-foreground'
-                )}
-              >
-                {context.label}
-              </span>
-            ) : null}
-            {context.icon ? (
-              <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-                <SessionContextIconNode icon={context.icon} className={cn('h-[13px] w-[13px]', active ? 'text-foreground/75' : 'text-muted-foreground')} />
-              </span>
-            ) : null}
-          </span>
-        </div>
-        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground/65">
-          <span className="min-w-0 truncate">
-            {previewText}
-          </span>
-          {showUnreadDot ? (
-            <span
-              aria-label={t('chatSessionUnread')}
-              className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
-            />
-          ) : (
-            <span className="ml-auto shrink-0">{trailingText}</span>
-          )}
-        </div>
-      </button>
-      {childSessionCount > 0 && onOpenChildSessions ? (
-        <button
-          type="button"
-          onClick={(event) => {
-            event.stopPropagation();
-            onOpenChildSessions();
-          }}
-          className="pointer-events-none absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-colors hover:bg-background/80 hover:text-foreground group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
-          aria-label={t('chatSessionOpenChildSessions')}
-          title={t('chatSessionOpenChildSessions')}
-        >
-          <GitBranch className="h-3.5 w-3.5" />
-          <span>{childSessionCount}</span>
+                aria-label={t("chatSessionUnread")}
+                className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
+              />
+            ) : (
+              <span className="ml-auto shrink-0">{trailingText}</span>
+            )}
+          </div>
         </button>
-      ) : null}
+      </ChatSidebarContextCard>
       {runStatus ? (
         <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0">
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <div className="pointer-events-none absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+      <div
+        data-session-actions
+        className="pointer-events-none absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
+      >
         <IconActionButton
           size="sm"
           tone="strong"
           icon={
             <Pin
               className={cn(
-                'h-3.5 w-3.5',
-                isPinned && 'fill-current text-foreground',
+                "h-3.5 w-3.5",
+                isPinned && "fill-current text-foreground",
               )}
             />
           }
-          label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')}
+          label={t(
+            isPinned ? "chatSidebarUnpinSession" : "chatSidebarPinSession",
+          )}
           tooltipSide="right"
           onClick={(event) => {
             event.stopPropagation();
@@ -207,7 +251,7 @@ function ChatSidebarSessionDisplayView({
           size="sm"
           tone="strong"
           icon={<Pencil className="h-3.5 w-3.5" />}
-          label={t('edit')}
+          label={t("edit")}
           tooltipSide="right"
           onClick={(event) => {
             event.stopPropagation();
@@ -238,24 +282,25 @@ export function ChatSidebarSessionItem({
   agentLabel,
   agentAvatarUrl,
   childSessionCount,
+  cronJobCount,
+  projectName,
   isEditing,
   draftLabel,
   isSaving,
   onSelect,
-  onOpenChildSessions,
   onStartEditing,
   onDraftLabelChange,
   onSave,
   onCancel,
-  onTogglePinned
+  onTogglePinned,
 }: ChatSidebarSessionItemProps) {
   return (
     <div
       className={cn(
-        'w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors',
+        "w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors",
         active
-          ? 'bg-background/90 font-medium text-foreground'
-          : 'text-foreground/80 hover:bg-background/65 hover:text-foreground'
+          ? "bg-background/90 font-medium text-foreground"
+          : "text-foreground/80 hover:bg-background/65 hover:text-foreground",
       )}
     >
       {isEditing ? (
@@ -283,7 +328,8 @@ export function ChatSidebarSessionItem({
           agentAvatarUrl={agentAvatarUrl}
           onSelect={onSelect}
           childSessionCount={childSessionCount}
-          onOpenChildSessions={onOpenChildSessions}
+          cronJobCount={cronJobCount}
+          projectName={projectName}
           onStartEditing={onStartEditing}
           onTogglePinned={onTogglePinned}
         />

package/src/features/chat/features/session/components/chat-sidebar-session-list.tsx

@@ -16,6 +16,7 @@ type ChatSidebarSessionListProps = {
   isProjectFirstView: boolean;
   groups: ChatSidebarDateGroup[];
   projectGroups: ChatSidebarProjectGroup[];
+  projectCronJobCountByRoot: ReadonlyMap<string, number>;
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
@@ -36,11 +37,16 @@ export function ChatSidebarSessionList({
   isLoading,
   isProjectFirstView,
   projectGroups,
+  projectCronJobCountByRoot,
   renderSessionItem,
   sessionTypeOptions,
 }: ChatSidebarSessionListProps) {
   if (isLoading) {
-    return <div className="p-3 text-xs text-muted-foreground">{t("sessionsLoading")}</div>;
+    return (
+      <div className="p-3 text-xs text-muted-foreground">
+        {t("sessionsLoading")}
+      </div>
+    );
   }
 
   if (isProjectFirstView) {
@@ -49,6 +55,7 @@ export function ChatSidebarSessionList({
     ) : (
       <ChatSidebarProjectGroups
         groups={projectGroups}
+        projectCronJobCountByRoot={projectCronJobCountByRoot}
         defaultSessionType={defaultSessionType}
         sessionTypeOptions={sessionTypeOptions}
         renderSessionItem={renderSessionItem}
@@ -67,7 +74,9 @@ export function ChatSidebarSessionList({
           <div className="px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65">
             {group.label}
           </div>
-          <div className="space-y-0.5">{group.items.map(renderSessionItem)}</div>
+          <div className="space-y-0.5">
+            {group.items.map(renderSessionItem)}
+          </div>
         </div>
       ))}
     </div>

package/src/features/chat/features/session/hooks/use-chat-sidebar-context-counts.ts

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { useCronJobs } from "@/features/cron";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+
+export function useChatSidebarContextCounts(
+  allItems: readonly NcpSessionListItemView[],
+) {
+  const cronQuery = useCronJobs({ all: true });
+
+  return useMemo(() => {
+    const projectRootBySessionKey = new Map(
+      allItems.flatMap(({ session }) => {
+        const projectRoot = session.projectRoot?.trim();
+        return projectRoot ? [[session.key, projectRoot] as const] : [];
+      }),
+    );
+    const cronJobCountBySessionKey = new Map<string, number>();
+    const cronJobCountByProjectRoot = new Map<string, number>();
+
+    for (const job of cronQuery.data?.jobs ?? []) {
+      const sessionKey = job.payload.sessionId?.trim();
+      if (!sessionKey) {
+        continue;
+      }
+      cronJobCountBySessionKey.set(
+        sessionKey,
+        (cronJobCountBySessionKey.get(sessionKey) ?? 0) + 1,
+      );
+      const projectRoot = projectRootBySessionKey.get(sessionKey);
+      if (projectRoot) {
+        cronJobCountByProjectRoot.set(
+          projectRoot,
+          (cronJobCountByProjectRoot.get(projectRoot) ?? 0) + 1,
+        );
+      }
+    }
+
+    return { cronJobCountByProjectRoot, cronJobCountBySessionKey };
+  }, [allItems, cronQuery.data?.jobs]);
+}

package/src/features/chat/features/session/utils/ncp-session-context-metadata.utils.ts

@@ -91,7 +91,11 @@ export type ContextCompactionTimelineView = {
 
 export function readContextCompactionTimeline(message: Pick<NcpMessageView, 'metadata'>): ContextCompactionTimelineView | null {
   const { metadata } = message;
-  if (!metadata || metadata[NEXTCLAW_TIMELINE_KIND_METADATA_KEY] !== CONTEXT_COMPACTION_TIMELINE_KIND) {
+  if (
+    !metadata ||
+    readOptionalString(metadata.inherited_from_session_id) ||
+    metadata[NEXTCLAW_TIMELINE_KIND_METADATA_KEY] !== CONTEXT_COMPACTION_TIMELINE_KIND
+  ) {
     return null;
   }
   const rawCheckpoint =

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

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type {
@@ -123,16 +124,21 @@ function renderWorkspaceFilePreview({
   sessionWorkingDir = "/tmp",
   showBreadcrumbs,
 }: RenderWorkspaceFilePreviewOptions = {}) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
   const view = render(
-    <ChatSessionWorkspaceFilePreview
-      file={buildWorkspaceFile(file ?? {})}
-      sessionProjectRoot={sessionProjectRoot}
-      sessionWorkingDir={sessionWorkingDir}
-      refreshVersion={refreshVersion}
-      showBreadcrumbs={showBreadcrumbs}
-      onHtmlContentHeightChange={onHtmlContentHeightChange}
-      onFileOpen={onFileOpen}
-    />,
+    <QueryClientProvider client={queryClient}>
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile(file ?? {})}
+        sessionProjectRoot={sessionProjectRoot}
+        sessionWorkingDir={sessionWorkingDir}
+        refreshVersion={refreshVersion}
+        showBreadcrumbs={showBreadcrumbs}
+        onHtmlContentHeightChange={onHtmlContentHeightChange}
+        onFileOpen={onFileOpen}
+      />
+    </QueryClientProvider>,
   );
   return { ...view, onFileOpen };
 }
@@ -580,6 +586,7 @@ describe("ChatSessionWorkspaceFilePreview text rendering", () => {
 
     expect(screen.queryByTestId("markdown-preview")).toBeNull();
     expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: t("chatWorkspaceMarkdownOutline") })).toBeNull();
   });
 
   it("keeps HTML files in the source preview when preview viewer is automatic", () => {

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-panel-content.test.tsx

@@ -222,7 +222,7 @@ function createChildTab(): ResolvedChildSessionTab {
   };
 }
 
-it('shows compact child session metadata in a full-height column layout', () => {
+it('shows child session content without a redundant metadata header', () => {
   render(
     <ChatSessionWorkspacePanelContent
       activeSelection={{
@@ -239,10 +239,10 @@ it('shows compact child session metadata in a full-height column layout', () =>
   );
 
   expect(screen.queryByText('Child title')).toBeNull();
-  expect(screen.getByText('原生')).toBeTruthy();
-  expect(screen.getByText('minimax/MiniMax-M3')).toBeTruthy();
-  expect(screen.getByText('nextbot')).toBeTruthy();
-  expect(screen.getByTitle('/Users/peiwang/Projects/nextbot')).toBeTruthy();
+  expect(screen.queryByText('原生')).toBeNull();
+  expect(screen.queryByText('minimax/MiniMax-M3')).toBeNull();
+  expect(screen.queryByText('nextbot')).toBeNull();
+  expect(screen.queryByTitle('/Users/peiwang/Projects/nextbot')).toBeNull();
   const conversationArea = screen.getByTestId('session-conversation-area');
   const selectedContentHost = conversationArea.parentElement?.parentElement;
   expect(Array.from(selectedContentHost?.classList ?? [])).toEqual(

package/src/features/chat/features/workspace/components/__tests__/workspace-markdown-outline.test.tsx

@@ -0,0 +1,128 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkspaceMarkdownOutline } from "@/features/chat/features/workspace/components/workspace-markdown-outline";
+import { t } from "@/shared/lib/i18n";
+
+describe("WorkspaceMarkdownOutline", () => {
+  it("does not render an outline action when the document has no headings", async () => {
+    const scrollContainerRef = createRef<HTMLDivElement>();
+    render(
+      <>
+        <WorkspaceMarkdownOutline
+          contentKey="plain fixture"
+          documentKey="notes.md"
+          scrollContainerRef={scrollContainerRef}
+        />
+        <div ref={scrollContainerRef}>Plain paragraph</div>
+      </>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", {
+          name: t("chatWorkspaceMarkdownOutline"),
+        }),
+      ).toBeNull();
+    });
+  });
+
+  it("preserves outline scroll state and instantly jumps to the selected rendered heading", async () => {
+    const scrollContainerRef = createRef<HTMLDivElement>();
+    const scrollTo = vi.fn();
+    const { rerender } = render(
+      <>
+        <WorkspaceMarkdownOutline
+          contentKey="outline fixture"
+          documentKey="README.md"
+          scrollContainerRef={scrollContainerRef}
+        />
+        <div ref={scrollContainerRef}>
+          <h1>Overview</h1>
+          <h3>
+            Install <em>quickly</em>
+          </h3>
+          <h2>Overview</h2>
+        </div>
+      </>,
+    );
+
+    const outlineTrigger = await screen.findByRole("button", {
+      name: t("chatWorkspaceMarkdownOutline"),
+    });
+    const scrollContainer = scrollContainerRef.current!;
+    const headings = screen.getAllByRole("heading");
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 40,
+      writable: true,
+    });
+    Object.defineProperty(scrollContainer, "scrollTo", {
+      configurable: true,
+      value: scrollTo,
+    });
+    vi.spyOn(scrollContainer, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+    } as DOMRect);
+    vi.spyOn(headings[1]!, "getBoundingClientRect").mockReturnValue({
+      top: 420,
+    } as DOMRect);
+
+    fireEvent.click(outlineTrigger);
+
+    expect(
+      screen.getByTestId("workspace-markdown-outline-popover").className,
+    ).toContain("w-[min(20rem,calc(100vw-1.5rem))]");
+    const outlineNavigation = screen.getByRole("navigation");
+    expect(outlineNavigation.className).toContain("max-h-80");
+    expect(screen.getAllByRole("button", { name: "Overview" })).toHaveLength(2);
+    const nestedHeading = screen.getByRole("button", {
+      name: "Install quickly",
+    });
+    expect(nestedHeading.style.paddingInlineStart).toBe("1.25rem");
+
+    outlineNavigation.scrollTop = 176;
+    fireEvent.click(outlineTrigger);
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("workspace-markdown-outline-popover"),
+      ).toBeNull();
+    });
+    fireEvent.click(outlineTrigger);
+    expect((await screen.findByRole("navigation")).scrollTop).toBe(176);
+    fireEvent.click(outlineTrigger);
+    rerender(
+      <>
+        <WorkspaceMarkdownOutline
+          contentKey="outline fixture"
+          documentKey="docs/other.md"
+          scrollContainerRef={scrollContainerRef}
+        />
+        <div ref={scrollContainerRef}>
+          <h1>Overview</h1>
+          <h3>
+            Install <em>quickly</em>
+          </h3>
+          <h2>Overview</h2>
+        </div>
+      </>,
+    );
+    fireEvent.click(outlineTrigger);
+    expect((await screen.findByRole("navigation")).scrollTop).toBe(0);
+
+    fireEvent.click(screen.getByRole("button", { name: "Install quickly" }));
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 344 });
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("workspace-markdown-outline-popover"),
+      ).toBeNull();
+    });
+    expect(document.activeElement).toBe(outlineTrigger);
+    expect(
+      document.querySelector(
+        '[role="tooltip"][data-state="delayed-open"], [role="tooltip"][data-state="instant-open"]',
+      ),
+    ).toBeNull();
+  });
+});