@gogitcms/design-system 0.16.0-next.13 → 0.16.0-next.15

package/src/__tests__/ContentBrowser.master.test.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+// Two collections and a singleton, which is what a real config looks like: the
+// collections list, the singleton opens directly.
+const sections: CmsNavSection[] = [
+  {
+    title: "Content",
+    items: [
+      { key: "posts", label: "Posts", icon: "newspaper", count: 2 },
+      { key: "pages", label: "Pages", icon: "file", count: 4 },
+    ],
+  },
+  { title: "Configure", items: [{ key: "settings", label: "Settings", icon: "settings", direct: true }] },
+];
+const entries: CmsEntry[] = [
+  { id: "a", path: "posts/a.md", title: "Alpha", body: "" },
+  { id: "b", path: "posts/b.md", title: "Beta", body: "" },
+];
+
+// A controlled, browsing host — the editor's own configuration.
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+  entriesEmpty: "Choose a collection",
+  selectedEntryId: null,
+  onSelectEntry: () => {},
+} as const;
+
+describe("the master pane at rest", () => {
+  it("lists the sections and says what to do beside them", () => {
+    render(wrap(<ContentBrowser {...base} activeNavKey="" />));
+    const master = screen.getByTestId("pane-master");
+    expect(within(master).getByTestId("master-title")).toHaveTextContent("Content");
+    expect(screen.getByTestId("nav-posts")).toBeInTheDocument();
+    expect(screen.getByTestId("nav-pages")).toBeInTheDocument();
+    expect(screen.getByTestId("nav-settings")).toBeInTheDocument();
+    // Nothing is pushed in, so there is nothing to go back from.
+    expect(screen.queryByTestId("master-back")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("entries-list")).not.toBeInTheDocument();
+    expect(screen.getByTestId("detail-empty")).toHaveTextContent("Choose a collection");
+  });
+
+  it("pushes a collection in through the host", () => {
+    const onSelectNav = jest.fn();
+    render(wrap(<ContentBrowser {...base} activeNavKey="" onSelectNav={onSelectNav} />));
+    fireEvent.click(screen.getByTestId("nav-posts"));
+    expect(onSelectNav).toHaveBeenCalledWith("posts");
+  });
+});
+
+describe("a pushed collection", () => {
+  it("replaces the sections with the collection's entries, headed by Back and its name", () => {
+    render(wrap(<ContentBrowser {...base} activeNavKey="posts" />));
+    const master = screen.getByTestId("pane-master");
+    expect(within(master).getByText("Alpha")).toBeInTheDocument();
+    expect(within(master).getByText("Beta")).toBeInTheDocument();
+    expect(screen.queryByTestId("nav-posts")).not.toBeInTheDocument();
+    expect(screen.getByTestId("master-back")).toBeInTheDocument();
+    expect(screen.getByTestId("master-title")).toHaveTextContent("Posts");
+    // The region beside it prompts for a pick from the pushed list.
+    expect(screen.getByTestId("detail-empty")).toHaveTextContent("Select Posts");
+  });
+
+  it("goes back to the sections by clearing the selection", () => {
+    const onSelectNav = jest.fn();
+    render(wrap(<ContentBrowser {...base} activeNavKey="posts" onSelectNav={onSelectNav} />));
+    fireEvent.click(screen.getByTestId("master-back"));
+    expect(onSelectNav).toHaveBeenCalledWith("");
+  });
+
+  it("switches collections from its title, leaving out what has no list", () => {
+    const onSelectNav = jest.fn();
+    render(wrap(<ContentBrowser {...base} activeNavKey="posts" onSelectNav={onSelectNav} />));
+    expect(screen.queryByTestId("master-menu")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("master-title"));
+    const menu = screen.getByTestId("master-menu");
+    expect(within(menu).getByTestId("master-option-posts")).toHaveAttribute("aria-current", "page");
+    expect(within(menu).getByTestId("master-option-pages")).toBeInTheDocument();
+    // A singleton opens directly; there is no list to switch to.
+    expect(within(menu).queryByTestId("master-option-settings")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("master-option-pages"));
+    expect(onSelectNav).toHaveBeenCalledWith("pages");
+    expect(screen.queryByTestId("master-menu")).not.toBeInTheDocument();
+  });
+
+  it("does not re-select the collection it is already on", () => {
+    const onSelectNav = jest.fn();
+    render(wrap(<ContentBrowser {...base} activeNavKey="posts" onSelectNav={onSelectNav} />));
+    fireEvent.click(screen.getByTestId("master-title"));
+    fireEvent.click(screen.getByTestId("master-option-posts"));
+    expect(onSelectNav).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("master-menu")).not.toBeInTheDocument();
+  });
+
+  it("has a plain title when there is only one list to offer", () => {
+    const one: CmsNavSection[] = [
+      { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+      { title: "Configure", items: [{ key: "settings", label: "Settings", icon: "settings", direct: true }] },
+    ];
+    render(wrap(<ContentBrowser {...base} sections={one} activeNavKey="posts" />));
+    expect(screen.getByTestId("master-title")).toHaveTextContent("Posts");
+    fireEvent.click(screen.getByTestId("master-title"));
+    expect(screen.queryByTestId("master-menu")).not.toBeInTheDocument();
+  });
+});
+
+describe("a singleton", () => {
+  const doc: CmsEntry = { id: "s", path: "settings.yaml", title: "Settings", body: "" };
+
+  it("opens in the detail region and leaves the sections in place, its row lit", () => {
+    render(
+      wrap(
+        <ContentBrowser
+          {...base}
+          activeNavKey="settings"
+          entries={[doc]}
+          selectedEntryId="s"
+          openTabs={[{ id: "s", collection: "settings", entry: doc }]}
+          activeTabId="s"
+        />,
+      ),
+    );
+    // No list was pushed: the sections are still what the master shows.
+    expect(screen.getByTestId("nav-settings")).toHaveAttribute("aria-current", "page");
+    expect(screen.getByTestId("nav-posts")).toBeInTheDocument();
+    expect(screen.queryByTestId("master-back")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("entries-list")).not.toBeInTheDocument();
+    // The document itself is open beside them.
+    expect(screen.getByTestId("column-s")).toBeInTheDocument();
+  });
+});

