@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.101

package/src/workbench/components/WelcomePlayground.test.tsx

@@ -0,0 +1,83 @@
+/**
+ * The welcome page is a real annotation surface, but ephemeral: selecting its copy and typing leaves
+ * a comment that shows inline, exactly as a file does, and it lives only in the component - there is
+ * no controller or daemon behind it, so nothing is persisted. The copy prompts the two first gestures.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { WelcomePlayground } from "./WelcomePlayground";
+import { DARK } from "../../appearance/theme";
+import { CLIENT_VERSION } from "../../app/version";
+import {
+  dragText,
+  locateText,
+  press,
+  typeText,
+  pressKey,
+  waitForText,
+} from "../../testing/test-support";
+
+describe("WelcomePlayground", () => {
+  test("the copy prompts the select-and-type and the slash gestures", async () => {
+    const setup = await testRender(<WelcomePlayground quickActions={[]} theme={DARK} />, {
+      width: 80,
+      height: 24,
+    });
+
+    await waitForText(setup, "Getting started");
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("start typing to leave your first comment");
+    expect(frame).toContain('type "/"');
+    expect(frame).toContain(`cueloop v${CLIENT_VERSION}`);
+
+    setup.renderer.destroy();
+  });
+
+  test("selecting the copy and typing leaves a comment inline, exactly like a file", async () => {
+    const setup = await testRender(<WelcomePlayground quickActions={[]} theme={DARK} />, {
+      width: 80,
+      height: 24,
+    });
+
+    // Act - select the practice line, type a comment, send it
+    await waitForText(setup, "quick brown fox");
+    await dragText(setup, "quick brown fox", "quick brown fox", "quick brown fox".length);
+    await typeText(setup, "my first note");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert - the note renders on the surface, no controller or daemon involved
+    await waitForText(setup, "my first note");
+
+    setup.renderer.destroy();
+  });
+
+  test("the caret marker remains visible when Up crosses an empty line", async () => {
+    const setup = await testRender(<WelcomePlayground quickActions={[]} theme={DARK} />, {
+      width: 100,
+      height: 28,
+    });
+
+    await waitForText(setup, "Start");
+    const start = locateText(setup, "Start");
+
+    await setup.mockMouse.click(start.column, start.row);
+    await press(setup, "escape");
+
+    const markerRows = () =>
+      setup
+        .captureCharFrame()
+        .split("\n")
+        .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+
+    expect(markerRows()).toEqual([start.row]);
+    await press(setup, "up");
+    expect(markerRows()).toEqual([start.row - 1]);
+    await press(setup, "up");
+    expect(markerRows()).toEqual([start.row - 2]);
+
+    setup.renderer.destroy();
+  });
+});

package/src/workbench/components/WelcomePlayground.tsx

@@ -0,0 +1,138 @@
+// The welcome page as a live annotation playground: the onboarding copy renders through the same
+// diff sheet a file uses, so selecting text and typing leaves a comment with the identical gesture a
+// real review uses. The notes are ephemeral - there is no file or thread behind onboarding copy, so
+// they live only in this component's state and are never stored or re-anchored. The copy teaches the
+// two first gestures: select-and-type to comment, and "/" for the quick actions and skills.
+
+import React, { useMemo, useState } from "react";
+import {
+  makeAnchor,
+  newAnnotationId,
+  SCHEMA_VERSION,
+  type Annotation,
+  type Thread,
+} from "@cueloop/schema";
+import type { Theme } from "../../appearance/theme";
+import type { QuickAction } from "../../settings/config";
+import { CLIENT_VERSION } from "../../app/version";
+import { DiffContentView } from "../../diff/components/DiffContentView";
+import { diffRowBlocks, fileContentsRows, marksByRows } from "../../diff/view-diff";
+
+export interface WelcomePlaygroundProps {
+  quickActions: QuickAction[];
+  onComposingChange?: (composing: boolean) => void;
+  suspended?: boolean;
+  theme?: Theme;
+}
+
+const DOCS_URL = "https://cueloop.dev/docs/";
+
+/** The playground copy: a heading, the two guided prompts, a line to practice on, and the links. */
+function welcomeCopy(version: string): string {
+  return [
+    "Getting started",
+    "Comment on agent-authored work.",
+    "",
+    "This page is a playground. Nothing you write here is saved.",
+    "",
+    "Select the line below and start typing to leave your first comment:",
+    "",
+    "    The quick brown fox jumps over the lazy dog.",
+    "",
+    'While composing, type "/" to see the quick actions and skills.',
+    "",
+    "Start",
+    "  - select a thread",
+    "  - inspect files and changes",
+    "",
+    "Learn",
+    `  - docs        ${DOCS_URL}`,
+    "",
+    "Version",
+    `  - cueloop v${version}`,
+  ].join("\n");
+}
+
+/** An ephemeral thread that holds nothing but the playground's notes, so the surface groups
+ *  discussions exactly as a real review does without any of it reaching the daemon. */
+function playgroundThread(annotations: Annotation[]): Thread {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "welcome",
+    workspace: { repoRoot: "", branch: "main" },
+    artifact: { type: "plan", content: "", meta: {} },
+    revisions: [],
+    annotations,
+    message: null,
+    status: "pending",
+    createdAt: "1970-01-01T00:00:00.000Z",
+  };
+}
+
+export function WelcomePlayground(props: WelcomePlaygroundProps): React.ReactNode {
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const rows = useMemo(() => fileContentsRows("welcome", welcomeCopy(CLIENT_VERSION)), []);
+  const session = playgroundThread(annotations);
+
+  return (
+    <DiffContentView
+      rows={rows}
+      session={session}
+      marks={marksByRows(annotations, rows)}
+      quickActions={props.quickActions}
+      observer={false}
+      commentsEnabled
+      fileView
+      suspended={props.suspended}
+      onComposingChange={props.onComposingChange}
+      onAnnotate={(span, body) =>
+        setAnnotations((current) => [
+          ...current,
+          {
+            id: newAnnotationId(),
+            kind: "comment",
+            anchor: makeAnchor(
+              diffRowBlocks(rows),
+              span.start.blockIndex,
+              span.start.char,
+              span.end.char,
+              span.end.blockIndex,
+            ),
+            target: { kind: "welcome" },
+            body,
+            createdAt: new Date().toISOString(),
+          },
+        ])
+      }
+      onReply={(rootAnnotationId, body) =>
+        setAnnotations((current) => {
+          const root = current.find((annotation) => annotation.id === rootAnnotationId);
+
+          if (!root) return current;
+
+          return [
+            ...current,
+            {
+              id: newAnnotationId(),
+              kind: "comment",
+              anchor: root.anchor,
+              target: { kind: "welcome" },
+              body,
+              replyTo: rootAnnotationId,
+              createdAt: new Date().toISOString(),
+            },
+          ];
+        })
+      }
+      onUpdateAnnotation={(id, body) =>
+        setAnnotations((current) =>
+          current.map((annotation) =>
+            annotation.id === id ? { ...annotation, body } : annotation,
+          ),
+        )
+      }
+      onExit={() => {}}
+      theme={props.theme}
+    />
+  );
+}

