@cueloop/client 0.1.0-alpha.76 → 0.1.0-alpha.78

package/src/components/ManageAccessDialog.tsx

@@ -0,0 +1,122 @@
+/**
+ * Owner surface for a private share's allowlist: the GitHub logins allowed to
+ * open the private link. Type a handle and add it; click a row to remove one.
+ * Editing persists through the controller, so the list survives a reload.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+// enter adds the handle rather than inserting a newline into the one-line field
+const ADD_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface ManageAccessDialogProps {
+  isOpen: boolean;
+  logins: string[];
+  onAdd: (login: string) => void;
+  onRemove: (login: string) => void;
+  /** Publish the private link with the current allowlist and copy its connection line. */
+  onCreateLink: () => void;
+  onClose: () => void;
+  theme?: Theme;
+}
+
+export function ManageAccessDialog({
+  isOpen,
+  logins,
+  onAdd,
+  onRemove,
+  onCreateLink,
+  onClose,
+  theme,
+}: ManageAccessDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  const [draft, setDraft] = useState("");
+  const [inputGeneration, setInputGeneration] = useState(0);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputGeneration]);
+
+  const addDraft = (): void => {
+    const handle = draft.trim().replace(/^@/, "").toLowerCase();
+
+    if (handle && !logins.includes(handle)) onAdd(handle);
+    setDraft("");
+    setInputGeneration((generation) => generation + 1);
+  };
+
+  useKeyboard((key) => {
+    if (isOpen && key.name === "escape") onClose();
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Manage access "
+      width={Math.min(54, terminalWidth - 6)}
+      height={Math.min(18, 9 + logins.length)}
+      background={tokens.elevated}
+      onDismiss={onClose}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={tokens.textDim}>Only these GitHub users can open the private link.</text>
+        <box style={{ height: 1 }} />
+        {logins.length === 0 ? (
+          <text fg={tokens.textDim}>no one yet - add a handle below</text>
+        ) : (
+          logins.map((login) => (
+            <box key={login} onMouseUp={() => onRemove(login)} style={{ flexDirection: "row" }}>
+              <text fg={tokens.text}>{`@${login}`}</text>
+              <box style={{ flexGrow: 1 }} />
+              <text fg={tokens.textDim}>remove</text>
+            </box>
+          ))
+        )}
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <text fg={tokens.textDim}>{"@"}</text>
+          <textarea
+            key={inputGeneration}
+            ref={inputRef}
+            focused
+            placeholder="handle"
+            keyBindings={ADD_KEY_BINDINGS}
+            onContentChange={() => setDraft(inputRef.current?.plainText ?? "")}
+            style={{
+              height: 1,
+              flexGrow: 1,
+              backgroundColor: tokens.elevated,
+              focusedBackgroundColor: tokens.elevated,
+              textColor: tokens.text,
+              focusedTextColor: tokens.text,
+            }}
+          />
+        </box>
+        <Toolbar>
+          <Button marginRight={2} onPress={addDraft} theme={theme}>
+            {" add "}
+          </Button>
+          <Button variant="solid" marginRight={2} onPress={onCreateLink} theme={theme}>
+            {" create link "}
+          </Button>
+          <Button onPress={onClose} theme={theme}>
+            {" close "}
+          </Button>
+        </Toolbar>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/PromptDialog.test.tsx

@@ -47,12 +47,12 @@ test("clicking save fires onSave and clicking cancel fires onCancel", async () =
   );
   await settle(setup);
 
-  const save = locateText(setup, "enter save");
+  const save = locateText(setup, "save");
   await setup.mockMouse.click(save.column, save.row);
   expect(saved).toBe(1);
   expect(cancelled).toBe(0);
 
-  const cancel = locateText(setup, "esc cancel");
+  const cancel = locateText(setup, "cancel");
   await setup.mockMouse.click(cancel.column, cancel.row);
   expect(cancelled).toBe(1);
   expect(saved).toBe(1);

package/src/components/PromptDialog.tsx

@@ -11,6 +11,7 @@ import type { KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Dialog } from "./primitives/Dialog";
+import { DialogActions } from "./primitives/DialogActions";
 
 // ⏎ submits (suppresses the textarea's default newline); the grammar owns save.
 const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
@@ -18,7 +19,7 @@ const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }]
 export interface PromptDialogProps {
   isOpen: boolean;
   title?: string;
-  label: string;
+  label?: string;
   value: string;
   placeholder?: string;
   onInput: (text: string) => void;
@@ -69,7 +70,7 @@ export function PromptDialog({
           paddingTop: 1,
         }}
       >
-        <text fg={tokens.textDim}>{label}</text>
+        {label ? <text fg={tokens.textDim}>{label}</text> : null}
         <textarea
           ref={inputRef}
           focused
@@ -86,14 +87,12 @@ export function PromptDialog({
           }}
         />
         <box style={{ flexGrow: 1 }} />
-        <box style={{ flexDirection: "row" }}>
-          <box onMouseUp={onSave} style={{ marginRight: 3 }}>
-            <text fg={tokens.textDim}>enter save</text>
-          </box>
-          <box onMouseUp={onCancel}>
-            <text fg={tokens.textDim}>esc cancel</text>
-          </box>
-        </box>
+        <DialogActions
+          confirmLabel="save"
+          onConfirm={() => onSave?.()}
+          onCancel={() => onCancel?.()}
+          theme={theme}
+        />
       </box>
     </Dialog>
   );