package/src/__tests__/ContentBrowser.reorder.test.tsx

@@ -28,10 +28,9 @@ const base = {
   userInitials: "ED",
 } as const;
 
-test("both pane resize seams render on desktop", () => {
+test("the master pane's resize seam renders on desktop", () => {
   render(wrap(<ContentBrowser {...base} />));
-  expect(screen.getByTestId("resize-nav")).toBeInTheDocument();
-  expect(screen.getByTestId("resize-list")).toBeInTheDocument();
+  expect(screen.getByTestId("resize-master")).toBeInTheDocument();
 });
 
 test("column reorder grips appear only once a second column is open", () => {

package/src/__tests__/ContentBrowser.window.test.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+import { WorkspaceMenu, workspaceInitials } from "../components/WorkspaceMenu";
+import { ProjectMenu } from "../components/ProjectMenu";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+const entries: CmsEntry[] = [{ id: "a", path: "posts/a.md", title: "Alpha", body: "" }];
+
+const base = {
+  workspace: { name: "Acme", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+} as const;
+
+const workspaces = [
+  { id: "w1", name: "Acme Inc", slug: "acme" },
+  { id: "w2", name: "Side Project", slug: "side" },
+];
+
+// Two repositories, each with a project called "docs": the list is keyed by
+// repository as well as name, or the two would be one row.
+const projects = [
+  { key: "r1:website", name: "website", label: "Marketing site", detail: "acme/platform · website" },
+  { key: "r1:docs", name: "docs", label: "Documentation", detail: "acme/platform · docs" },
+  { key: "r2:docs", name: "docs", label: "Handbook", detail: "acme/handbook · docs" },
+];
+
+test("without a workspace menu the top bar keeps the static workspace tag", () => {
+  render(wrap(<ContentBrowser {...base} />));
+  expect(screen.getByText("Acme")).toBeInTheDocument();
+  expect(screen.queryByTestId("workspace-menu")).not.toBeInTheDocument();
+  // No window chrome either: the web and mobile apps never get a drag region.
+  expect(screen.getByTestId("top-bar")).not.toHaveAttribute("data-window-drag");
+});
+
+test("the workspace menu lists every workspace and switches to the one chosen", () => {
+  const onSelect = jest.fn();
+  const onOverview = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        workspaceMenu={{
+          workspaces,
+          current: "w1",
+          onSelect,
+          actions: [{ label: "Workspace overview", onSelect: onOverview, testID: "workspace-overview" }],
+        }}
+      />,
+    ),
+  );
+  // It names the current workspace, not the host's static tag.
+  expect(screen.getByTestId("workspace-name")).toHaveTextContent("Acme Inc");
+  expect(screen.queryByTestId("workspace-option-acme")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("workspace-menu"));
+  expect(screen.getByTestId("workspace-option-acme")).toHaveTextContent("Acme Inc");
+  expect(screen.getByTestId("workspace-option-side")).toHaveTextContent("side");
+
+  // Choosing the one already shown just closes the menu.
+  fireEvent.click(screen.getByTestId("workspace-option-acme"));
+  expect(onSelect).not.toHaveBeenCalled();
+  expect(screen.queryByTestId("workspace-menu-list")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("workspace-menu"));
+  fireEvent.click(screen.getByTestId("workspace-option-side"));
+  expect(onSelect).toHaveBeenCalledWith(workspaces[1]);
+
+  fireEvent.click(screen.getByTestId("workspace-menu"));
+  fireEvent.click(screen.getByTestId("workspace-overview"));
+  expect(onOverview).toHaveBeenCalledTimes(1);
+});
+
+test("a workspace-wide project list tells same-named projects apart by key", () => {
+  const onSelect = jest.fn();
+  render(wrap(<ProjectMenu projects={projects} current="r2:docs" onSelect={onSelect} />));
+  // The badge names the current project by its label.
+  expect(screen.getByTestId("project-trigger")).toHaveTextContent("Handbook");
+
+  fireEvent.click(screen.getByTestId("project-trigger"));
+  expect(screen.getByTestId("project-option-r1:docs")).toHaveTextContent("acme/platform · docs");
+  expect(screen.getByTestId("project-option-r2:docs")).toHaveTextContent("acme/handbook · docs");
+
+  fireEvent.click(screen.getByTestId("project-option-r1:docs"));
+  expect(onSelect).toHaveBeenCalledWith(projects[1]);
+});
+
+test("a project can be opened in a new window instead of switching this one", () => {
+  const onSelect = jest.fn();
+  const onOpenInNewWindow = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        projects={projects}
+        currentProject="r1:website"
+        onSelectProject={onSelect}
+        onOpenProjectInNewWindow={onOpenInNewWindow}
+      />,
+    ),
+  );
+  fireEvent.click(screen.getByTestId("project-trigger"));
+  fireEvent.click(screen.getByTestId("project-new-window-r2:docs"));
+  expect(onOpenInNewWindow).toHaveBeenCalledWith(projects[2]);
+  expect(onSelect).not.toHaveBeenCalled();
+  // Opening elsewhere closes the menu here.
+  expect(screen.queryByTestId("project-new-window-r2:docs")).not.toBeInTheDocument();
+});
+
+test("a manifest-name list renders exactly as before: no new-window control, name under the label", () => {
+  render(
+    wrap(
+      <ProjectMenu
+        projects={[
+          { name: "website", label: "Marketing site" },
+          { name: "docs", label: "docs" },
+        ]}
+        current="website"
+        onSelect={() => {}}
+      />,
+    ),
+  );
+  fireEvent.click(screen.getByTestId("project-trigger"));
+  expect(screen.getByTestId("project-option-website")).toHaveTextContent("Marketing site");
+  expect(screen.getByTestId("project-option-website")).toHaveTextContent("website");
+  expect(screen.queryByTestId("project-new-window-website")).not.toBeInTheDocument();
+});
+
+test("window chrome keeps the leading edge clear and marks the bar as the drag region", () => {
+  render(wrap(<ContentBrowser {...base} windowChrome={{ leadingInset: 80, height: 52 }} />));
+  const bar = screen.getByTestId("top-bar");
+  expect(bar).toHaveAttribute("data-window-drag", "true");
+  // The bar's own padding (12) plus the inset.
+  expect(bar.style.paddingLeft).toBe("92px");
+  // As tall as the title bar whose controls it carries.
+  expect(bar.style.height).toBe("52px");
+});
+
+test("without window chrome the bar keeps the layout's height", () => {
+  render(wrap(<ContentBrowser {...base} />));
+  expect(screen.getByTestId("top-bar").style.height).toBe("48px");
+});
+
+test("workspace initials come from the first and last words", () => {
+  expect(workspaceInitials("Acme Inc")).toBe("AI");
+  expect(workspaceInitials("acme")).toBe("AC");
+  expect(workspaceInitials("Big Old Workspace")).toBe("BW");
+  expect(workspaceInitials("  ")).toBe("?");
+});
+
+test("the standalone workspace menu works outside the content browser", () => {
+  const onSelect = jest.fn();
+  render(wrap(<WorkspaceMenu workspaces={workspaces} current="w2" onSelect={onSelect} testID="ws" />));
+  expect(screen.getByTestId("ws-name")).toHaveTextContent("Side Project");
+  fireEvent.click(screen.getByTestId("ws-menu"));
+  // The backdrop dismisses without choosing.
+  fireEvent.click(screen.getByTestId("ws-backdrop"));
+  expect(screen.queryByTestId("ws-menu-list")).not.toBeInTheDocument();
+  expect(onSelect).not.toHaveBeenCalled();
+});
+
+test("a folder stands where the workspace would, with its path and actions", () => {
+  const onOpenFolder = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        workspaceMenu={{
+          kind: "folder",
+          workspaces: [{ id: "folder", name: "site", slug: "/Users/ada/code/site" }],
+          current: "folder",
+          onSelect: () => {},
+          actions: [{ label: "Open Folder…", icon: "folder", onSelect: onOpenFolder, testID: "folder-open" }],
+          testID: "folder",
+        }}
+      />,
+    ),
+  );
+  expect(screen.getByTestId("folder-name")).toHaveTextContent("site");
+  expect(screen.getByLabelText("Folder site")).toBeInTheDocument();
+  // No monogram: a folder is not an organisation.
+  expect(screen.queryByText("SI")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("folder-menu"));
+  expect(screen.getByTestId("folder-menu-list")).toHaveTextContent("Folder");
+  expect(screen.getByTestId("folder-menu-list")).toHaveTextContent("/Users/ada/code/site");
+  fireEvent.click(screen.getByTestId("folder-open"));
+  expect(onOpenFolder).toHaveBeenCalled();
+});