package/src/workbench/components/editor-grid.test.ts

@@ -0,0 +1,184 @@
+import { describe, expect, test } from "bun:test";
+import {
+  addTab,
+  changesTab,
+  closeTab,
+  countEditorGroups,
+  containsGroup,
+  fileTab,
+  firstGroupId,
+  keepFileTab,
+  makeGroup,
+  MAX_EDITOR_GROUPS,
+  openFileTab,
+  splitGroup,
+  type EditorBranch,
+  type EditorGroup,
+  type EditorNode,
+} from "./editor-grid";
+
+function asBranch(node: EditorNode | null): EditorBranch {
+  if (node === null || node.type !== "branch") throw new Error("expected a branch node");
+
+  return node;
+}
+function asGroup(node: EditorNode | null): EditorGroup {
+  if (node === null || node.type !== "group") throw new Error("expected a group node");
+
+  return node;
+}
+
+describe("editor grid", () => {
+  test("a fresh group holds its tabs with the first active", () => {
+    const tab = changesTab();
+    const group = makeGroup([tab]);
+
+    expect(group.type).toBe("group");
+    expect(group.activeTabId).toBe(tab.id);
+  });
+
+  test("adding a tab focuses it", () => {
+    const group = makeGroup([changesTab()]);
+    const file = fileTab("App.tsx", "src/App.tsx", "diff");
+    const next = asGroup(addTab(group, group.id, file));
+
+    expect(next.tabs).toHaveLength(2);
+    expect(next.activeTabId).toBe(file.id);
+  });
+
+  test("a new preview replaces the group's previous preview", () => {
+    const group = makeGroup([changesTab()]);
+    const first = asGroup(openFileTab(group, group.id, "src/a.ts", "contents", false).tree);
+    const second = asGroup(openFileTab(first, group.id, "src/b.ts", "contents", false).tree);
+
+    expect(second.tabs.map((tab) => tab.path)).toEqual([undefined, "src/b.ts"]);
+    expect(second.tabs[1]?.preview).toBe(true);
+  });
+
+  test("keeping a preview makes subsequent previews open beside it", () => {
+    const group = makeGroup([changesTab()]);
+    const preview = asGroup(openFileTab(group, group.id, "src/a.ts", "contents", false).tree);
+    const kept = asGroup(keepFileTab(preview, group.id, preview.activeTabId!));
+    const next = asGroup(openFileTab(kept, group.id, "src/b.ts", "contents", false).tree);
+
+    expect(next.tabs.map((tab) => tab.path)).toEqual([undefined, "src/a.ts", "src/b.ts"]);
+    expect(next.tabs[1]?.preview).toBe(false);
+  });
+
+  test("reopening a file focuses its existing tab across groups and changes its view", () => {
+    const group = makeGroup([changesTab()]);
+    const open = asGroup(openFileTab(group, group.id, "src/a.ts", "contents", true).tree);
+    const { tree } = splitGroup(open, group.id, "right");
+    const branch = asBranch(tree);
+    const right = asGroup(branch.children[1]!);
+    const reopened = openFileTab(tree, group.id, "src/a.ts", "diff", false);
+
+    expect(reopened.focusGroupId).toBe(right.id);
+    expect(asGroup(asBranch(reopened.tree).children[1]!).tabs).toHaveLength(1);
+    expect(asGroup(asBranch(reopened.tree).children[1]!).tabs[0]).toMatchObject({
+      path: "src/a.ts",
+      fileView: "diff",
+      preview: false,
+    });
+  });
+
+  test("splitting right makes a horizontal branch and focuses the new group", () => {
+    const group = makeGroup([fileTab("App.tsx", "src/App.tsx", "diff")]);
+    const { tree, focusGroupId } = splitGroup(group, group.id, "right");
+
+    expect(tree.type).toBe("branch");
+    const branch = asBranch(tree);
+
+    expect(branch.orientation).toBe("horizontal");
+    expect(branch.children).toHaveLength(2);
+    // the new group is the second child (right edge) and takes focus
+    expect(branch.children[1]!.id).toBe(focusGroupId);
+    expect(firstGroupId(tree)).toBe(group.id);
+    expect(asGroup(branch.children[0]!).tabs.some((tab) => tab.path === "src/App.tsx")).toBe(false);
+  });
+
+  test("splitting up makes a vertical branch with the new group first", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "contents")]);
+    const { tree, focusGroupId } = splitGroup(group, group.id, "up");
+    const branch = asBranch(tree);
+
+    expect(branch.orientation).toBe("vertical");
+    expect(branch.children[0]!.id).toBe(focusGroupId);
+  });
+
+  test("splitting a file-only group keeps the Changes tab unique", () => {
+    const changes = makeGroup([changesTab()]);
+    const file = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const tree: EditorNode = {
+      type: "branch",
+      id: "two-groups",
+      orientation: "horizontal",
+      children: [changes, file],
+    };
+    const split = splitGroup(tree, file.id, "down");
+
+    expect(asBranch(split.tree).children[0]).toBe(changes);
+    expect(asBranch(asBranch(split.tree).children[1]!).children[0]).toMatchObject({
+      tabs: [{ kind: "welcome" }],
+    });
+  });
+
+  test("splitting Changes moves it to the new group", () => {
+    const group = makeGroup([changesTab()]);
+    const split = splitGroup(group, group.id, "right");
+    const branch = asBranch(split.tree);
+
+    expect(asGroup(branch.children[0]!).tabs[0]?.kind).toBe("welcome");
+    expect(asGroup(branch.children[1]!).tabs[0]?.kind).toBe("changes");
+  });
+
+  test("closing the last tab of a split collapses the branch back to one group", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const { tree } = splitGroup(group, group.id, "right");
+    const branch = asBranch(tree);
+    const rightGroup = asGroup(branch.children[1]!);
+    const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
+
+    expect(collapsed?.type).toBe("group");
+    expect(asGroup(collapsed).id).toBe(group.id);
+  });
+
+  test("closing the only tab of the whole grid returns null", () => {
+    const tab = changesTab();
+    const group = makeGroup([tab]);
+
+    expect(closeTab(group, group.id, tab.id)).toBeNull();
+  });
+
+  test("containsGroup finds a live group and misses a pruned one", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const { tree } = splitGroup(group, group.id, "right");
+    const branch = asBranch(tree);
+    const rightGroup = asGroup(branch.children[1]!);
+
+    expect(containsGroup(tree, group.id)).toBe(true);
+    const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
+
+    expect(containsGroup(asGroup(collapsed), rightGroup.id)).toBe(false);
+  });
+
+  test("mixed split directions stop at eight editor groups", () => {
+    const first = makeGroup([changesTab()]);
+    let tree: EditorNode = first;
+    let focusGroupId = first.id;
+    const directions = ["right", "up", "left", "down"] as const;
+
+    for (const direction of [...directions, ...directions]) {
+      const result = splitGroup(tree, focusGroupId, direction);
+
+      tree = result.tree;
+      focusGroupId = result.focusGroupId;
+    }
+
+    expect(countEditorGroups(tree)).toBe(MAX_EDITOR_GROUPS);
+    const excess = splitGroup(tree, focusGroupId, "right");
+
+    expect(excess.tree).toBe(tree);
+    expect(excess.focusGroupId).toBe(focusGroupId);
+  });
+});