package/src/components/ShareChoiceDialog.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShareChoiceDialog } from "./ShareChoiceDialog";
+
+export const meta: StoryMeta = { title: "Dialogs/ShareChoice" };
+
+export const PublicSelected: Story = {
+  render: () => (
+    <ShareChoiceDialog
+      isOpen
+      selectedIndex={0}
+      onPublicShare={() => {}}
+      onPrivateShare={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 12 },
+};
+
+export const PrivateSelected: Story = {
+  render: () => (
+    <ShareChoiceDialog
+      isOpen
+      selectedIndex={1}
+      onPublicShare={() => {}}
+      onPrivateShare={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 12 },
+};

package/src/components/ShareChoiceDialog.test.tsx

@@ -0,0 +1,103 @@
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { clickText, settle } from "../test-support";
+import { ShareChoiceDialog } from "./ShareChoiceDialog";
+
+interface ShareCounts {
+  publicShares: number;
+  privateShares: number;
+  closes: number;
+}
+
+async function renderDialog(selectedIndex = 0): Promise<{
+  setup: Awaited<ReturnType<typeof testRender>>;
+  counts: ShareCounts;
+}> {
+  const counts: ShareCounts = { publicShares: 0, privateShares: 0, closes: 0 };
+  const setup = await testRender(
+    <box style={{ width: 60, height: 12 }}>
+      <ShareChoiceDialog
+        isOpen
+        selectedIndex={selectedIndex}
+        onPublicShare={() => {
+          counts.publicShares += 1;
+        }}
+        onPrivateShare={() => {
+          counts.privateShares += 1;
+        }}
+        onClose={() => {
+          counts.closes += 1;
+        }}
+        theme={DARK}
+      />
+    </box>,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+
+  return { setup, counts };
+}
+
+describe("ShareChoiceDialog", () => {
+  test("offers both the public and private choice", async () => {
+    // Arrange + Act
+    const { setup } = await renderDialog();
+
+    // Assert
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("public link");
+    expect(frame).toContain("private link");
+  });
+
+  test("clicking the public choice publishes and closes", async () => {
+    // Arrange
+    const { setup, counts } = await renderDialog();
+
+    // Act
+    await clickText(setup, "public link");
+
+    // Assert
+    expect(counts.publicShares).toBe(1);
+    expect(counts.privateShares).toBe(0);
+    expect(counts.closes).toBe(1);
+  });
+
+  test("clicking the private choice opens manage-access and closes", async () => {
+    // Arrange
+    const { setup, counts } = await renderDialog();
+
+    // Act
+    await clickText(setup, "private link");
+
+    // Assert
+    expect(counts.privateShares).toBe(1);
+    expect(counts.publicShares).toBe(0);
+    expect(counts.closes).toBe(1);
+  });
+
+  test("renders nothing while closed", async () => {
+    // Arrange + Act
+    const setup = await testRender(
+      <box style={{ width: 60, height: 12 }}>
+        <ShareChoiceDialog
+          isOpen={false}
+          selectedIndex={0}
+          onPublicShare={() => {}}
+          onPrivateShare={() => {}}
+          onClose={() => {}}
+          theme={DARK}
+        />
+      </box>,
+      { width: 60, height: 12 },
+    );
+
+    await settle(setup);
+
+    // Assert
+    expect(setup.captureCharFrame()).not.toContain("public link");
+  });
+});

package/src/components/ShareChoiceDialog.tsx

@@ -0,0 +1,80 @@
+/**
+ * The share public/private choice, as an app-level overlay the share shortcut
+ * opens from any view. Public publishes a link for anyone; private opens the
+ * manage-access allowlist surface. The header share button and the shortcut both
+ * open this one surface. Selection moves with the keyboard (owned by the App) or
+ * a pointer click on a row.
+ */
+
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export type ShareChoice = "public" | "private";
+
+interface ShareChoiceRow {
+  choice: ShareChoice;
+  label: string;
+}
+
+export const SHARE_CHOICES: ShareChoiceRow[] = [
+  { choice: "public", label: "public link" },
+  { choice: "private", label: "private link" },
+];
+
+export interface ShareChoiceDialogProps {
+  isOpen: boolean;
+  /** The highlighted row; the App drives it from the shareChoice mode. */
+  selectedIndex: number;
+  /** Publish a public link and copy its connection line. */
+  onPublicShare: () => void;
+  /** Open the private-share manage-access allowlist surface. */
+  onPrivateShare: () => void;
+  onClose: () => void;
+  theme?: Theme;
+}
+
+export function ShareChoiceDialog({
+  isOpen,
+  selectedIndex,
+  onPublicShare,
+  onPrivateShare,
+  onClose,
+  theme,
+}: ShareChoiceDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+
+  const pick = (choice: ShareChoice): void => {
+    onClose();
+    if (choice === "public") onPublicShare();
+    else onPrivateShare();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Share "
+      width={Math.min(46, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      onDismiss={onClose}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
+        {SHARE_CHOICES.map((row, index) => (
+          <box key={row.choice} onMouseUp={() => pick(row.choice)} style={{ flexDirection: "row" }}>
+            <text fg={index === selectedIndex ? tokens.accent : tokens.text}>
+              {index === selectedIndex ? "› " : "  "}
+              {row.label}
+            </text>
+          </box>
+        ))}
+      </box>
+    </Dialog>
+  );
+}

package/src/components/SlashComposer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { SlashComposer } from "./SlashComposer";
+
+export const meta: StoryMeta = { title: "Chrome/SlashComposer" };
+
+export const Empty: Story = {
+  render: () => (
+    <box style={{ width: 60, height: 8, paddingLeft: 1, backgroundColor: DARK.panel }}>
+      <SlashComposer
+        seed=""
+        glyph="●"
+        quickActions={DEFAULT_QUICK_ACTIONS}
+        tokens={DARK}
+        onSubmit={() => {}}
+      />
+    </box>
+  ),
+  size: { width: 60, height: 8 },
+};
+
+export const WithDraft: Story = {
+  render: () => (
+    <box style={{ width: 60, height: 8, paddingLeft: 1, backgroundColor: DARK.panel }}>
+      <SlashComposer
+        seed="looks good, ship it"
+        glyph="●"
+        quickActions={DEFAULT_QUICK_ACTIONS}
+        tokens={DARK}
+        onSubmit={() => {}}
+      />
+    </box>
+  ),
+  size: { width: 60, height: 8 },
+};

package/src/components/SlashComposer.tsx

@@ -0,0 +1,87 @@
+/** A composer with the "/" actions-and-skills palette, sharing the inline-comment edit experience. */
+
+import React, { useContext, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { SlashSkillsContext } from "../skills";
+import {
+  activeSlashToken,
+  insertSlashItem,
+  mergeSlashItems,
+  slashFilter,
+  slashItemsFrom,
+} from "../slash-palette";
+import { Composer, ComposerPalette } from "./AnnotationCards";
+
+export interface SlashComposerProps {
+  seed: string;
+  glyph: string;
+  quickActions: QuickAction[];
+  tokens: Theme;
+  onSubmit: (text: string) => void;
+  onInput?: (text: string) => void;
+  placeholder?: string;
+}
+
+export function SlashComposer({
+  seed,
+  glyph,
+  quickActions,
+  tokens,
+  onSubmit,
+  onInput,
+  placeholder,
+}: SlashComposerProps): React.ReactNode {
+  const skills = useContext(SlashSkillsContext);
+  const [mountSeed, setMountSeed] = useState(seed);
+  const [text, setText] = useState(seed);
+  const [caret, setCaret] = useState(seed.length);
+  const [slashIndex, setSlashIndex] = useState(0);
+
+  const paletteItems = mergeSlashItems(slashItemsFrom(quickActions), skills);
+  const token = activeSlashToken(text, caret);
+  const items = token !== null ? slashFilter(paletteItems, token.slice(1)) : [];
+  const slashActive = token !== null && items.length > 0;
+
+  useKeyboard((key) => {
+    if (!slashActive) return;
+    const selected = Math.min(slashIndex, items.length - 1);
+
+    if (key.name === "up") return setSlashIndex(Math.max(0, selected - 1));
+    if (key.name === "down") return setSlashIndex(Math.min(items.length - 1, selected + 1));
+    if (key.name === "tab" || (key.name === "return" && !key.meta && !key.ctrl && !key.super)) {
+      const inserted = insertSlashItem(text, caret, items[selected]!.name);
+
+      setMountSeed(inserted.text);
+      setText(inserted.text);
+      setCaret(inserted.caret);
+      onInput?.(inserted.text);
+    }
+  });
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <Composer
+        key={mountSeed}
+        seed={mountSeed}
+        glyph={glyph}
+        tokens={tokens}
+        placeholder={placeholder}
+        onReady={() => {}}
+        onSave={onSubmit}
+        onInput={(next, nextCaret) => {
+          setText(next);
+          setCaret(nextCaret);
+          onInput?.(next);
+        }}
+      />
+      <ComposerPalette
+        slashActive={slashActive}
+        slashItems={items}
+        slashIndex={slashIndex}
+        tokens={tokens}
+      />
+    </box>
+  );
+}

package/src/components/ThreadTree.tsx

@@ -42,6 +42,9 @@ export interface ThreadTreeProps {
 
 const MENU_WIDTH = 12;
 
+/** Columns per nesting level in the sidebar cascade: section → project → thread. */
+const SIDEBAR_INDENT = 2;
+
 function ActionsMenu({
   pinned,
   onPin,
@@ -85,6 +88,7 @@ interface ThreadRowProps {
   title: string;
   selected: boolean;
   pinned: boolean;
+  depth: number;
   titleWidth: number;
   menuOpen: boolean;
   onToggleMenu: () => void;
@@ -97,7 +101,8 @@ interface ThreadRowProps {
 }
 
 function ThreadRow(props: ThreadRowProps): React.ReactNode {
-  const { title, selected, pinned, titleWidth, menuOpen, onToggleMenu, tokens, theme } = props;
+  const { title, selected, pinned, depth, titleWidth, menuOpen, onToggleMenu, tokens, theme } =
+    props;
   const [hovered, setHovered] = useState(false);
   const rowRef = useRef<BoxRenderable | null>(null);
   const { setOverlay, clearOverlay } = useRootOverlay();
@@ -157,8 +162,8 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
           backgroundColor: selected ? tokens.elevated : hovered ? tokens.panel : undefined,
         }}
       >
-        <text wrapMode="none">
-          <span fg={tokens.textDim}>{pinned ? ` ${NERD.star} ` : "   "}</span>
+        <box style={{ width: depth * SIDEBAR_INDENT, flexShrink: 0 }} />
+        <text wrapMode="none" style={{ flexShrink: 1 }}>
           <span fg={selected ? tokens.accent : tokens.textMuted}>{clippedTitle}</span>
         </text>
         <box style={{ flexGrow: 1 }} />
@@ -212,8 +217,7 @@ export function ThreadTree({
 
           if (row.kind === "project") {
             return (
-              <text key={row.id}>
-                <span fg={tokens.blue}>{` ${NERD.folderOpen} `}</span>
+              <text key={row.id} wrapMode="none" style={{ marginLeft: SIDEBAR_INDENT }}>
                 <span fg={tokens.textMuted}>{row.label}</span>
               </text>
             );
@@ -230,7 +234,8 @@ export function ThreadTree({
                 focused || activeId === undefined ? row.selectionIndex === cursor : activeId === id
               }
               pinned={pinnedIds?.has(id) ?? false}
-              titleWidth={titleWidth}
+              depth={row.depth}
+              titleWidth={Math.max(8, titleWidth - (row.depth - 1) * SIDEBAR_INDENT)}
               menuOpen={menuControl.openMenuId === `thread:${id}`}
               onToggleMenu={() => menuControl.toggleMenu(`thread:${id}`)}
               onSelect={onSelect ? () => onSelect(id) : undefined}

package/src/components/ThreadView.selection.test.tsx

@@ -7,7 +7,7 @@
  * all asserted on the frame, not on internal state.
  */
 
-import { afterEach, beforeEach, describe, expect, mock, test, type Mock } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, spyOn, test, type Mock } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { TextAttributes } from "@opentui/core";
@@ -17,6 +17,7 @@ import { settle, typeText } from "../test-support";
 import { buildDisplay, marksByDisplay } from "../view-plan";
 import { makeAnchor, parseBlocks, type Annotation } from "@cueloop/schema";
 import type { TextSpan } from "../thread-selection";
+import * as markRuns from "../mark-runs";
 import { fixturePlanSession } from "./story-fixtures";
 import { ThreadView } from "./ThreadView";
 
@@ -810,3 +811,89 @@ describe("discussion identity", () => {
     expect(annotate).not.toHaveBeenCalled();
   });
 });
+
+describe("a new comment sorts into place while typing", () => {
+  const blocks = parseBlocks(PLAN);
+  const anchorOn = (word: string): Annotation["anchor"] =>
+    makeAnchor(blocks, 1, PARAGRAPH.indexOf(word), PARAGRAPH.indexOf(word) + word.length);
+  const early: Annotation = {
+    id: "early",
+    kind: "comment",
+    anchor: anchorOn("persists"),
+    body: "alpha-note",
+    createdAt: "2026-09-01T10:00:00Z",
+  };
+  const late: Annotation = {
+    id: "late",
+    kind: "comment",
+    anchor: anchorOn("atomically"),
+    body: "omega-note",
+    createdAt: "2026-09-01T10:01:00Z",
+  };
+
+  test("a draft anchored between two comments renders between them, not appended to the stack", async () => {
+    // Arrange - two comments on the same line, one earlier and one later than the draft's word
+    setup.renderer.destroy();
+    await mount([early, late]);
+
+    // Act - mark a word between them and start typing a new comment
+    const sessions = locate("sessions");
+
+    await setup.mockMouse.doubleClick(sessions.column + 2, sessions.row);
+    await settle(setup);
+    await typeText(setup, "midway-note");
+    await settle(setup);
+
+    // Assert - the draft sits where it will land on save (by span start), not at the end
+    const rows = setup.captureCharFrame().split("\n");
+    const rowOf = (needle: string): number => rows.findIndex((row) => row.includes(needle));
+
+    expect(rowOf("alpha-note")).toBeGreaterThanOrEqual(0);
+    expect(rowOf("midway-note")).toBeGreaterThan(rowOf("alpha-note"));
+    expect(rowOf("omega-note")).toBeGreaterThan(rowOf("midway-note"));
+  });
+});
+
+describe("virtualization guard", () => {
+  // The performance guard: the thread view must word-wrap only the blocks in the viewport, not the
+  // whole document. Deterministic (a call count, not a wall-clock), so it fails on any machine if a
+  // future change un-virtualizes the view - the regression the nav-latency benchmark would show.
+  test("a large plan word-wraps only the on-screen blocks, not every block", async () => {
+    // Arrange - a plan far taller than the viewport
+    const paragraphs = Array.from({ length: 800 }, (_, index) => `Paragraph ${index} with words.`);
+    const bigPlan = `# Big Plan\n\n${paragraphs.join("\n\n")}\n`;
+    const display = buildDisplay(bigPlan, undefined);
+    const bigSession = fixturePlanSession({
+      artifact: { type: "plan", content: bigPlan, meta: { title: "Big", planPath: "big.md" } },
+      annotations: [],
+    });
+    const spy = spyOn(markRuns, "wrapLines");
+
+    try {
+      // Act
+      const bigSetup = await testRender(
+        <ThreadView
+          session={bigSession}
+          display={display}
+          marks={new Map()}
+          quickActions={DEFAULT_QUICK_ACTIONS}
+          observer={false}
+          onAnnotate={() => {}}
+          onReply={() => {}}
+          onUpdateAnnotation={() => {}}
+          onExit={() => {}}
+        />,
+        { width: 64, height: 24 },
+      );
+
+      await settle(bigSetup);
+
+      // Assert - across the mount's renders the view never wraps a block for each of the 800; a
+      // viewport-worth per render stays far under one full pass over the document
+      expect(spy.mock.calls.length).toBeLessThan(display.length);
+      bigSetup.renderer.destroy();
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});