package/src/__tests__/MediaBrowser.test.tsx

@@ -97,7 +97,9 @@ describe("sidebar section", () => {
   ];
   const entry: CmsEntry = { id: "a", path: "posts/a.md", title: "Alpha", body: "", fields: [] };
 
-  function renderShell(api: MediaApi | undefined, activeNavKey = "posts") {
+  // The sections are on screen while nothing is pushed into the master pane,
+  // so the button tests render with no active key.
+  function renderShell(api: MediaApi | undefined, activeNavKey = "") {
     const onSelectNav = jest.fn();
     render(
       <ThemeProvider>
@@ -156,8 +158,9 @@ describe("sidebar section", () => {
     // Nothing chosen yet, so the details pane says so rather than showing a
     // browser for an arbitrary set.
     expect(screen.getByTestId("media-sets-empty")).toBeInTheDocument();
-    // The document panes are gone — there is no document to edit here.
-    expect(screen.queryByTestId("pane-entries")).not.toBeInTheDocument();
+    // The document list and columns are gone — there is no document to edit here.
+    expect(screen.queryByTestId("entries-list")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("pane-detail")).not.toBeInTheDocument();
   });
 
   test("choosing a collection reports its key to the host", () => {
@@ -174,13 +177,16 @@ describe("sidebar section", () => {
     expect(screen.queryByTestId("media-sets-empty")).not.toBeInTheDocument();
   });
 
-  // The set is not a sidebar row, so without this the sidebar would show nothing
-  // selected while media is plainly on screen.
-  test("the Media button stays active while a collection is open", () => {
+  // The set is not a row of its own, so without this the title switcher would
+  // mark nothing current while media is plainly on screen.
+  test("Media reads as current while a collection is open", () => {
     renderShell(makeApi(), "media:uploads");
-    expect(screen.getByTestId("nav-media:")).toHaveAttribute("aria-current", "page");
-    // ...and an unrelated collection is not.
-    expect(screen.getByTestId("nav-posts")).not.toHaveAttribute("aria-current");
+    // The pushed list is headed "Media"...
+    expect(screen.getByTestId("master-title")).toHaveTextContent("Media");
+    // ...and its switcher marks Media, not an unrelated collection.
+    fireEvent.click(screen.getByTestId("master-title"));
+    expect(screen.getByTestId("master-option-media:")).toHaveAttribute("aria-current", "page");
+    expect(screen.getByTestId("master-option-posts")).not.toHaveAttribute("aria-current");
   });
 });
 

package/src/__tests__/ProtectedBranchModal.test.tsx

@@ -66,3 +66,17 @@ test("cancel dismisses", () => {
   fireEvent.click(screen.getByTestId("protected-branch-cancel"));
   expect(onCancel).toHaveBeenCalledTimes(1);
 });
+
+// The repository decides where its branches live. The prefix is shown, not
+// typed: the field holds only what follows it, and the name handed back is the
+// whole — so a suggestion that already carries the prefix is not doubled.
+test("a branch prefix is shown read-only and applied to the name", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} prefix="cms/" suggestedName="cms/edit/hello" onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-name-prefix")).toHaveTextContent("cms/");
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("edit/hello");
+  fireEvent.change(screen.getByTestId("protected-branch-name"), { target: { value: "spring" } });
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).toHaveBeenCalledWith("cms/spring");
+});

package/src/__tests__/cssTokens.test.ts

@@ -169,6 +169,7 @@ describe("scales", () => {
   it("has the layout dims from theme.ts", () => {
     const map: Record<string, keyof typeof lightTheme.layout> = {
       "--sidebar-w": "sidebar",
+      "--master-w": "master",
       "--column-w": "column",
       "--topbar-h": "topbar",
       "--container": "container",

package/src/__tests__/documentDrafts.test.ts

@@ -0,0 +1,59 @@
+// The drafts store is shared by every page of an origin, such as two editor
+// tabs. What one page does to it must not set the other off.
+
+const PROBE = "gitcms.draft.v1:probe";
+
+function freshDrafts(): typeof import("../components/documentDrafts") {
+  let mod: typeof import("../components/documentDrafts") | undefined;
+  jest.isolateModules(() => {
+    mod = require("../components/documentDrafts");
+  });
+  return mod!;
+}
+
+afterEach(() => {
+  jest.restoreAllMocks();
+  localStorage.clear();
+});
+
+test("the store is probed once, not on every read", () => {
+  const drafts = freshDrafts();
+  const setItem = jest.spyOn(Storage.prototype, "setItem");
+  drafts.subscribeDrafts(() => {});
+  drafts.hasDraft("a");
+  drafts.hasDraft("b");
+  drafts.draftCount();
+  drafts.refreshDrafts();
+  drafts.hasDraft("a");
+  expect(setItem.mock.calls.filter(([key]) => key === PROBE)).toHaveLength(1);
+});
+
+test("another page's probe is not a draft, and is not answered", () => {
+  const drafts = freshDrafts();
+  const onChange = jest.fn();
+  drafts.subscribeDrafts(onChange);
+  drafts.hasDraft("a");
+  const setItem = jest.spyOn(Storage.prototype, "setItem");
+
+  window.dispatchEvent(new StorageEvent("storage", { key: PROBE, newValue: "1" }));
+  window.dispatchEvent(new StorageEvent("storage", { key: PROBE, newValue: null }));
+  expect(onChange).not.toHaveBeenCalled();
+  expect(drafts.draftCount()).toBe(0);
+  expect(setItem).not.toHaveBeenCalled();
+
+  // Another page's draft is a change worth showing, and reading after it still
+  // writes nothing.
+  localStorage.setItem("gitcms.draft.v1:doc-1", JSON.stringify({ v: 1, values: {}, at: 1 }));
+  setItem.mockClear();
+  window.dispatchEvent(new StorageEvent("storage", { key: "gitcms.draft.v1:doc-1" }));
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(drafts.hasDraft("doc-1")).toBe(true);
+  expect(setItem).not.toHaveBeenCalled();
+});
+
+test("a probe caught mid-flight is not counted as a draft", () => {
+  const drafts = freshDrafts();
+  localStorage.setItem(PROBE, "1");
+  drafts.refreshDrafts();
+  expect(drafts.draftCount()).toBe(0);
+});

package/src/components/BranchMenu.tsx

@@ -19,8 +19,17 @@ export type BranchMenuProps = {
   /** Marked in the list; it is also the base every branch's changes compare to. */
   defaultBranch?: string;
   onSelect?: (branch: BranchRef) => void;
-  /** Omitted → no "New branch" row. Rejecting the name should throw. */
+  /**
+   * Omitted → no "New branch" row. Receives the full branch name — the prefix,
+   * when there is one, already applied. Rejecting the name should throw.
+   */
   onCreate?: (name: string) => Promise<void> | void;
+  /**
+   * The repository's branch prefix ("cms/"). Shown read-only ahead of the name
+   * field: branches the editor creates are always named under it, so the
+   * author types only what follows and cannot leave it out or get it wrong.
+   */
+  prefix?: string;
   /**
    * testID prefix for the trigger and the badge, so two menus in the same bar
    * (source and target) are addressable apart. Defaults to "branch"; a caller
@@ -37,7 +46,7 @@ export type BranchMenuProps = {
  * Branch names are metadata and always render mono, per the system's rule that
  * paths, hashes and refs are set in Geist Mono.
  */
-export function BranchMenu({ current, branches, defaultBranch, onSelect, onCreate, testID = "branch" }: BranchMenuProps) {
+export function BranchMenu({ current, branches, defaultBranch, onSelect, onCreate, prefix, testID = "branch" }: BranchMenuProps) {
   const t = useTheme();
   const [open, setOpen] = useState(false);
   const [creating, setCreating] = useState(false);
@@ -80,7 +89,7 @@ export function BranchMenu({ current, branches, defaultBranch, onSelect, onCreat
     setBusy(true);
     setError(null);
     try {
-      await onCreate(trimmed);
+      await onCreate((prefix ?? "") + trimmed);
       close();
     } catch (e: unknown) {
       setError((e as { message?: string })?.message || "Couldn’t create the branch.");
@@ -120,9 +129,10 @@ export function BranchMenu({ current, branches, defaultBranch, onSelect, onCreat
                 label="New branch"
                 value={name}
                 onChangeText={setName}
-                placeholder="feat/my-change"
+                placeholder={prefix ? "my-change" : "feat/my-change"}
                 mono
                 error={!!error}
+                prefix={prefix}
                 testID={`${testID}-create-input`}
               />
               <Text variant="monoSm" color="tertiary">