package/src/workbench/components/editor-grid.ts

@@ -0,0 +1,281 @@
+// The Changes pane's editor layout: a tree of nodes where a leaf is an editor group (a tab strip plus
+// its one active tab) and a branch splits child nodes along an orientation. Splitting a file tab
+// moves it into a new group; a group is pruned when its last tab closes, collapsing the
+// branch that held it.
+
+/** One editor in a group's tab strip: the Changes tab (the whole diff), a per-file tab, or Welcome. */
+export interface EditorTab {
+  id: string;
+  kind: "changes" | "file" | "welcome";
+  label: string;
+  path?: string;
+  fileView?: "diff" | "contents";
+  preview?: boolean;
+}
+
+/** A leaf of the grid: one editor group holding tabs, with the active tab id. */
+export interface EditorGroup {
+  type: "group";
+  id: string;
+  tabs: EditorTab[];
+  activeTabId: string | null;
+}
+
+/** A branch of the grid: children laid out along one orientation (horizontal = side by side). */
+export interface EditorBranch {
+  type: "branch";
+  id: string;
+  orientation: "horizontal" | "vertical";
+  children: EditorNode[];
+}
+
+export type EditorNode = EditorGroup | EditorBranch;
+
+/** Which edge a split places the new group on; Left/Right split horizontally, Up/Down vertically. */
+export type SplitDirection = "left" | "right" | "up" | "down";
+
+/** The editor grid stops at eight groups so every tile remains usable. */
+export const MAX_EDITOR_GROUPS = 8;
+
+/** A split's outcome: the new grid and the id of the group that should take focus. */
+export interface SplitResult {
+  tree: EditorNode;
+  focusGroupId: string;
+}
+
+const freshId = (): string => crypto.randomUUID();
+
+/** A new editor group holding the given tabs, with the first tab active. */
+export function makeGroup(tabs: EditorTab[]): EditorGroup {
+  return { type: "group", id: freshId(), tabs, activeTabId: tabs[0]?.id ?? null };
+}
+
+/** The Changes tab: the whole diff in one scroll, the disposable default of the Changes pane. */
+export function changesTab(): EditorTab {
+  return { id: freshId(), kind: "changes", label: "Changes" };
+}
+
+/** The Welcome tab: the getting-started surface, a disposable tab shown before any thread is opened. */
+export function welcomeTab(): EditorTab {
+  return { id: freshId(), kind: "welcome", label: "Welcome" };
+}
+
+/** A file tab, opened from a tree; a diff view for a changed file, plain contents otherwise. */
+export function fileTab(
+  label: string,
+  path: string,
+  fileView: "diff" | "contents",
+  preview = false,
+): EditorTab {
+  return { id: freshId(), kind: "file", label, path, fileView, preview };
+}
+
+/** The id of the first editor group in reading order; the fallback focus target. */
+export function firstGroupId(node: EditorNode): string {
+  return node.type === "group" ? node.id : firstGroupId(node.children[0]!);
+}
+
+/** Whether a group id still exists in the grid; used to re-home focus after a prune. */
+export function containsGroup(node: EditorNode, groupId: string): boolean {
+  if (node.type === "group") return node.id === groupId;
+
+  return node.children.some((child) => containsGroup(child, groupId));
+}
+
+/** Count editor tiles, including groups inside nested horizontal and vertical splits. */
+export function countEditorGroups(node: EditorNode): number {
+  if (node.type === "group") return 1;
+
+  return node.children.reduce((count, child) => count + countEditorGroups(child), 0);
+}
+
+function replaceGroup(
+  node: EditorNode,
+  id: string,
+  fn: (group: EditorGroup) => EditorNode,
+): EditorNode {
+  if (node.type === "group") return node.id === id ? fn(node) : node;
+
+  return { ...node, children: node.children.map((child) => replaceGroup(child, id, fn)) };
+}
+
+/** Make a tab the active one in its group. */
+export function activateTab(node: EditorNode, groupId: string, tabId: string): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({ ...group, activeTabId: tabId }));
+}
+
+/** Append a tab to a group and focus it. */
+export function addTab(node: EditorNode, groupId: string, tab: EditorTab): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({
+    ...group,
+    tabs: [...group.tabs, tab],
+    activeTabId: tab.id,
+  }));
+}
+
+/** Activate the one Changes tab, or add it beside the active group's existing tabs. */
+export function openChangesTab(node: EditorNode, groupId: string): SplitResult {
+  const existing = findTabByKind(node, "changes");
+
+  if (existing) {
+    return {
+      tree: activateTab(node, existing.groupId, existing.tab.id),
+      focusGroupId: existing.groupId,
+    };
+  }
+
+  return { tree: addTab(node, groupId, changesTab()), focusGroupId: groupId };
+}
+
+function findTabByKind(
+  node: EditorNode,
+  kind: EditorTab["kind"],
+): { groupId: string; tab: EditorTab } | null {
+  if (node.type === "group") {
+    const tab = node.tabs.find((candidate) => candidate.kind === kind);
+
+    return tab ? { groupId: node.id, tab } : null;
+  }
+
+  for (const child of node.children) {
+    const found = findTabByKind(child, kind);
+
+    if (found) return found;
+  }
+
+  return null;
+}
+
+interface FileTabLocation {
+  groupId: string;
+  tab: EditorTab;
+}
+
+/** A file path is one editor tab across the grid, even when the groups are split. */
+function findFileTab(node: EditorNode, path: string): FileTabLocation | null {
+  if (node.type === "group") {
+    const tab = node.tabs.find((candidate) => candidate.kind === "file" && candidate.path === path);
+
+    return tab ? { groupId: node.id, tab } : null;
+  }
+
+  for (const child of node.children) {
+    const found = findFileTab(child, path);
+
+    if (found) return found;
+  }
+
+  return null;
+}
+
+/** Open a file once, replacing only a preview; reopening focuses its existing tab. */
+export function openFileTab(
+  node: EditorNode,
+  groupId: string,
+  path: string,
+  fileView: "diff" | "contents",
+  persistent: boolean,
+): SplitResult {
+  const existing = findFileTab(node, path);
+
+  if (existing) {
+    return {
+      tree: replaceGroup(node, existing.groupId, (group) => ({
+        ...group,
+        tabs: group.tabs.map((tab) =>
+          tab.id === existing.tab.id
+            ? { ...tab, fileView, preview: persistent ? false : tab.preview }
+            : tab,
+        ),
+        activeTabId: existing.tab.id,
+      })),
+      focusGroupId: existing.groupId,
+    };
+  }
+
+  const label = path.split("/").pop() ?? path;
+  const tab = fileTab(label, path, fileView, !persistent);
+
+  return {
+    tree: replaceGroup(node, groupId, (group) => {
+      const previewIndex = persistent ? -1 : group.tabs.findIndex((item) => item.preview);
+      const tabs = [...group.tabs];
+
+      if (previewIndex >= 0) tabs.splice(previewIndex, 1, tab);
+      else tabs.push(tab);
+
+      return { ...group, tabs, activeTabId: tab.id };
+    }),
+    focusGroupId: groupId,
+  };
+}
+
+/** Keep a preview file tab open when its tab is double-clicked. */
+export function keepFileTab(node: EditorNode, groupId: string, tabId: string): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({
+    ...group,
+    tabs: group.tabs.map((tab) => (tab.id === tabId ? { ...tab, preview: false } : tab)),
+  }));
+}
+
+/** Drop empty groups and collapse a branch that ends up with one child; null when nothing remains. */
+export function pruneEmpty(node: EditorNode): EditorNode | null {
+  if (node.type === "group") return node.tabs.length > 0 ? node : null;
+  const kept = node.children.map(pruneEmpty).filter((child): child is EditorNode => child !== null);
+
+  if (kept.length === 0) return null;
+  if (kept.length === 1) return kept[0]!;
+
+  return { ...node, children: kept };
+}
+
+/** Close a tab; returns the pruned tree, or null when the last tab of the whole grid is closed. */
+export function closeTab(node: EditorNode, groupId: string, tabId: string): EditorNode | null {
+  const next = replaceGroup(node, groupId, (group) => {
+    const tabs = group.tabs.filter((tab) => tab.id !== tabId);
+    const activeTabId = group.activeTabId === tabId ? (tabs[0]?.id ?? null) : group.activeTabId;
+
+    return { ...group, tabs, activeTabId };
+  });
+
+  return pruneEmpty(next);
+}
+
+/** Split a group's active tab into a new group on the given edge; returns the tree and the new focus. */
+export function splitGroup(
+  node: EditorNode,
+  groupId: string,
+  direction: SplitDirection,
+): SplitResult {
+  if (countEditorGroups(node) >= MAX_EDITOR_GROUPS) return { tree: node, focusGroupId: groupId };
+
+  let focusGroupId = groupId;
+  const tree = replaceGroup(node, groupId, (group) => {
+    const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
+
+    if (active === undefined) return group;
+    const movedTab: EditorTab =
+      active.kind === "welcome" ? { ...active, id: freshId() } : { ...active, preview: false };
+    const newGroup = makeGroup([movedTab]);
+
+    focusGroupId = newGroup.id;
+    const orientation = direction === "left" || direction === "right" ? "horizontal" : "vertical";
+    const newFirst = direction === "left" || direction === "up";
+    const remainingTabs =
+      active.kind === "welcome" ? group.tabs : group.tabs.filter((tab) => tab.id !== active.id);
+    const sourceTabs =
+      remainingTabs.length > 0
+        ? remainingTabs
+        : [findTabByKind(node, "changes") ? welcomeTab() : changesTab()];
+    const sourceGroup = {
+      ...group,
+      tabs: sourceTabs,
+      activeTabId: sourceTabs[0]!.id,
+    };
+    const children = newFirst ? [newGroup, sourceGroup] : [sourceGroup, newGroup];
+
+    return { type: "branch", id: freshId(), orientation, children };
+  });
+
+  return { tree, focusGroupId };
+}