@nkzw/codiff-core 1.9.0 → 1.9.1

package/dist/SharedWalkthroughApp.d.ts

@@ -32,10 +32,11 @@ export type ReviewSurfaceProps = {
     onDeleteShare?: () => Promise<void> | void;
     onModeChange?: (mode: ReviewMode) => void;
     providerLabel?: string;
+    repositoryUrl?: string;
     settingsBar?: ReactNode;
     signInLabel?: string;
     snapshot: SharedWalkthroughSnapshot;
     sourceDescriptionFooterAside?: ReactNode;
     title?: string;
 };
-export declare function ReviewSurface({ commenting, externalUrl, gitIdentity, initialMode, interactive, onDeleteShare, onModeChange, providerLabel, settingsBar, signInLabel, snapshot, sourceDescriptionFooterAside, title, }: ReviewSurfaceProps): import("react").JSX.Element;
+export declare function ReviewSurface({ commenting, externalUrl, gitIdentity, initialMode, interactive, onDeleteShare, onModeChange, providerLabel, repositoryUrl, settingsBar, signInLabel, snapshot, sourceDescriptionFooterAside, title, }: ReviewSurfaceProps): import("react").JSX.Element;

package/dist/app/components/ReviewTopBar.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export type ReviewModeItem<Mode extends string> = {
+    ariaLabel?: string;
+    icon: ReactNode;
+    indicator?: ReactNode;
+    label: string;
+    title?: string;
+    value: Mode;
+};
+export declare function ReviewTopBar<Mode extends string>({ actions, context, leading, mode, modes, onModeChange, onToggleSidebar, repository, repositoryTooltip, sidebarCollapsed, toggleTitle, }: {
+    actions?: ReactNode;
+    context?: ReactNode;
+    leading?: ReactNode;
+    mode: Mode;
+    modes: ReadonlyArray<ReviewModeItem<Mode>>;
+    onModeChange: (mode: Mode) => void;
+    onToggleSidebar: () => void;
+    repository: ReactNode;
+    repositoryTooltip?: string;
+    sidebarCollapsed: boolean;
+    toggleTitle: string;
+}): import("react").JSX.Element;

package/dist/app/components/Sidebar.d.ts

@@ -2,7 +2,7 @@ import type { CodiffKeymap } from '../../config/types.ts';
 import type { DiffLineCount, PullRequestSource, SidebarMode, WalkthroughError } from '../../lib/app-types.ts';
 import type { ChangedFile, HistoryEntry, NarrativeWalkthrough, ReviewSource } from '../../types.ts';
 import type { NarrativeNavigation } from './walkthrough/useNarrativeNavigation.ts';
-export declare function Sidebar({ branchSource, commitFiles, commitViewOpen, currentSource, files, historyEntries, historyHasMore, historyLoading, keymap, mode, narrativeNavigation, narrativeWalkthrough, onActivatePath, onLoadMoreHistory, onModeChange, onSearchQueryChange, onSelectSource, onShareWalkthrough, onToggleCommitView, pullRequestSource, reloadDeltaPaths, searchQuery, selectedPath, shareWalkthroughDisabled, showWhitespace, viewed, walkthroughError, walkthroughLoading, walkthroughProgress, walkthroughUnread, }: {
+export declare function Sidebar({ branchSource, commitFiles, commitViewOpen, currentSource, files, historyEntries, historyHasMore, historyLoading, keymap, mode, narrativeNavigation, narrativeWalkthrough, onActivatePath, onLoadMoreHistory, onSearchQueryChange, onSelectSource, onShareWalkthrough, onToggleCommitView, pullRequestSource, reloadDeltaPaths, searchQuery, selectedPath, shareWalkthroughDisabled, showWhitespace, viewed, walkthroughError, walkthroughLoading, walkthroughProgress, }: {
     branchSource: Extract<ReviewSource, {
         type: 'branch-diff';
     }> | null;
@@ -19,7 +19,6 @@ export declare function Sidebar({ branchSource, commitFiles, commitViewOpen, cur
     narrativeWalkthrough: NarrativeWalkthrough | null;
     onActivatePath: (path: string) => void;
     onLoadMoreHistory: () => void;
-    onModeChange: (mode: SidebarMode) => void;
     onSearchQueryChange: (query: string) => void;
     onSelectSource: (source: ReviewSource) => void;
     onShareWalkthrough?: () => void;
@@ -38,7 +37,6 @@ export declare function Sidebar({ branchSource, commitFiles, commitViewOpen, cur
         responseLabelIndex: number;
         stageRevision: number;
     };
-    walkthroughUnread: boolean;
 }): import("react").JSX.Element;
 export declare function DiffLineCountBadge({ ariaLabelPrefix, className, lineCount, }: {
     ariaLabelPrefix?: string;

package/dist/react.mjs

@@ -7,11 +7,14 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { MarkdownEditor } from "@nkzw/mdx-editor";
 import { frontmatterPlugin, imagePlugin } from "@nkzw/mdx-editor/core";
 import { DownloadSimpleIcon } from "@phosphor-icons/react/DownloadSimple";
-import { Copy, ExternalLink, Trash2, X } from "lucide-react";
+import { Copy, Trash2, X } from "lucide-react";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react/ArrowSquareOut";
+import { ChatCircleIcon } from "@phosphor-icons/react/ChatCircle";
+import { PathIcon } from "@phosphor-icons/react/Path";
+import { TreeStructureIcon } from "@phosphor-icons/react/TreeStructure";
 import { FileTree, useFileTree } from "@pierre/trees/react";
 import { hydratePartialDiff, parseDiffFromFile, parsePatchFiles, registerCustomTheme, setCustomExtension } from "@pierre/diffs";
 import useRelativeTime from "@nkzw/use-relative-time";
-import { ChatCircleIcon } from "@phosphor-icons/react/ChatCircle";
 import { CaretDownIcon } from "@phosphor-icons/react/CaretDown";
 import "@phosphor-icons/react/CaretUp";
 import { CheckIcon } from "@phosphor-icons/react/Check";
@@ -26,13 +29,13 @@ import { SquareSplitVerticalIcon } from "@phosphor-icons/react/SquareSplitVertic
 import { CodeView, WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { PersistentMarkdownEditor } from "@nkzw/mdx-editor/persistence";
 import { GitBranchIcon } from "@phosphor-icons/react/GitBranch";
-import { PathIcon } from "@phosphor-icons/react/Path";
 import { ShareNetworkIcon } from "@phosphor-icons/react/ShareNetwork";
 import { BugIcon } from "@phosphor-icons/react/Bug";
 import { FlaskIcon } from "@phosphor-icons/react/Flask";
 import { GearIcon } from "@phosphor-icons/react/Gear";
 import { ReadCvLogoIcon } from "@phosphor-icons/react/ReadCvLogo";
 import { WrenchIcon } from "@phosphor-icons/react/Wrench";
+import { SidebarSimpleIcon } from "@phosphor-icons/react/SidebarSimple";
 import { ArrowLeftIcon } from "@phosphor-icons/react/ArrowLeft";
 import { ArrowRightIcon } from "@phosphor-icons/react/ArrowRight";
 import { CaretLeftIcon } from "@phosphor-icons/react/CaretLeft";
@@ -1067,7 +1070,7 @@ function PlanReviewSurface({ commenting, onDeleteShare, signInLabel = "Sign in t
 		className: "plan-shell shared-plan-shell",
 		"data-theme": snapshot.preferences.theme === "system" ? void 0 : snapshot.preferences.theme,
 		children: [/* @__PURE__ */ jsx("header", {
-			className: "plan-header",
+			className: "plan-header workspace-top-bar",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "plan-title",
 				title: snapshot.document.title,
@@ -6999,6 +7002,69 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 	});
 }
 //#endregion
+//#region app/components/ReviewTopBar.tsx
+function ReviewTopBar({ actions, context, leading, mode, modes, onModeChange, onToggleSidebar, repository, repositoryTooltip, sidebarCollapsed, toggleTitle }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: "review-top-bar workspace-top-bar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "review-top-bar-left",
+				children: [
+					leading,
+					/* @__PURE__ */ jsx("button", {
+						"aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+						className: "sidebar-toggle-button",
+						onClick: onToggleSidebar,
+						title: toggleTitle,
+						type: "button",
+						children: /* @__PURE__ */ jsx(SidebarSimpleIcon, {
+							"aria-hidden": true,
+							size: 18,
+							weight: "bold"
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "review-top-bar-repository-slot",
+						title: repositoryTooltip,
+						children: repository
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-label": "Review mode",
+				className: "review-mode-control",
+				role: "tablist",
+				children: modes.map((item) => /* @__PURE__ */ jsxs("button", {
+					"aria-label": item.ariaLabel,
+					"aria-selected": mode === item.value,
+					onClick: () => onModeChange(item.value),
+					role: "tab",
+					title: item.title,
+					type: "button",
+					children: [
+						item.icon,
+						/* @__PURE__ */ jsx("span", {
+							className: "review-mode-label",
+							children: item.label
+						}),
+						item.indicator
+					]
+				}, item.value))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "review-top-bar-right",
+				children: [context ? /* @__PURE__ */ jsx("div", {
+					className: "review-top-bar-context",
+					children: context
+				}) : null, actions ? /* @__PURE__ */ jsx("div", {
+					className: "review-top-bar-actions",
+					children: actions
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
 //#region app/components/walkthrough/CommitView.tsx
 const TERMINAL_COLS = 80;
 const TERMINAL_ROWS = 12;
@@ -8686,7 +8752,7 @@ const disabledCommitMessage = async () => ({
 	reason: "Shared walkthroughs are read-only.",
 	status: "unavailable"
 });
-function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMode, interactive, onDeleteShare, onModeChange, providerLabel = "provider", settingsBar, signInLabel = "Sign in to comment", snapshot, sourceDescriptionFooterAside, title }) {
+function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMode, interactive, onDeleteShare, onModeChange, providerLabel = "provider", repositoryUrl, settingsBar, signInLabel = "Sign in to comment", snapshot, sourceDescriptionFooterAside, title }) {
 	const canComment = commenting?.canComment ?? Boolean(interactive);
 	const deleteShare = useCallback(async () => {
 		if (!onDeleteShare || !window.confirm("Delete this shared walkthrough? This cannot be undone.")) return;
@@ -8709,10 +8775,22 @@ function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMod
 	const keymap = useMemo(() => createDefaultConfig().keymap, []);
 	const [fileSearchQuery, setFileSearchQuery] = useState("");
 	const [uncontrolledSidebarMode, setUncontrolledSidebarMode] = useState(() => initialMode ?? (interactive ? "tree" : "walkthrough"));
-	const sidebarMode = Boolean(initialMode && onModeChange) ? initialMode : uncontrolledSidebarMode;
+	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.repeat || !matchesShortcut(event, keymap, "toggleSidebar")) return;
+			event.preventDefault();
+			setSidebarCollapsed((current) => !current);
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [keymap]);
+	const sidebarMode = Boolean(initialMode && onModeChange) && initialMode ? initialMode : uncontrolledSidebarMode;
 	const [treeScrollTarget, setTreeScrollTarget] = useState(null);
 	const { bumpItemVersion, collapsed, expandedGenerated, itemVersionByKey, selectedPath, setSelectedPath, toggleCollapsed, toggleViewed, viewed } = useReviewFileState({ initialSelectedPath: snapshot.files[0]?.path ?? null });
 	const { resizeSidebar, sidebarWidth } = useResizableSidebar({
+		collapseThreshold: 80,
+		onCollapse: () => setSidebarCollapsed(true),
 		onWidthCommit: writeSharedSidebarWidth,
 		readWidth: readSharedSidebarWidth
 	});
@@ -9102,8 +9180,10 @@ function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMod
 			sourceDescriptionFooter
 		});
 	};
-	const sourceLabel = snapshot.repository.source.type === "working-tree" ? "" : ` · ${getSourceLabel(snapshot.repository.source)}`;
-	const rootLabel = `${compactPath(snapshot.repository.root)}${snapshot.branch ? ` (${snapshot.branch})` : ""}`;
+	const sourceLabel = snapshot.repository.source.type === "working-tree" ? null : getSourceLabel(snapshot.repository.source);
+	const rootLabel = repositoryUrl ? snapshot.repository.root : compactPath(snapshot.repository.root);
+	const sourceExternalUrl = snapshot.repository.source.type === "pull-request" ? externalUrl ?? snapshot.repository.source.url : null;
+	const repositoryLinkUrl = repositoryUrl ?? sourceExternalUrl;
 	const walkthroughStatus = walkthroughRequestPending && interactive?.walkthroughStatus !== "ready" ? "generating" : interactive?.walkthroughStatus;
 	const [walkthroughProgressRevision, setWalkthroughProgressRevision] = useState(0);
 	const previousWalkthroughStatusRef = useRef(walkthroughStatus);
@@ -9119,57 +9199,120 @@ function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMod
 	const requestWalkthrough = () => {
 		startWalkthroughGeneration();
 	};
+	const reviewModes = [
+		{
+			icon: /* @__PURE__ */ jsx(PathIcon, {
+				"aria-hidden": true,
+				size: 14,
+				weight: "bold"
+			}),
+			label: "Walkthrough",
+			value: "walkthrough"
+		},
+		{
+			icon: /* @__PURE__ */ jsx(TreeStructureIcon, {
+				"aria-hidden": true,
+				size: 14,
+				weight: "bold"
+			}),
+			label: "Tree",
+			value: "tree"
+		},
+		...showCommentsTab ? [{
+			ariaLabel: generalCommentCount > 0 ? `Comments (${generalCommentCount})` : "Comments",
+			icon: /* @__PURE__ */ jsx(ChatCircleIcon, {
+				"aria-hidden": true,
+				size: 14,
+				weight: "bold"
+			}),
+			indicator: generalCommentCount > 0 ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "review-mode-count",
+				children: generalCommentCount
+			}) : void 0,
+			label: "Comments",
+			title: generalCommentCount > 0 ? `${generalCommentCount} ${generalCommentCount === 1 ? "comment" : "comments"}` : "Comments",
+			value: "comments"
+		}] : []
+	];
+	const topBarActions = onDeleteShare || settingsBar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [onDeleteShare ? /* @__PURE__ */ jsx(Button, {
+		action: deleteShare,
+		"aria-label": "Delete shared walkthrough",
+		pendingPlaceholder: "…",
+		size: "icon",
+		title: "Delete shared walkthrough",
+		type: "button",
+		variant: "destructive",
+		children: /* @__PURE__ */ jsx(Trash2, {
+			"aria-hidden": true,
+			size: 16
+		})
+	}) : null, settingsBar ? /* @__PURE__ */ jsx("div", {
+		className: "review-top-bar-settings",
+		children: settingsBar
+	}) : null] }) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: `app-shell share-shell${interactive ? " merge-request-shell" : ""}`,
+		className: `app-shell share-shell${interactive ? " merge-request-shell" : ""}${sidebarCollapsed ? " sidebar-collapsed" : ""}`,
 		"data-theme": shellTheme,
-		style: { gridTemplateColumns: `${sidebarWidth}px 0 minmax(0, 1fr)` },
+		style: sidebarCollapsed ? void 0 : { gridTemplateColumns: `${sidebarWidth}px 0 minmax(0, 1fr)` },
 		children: [
+			/* @__PURE__ */ jsx(ReviewTopBar, {
+				actions: topBarActions,
+				context: /* @__PURE__ */ jsxs(Fragment$1, { children: [snapshot.branch ? /* @__PURE__ */ jsx("span", {
+					className: "review-top-bar-branch",
+					title: snapshot.branch,
+					children: snapshot.branch
+				}) : null, sourceLabel ? sourceExternalUrl ? /* @__PURE__ */ jsxs("a", {
+					"aria-label": `Open ${sourceLabel} in ${providerLabel}`,
+					className: "review-top-bar-source",
+					href: sourceExternalUrl,
+					rel: "noreferrer",
+					target: "_blank",
+					title: `Open ${sourceLabel} in ${providerLabel}`,
+					children: [/* @__PURE__ */ jsx("span", { children: sourceLabel }), /* @__PURE__ */ jsx(ArrowSquareOutIcon, {
+						"aria-hidden": true,
+						size: 14,
+						weight: "bold"
+					})]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "review-top-bar-source",
+					children: sourceLabel
+				}) : null] }),
+				leading: interactive ? /* @__PURE__ */ jsx("button", {
+					"aria-label": "Back to Codiff",
+					className: "merge-request-nav-button merge-request-home-button",
+					onClick: interactive.onHome,
+					title: "Back to Codiff",
+					type: "button",
+					children: /* @__PURE__ */ jsx("img", {
+						alt: "",
+						"aria-hidden": true,
+						className: "merge-request-nav-icon",
+						draggable: false,
+						src: "/icon.png"
+					})
+				}) : void 0,
+				mode: sidebarMode,
+				modes: reviewModes,
+				onModeChange: changeSidebarMode,
+				onToggleSidebar: () => setSidebarCollapsed((current) => !current),
+				repository: repositoryLinkUrl ? /* @__PURE__ */ jsx("a", {
+					className: "review-top-bar-repository",
+					href: repositoryLinkUrl,
+					rel: "noreferrer",
+					target: repositoryUrl ? void 0 : "_blank",
+					children: rootLabel
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "review-top-bar-repository",
+					children: rootLabel
+				}),
+				repositoryTooltip: snapshot.repository.root,
+				sidebarCollapsed,
+				toggleTitle: `${sidebarCollapsed ? "Expand" : "Collapse"} sidebar`
+			}),
 			/* @__PURE__ */ jsxs("aside", {
 				className: "squircle sidebar",
 				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "sidebar-header",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "sidebar-path-row",
-							children: [
-								interactive ? /* @__PURE__ */ jsx("button", {
-									"aria-label": "Back to Codiff",
-									className: "merge-request-nav-button merge-request-home-button",
-									onClick: interactive.onHome,
-									title: "Back to Codiff",
-									type: "button",
-									children: /* @__PURE__ */ jsx("img", {
-										alt: "",
-										"aria-hidden": true,
-										className: "merge-request-nav-icon",
-										draggable: false,
-										src: "/icon.png"
-									})
-								}) : null,
-								/* @__PURE__ */ jsxs("div", {
-									className: "sidebar-path",
-									title: title ?? snapshot.repository.root,
-									children: [
-										title ? `${title} · ` : null,
-										rootLabel,
-										sourceLabel
-									]
-								}),
-								externalUrl ? /* @__PURE__ */ jsx("a", {
-									"aria-label": `Open merge request in ${providerLabel}`,
-									className: "merge-request-nav-button",
-									href: externalUrl,
-									rel: "noreferrer",
-									target: "_blank",
-									title: `Open merge request in ${providerLabel}`,
-									children: /* @__PURE__ */ jsx(ExternalLink, {
-										"aria-hidden": true,
-										size: 16
-									})
-								}) : null
-							]
-						})
-					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "sidebar-search-row",
 						children: /* @__PURE__ */ jsx("input", {
@@ -9182,40 +9325,6 @@ function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMod
 							value: fileSearchQuery
 						})
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						"aria-label": "Review order",
-						className: `sidebar-mode-toggle${showCommentsTab ? " sidebar-mode-toggle-with-comments" : ""}`,
-						role: "tablist",
-						children: [
-							/* @__PURE__ */ jsx("button", {
-								"aria-selected": sidebarMode === "tree",
-								onClick: () => changeSidebarMode("tree"),
-								role: "tab",
-								type: "button",
-								children: "Tree"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								"aria-selected": sidebarMode === "walkthrough",
-								onClick: () => changeSidebarMode("walkthrough"),
-								role: "tab",
-								type: "button",
-								children: "Walkthrough"
-							}),
-							showCommentsTab ? /* @__PURE__ */ jsxs("button", {
-								"aria-label": generalCommentCount > 0 ? `Comments (${generalCommentCount})` : "Comments",
-								"aria-selected": sidebarMode === "comments",
-								onClick: () => changeSidebarMode("comments"),
-								role: "tab",
-								title: generalCommentCount > 0 ? `${generalCommentCount} ${generalCommentCount === 1 ? "comment" : "comments"}` : "Comments",
-								type: "button",
-								children: [/* @__PURE__ */ jsx("span", { children: "Comments" }), generalCommentCount > 0 ? /* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									className: "sidebar-tab-count",
-									children: generalCommentCount
-								}) : null]
-							}) : null
-						]
-					}),
 					sidebarMode === "tree" ? /* @__PURE__ */ jsx(ReviewFileTree, {
 						files: visibleFiles,
 						onActivatePath: activateTreePath,
@@ -9243,29 +9352,13 @@ function ReviewSurface({ commenting, externalUrl, gitIdentity = null, initialMod
 							}), walkthroughStatusDescription ? /* @__PURE__ */ jsx("span", { children: walkthroughStatusDescription }) : null]
 						})
 					}),
-					onDeleteShare || settingsBar || showTotalLineCount ? /* @__PURE__ */ jsxs("div", {
+					showTotalLineCount ? /* @__PURE__ */ jsx("div", {
 						className: "sidebar-settings-bar",
-						children: [
-							onDeleteShare ? /* @__PURE__ */ jsx(Button, {
-								action: deleteShare,
-								"aria-label": "Delete shared walkthrough",
-								pendingPlaceholder: "…",
-								size: "icon",
-								title: "Delete shared walkthrough",
-								type: "button",
-								variant: "destructive",
-								children: /* @__PURE__ */ jsx(Trash2, {
-									"aria-hidden": true,
-									size: 16
-								})
-							}) : null,
-							settingsBar,
-							showTotalLineCount ? /* @__PURE__ */ jsx(DiffLineCountBadge, {
-								ariaLabelPrefix: "Total change",
-								className: "sidebar-total-line-count sidebar-settings-line-count",
-								lineCount: totalLineCount
-							}) : null
-						]
+						children: /* @__PURE__ */ jsx(DiffLineCountBadge, {
+							ariaLabelPrefix: "Total change",
+							className: "sidebar-total-line-count sidebar-settings-line-count",
+							lineCount: totalLineCount
+						})
 					}) : null
 				]
 			}),

package/dist/style.css

@@ -4805,6 +4805,7 @@ form._multiFieldForm_sre1d_1628 {
 }
 
 .app-shell {
+  grid-template-rows: 40px minmax(0, 1fr);
   grid-template-columns: 292px 0 minmax(0, 1fr);
   height: 100%;
   display: grid;
@@ -4818,18 +4819,21 @@ form._multiFieldForm_sre1d_1628 {
   overflow: hidden;
 }
 
-.plan-header {
+.workspace-top-bar {
   -webkit-app-region: drag;
   backdrop-filter: blur(28px) saturate(1.3);
   background: var(--sidebar-bg);
   border-bottom: 1px solid var(--sidebar-border);
   align-items: center;
   height: 40px;
-  padding: 0 14px 0 78px;
   display: flex;
 }
 
-html[data-codiff-platform="darwin"] .plan-header {
+.plan-header {
+  padding: 0 14px 0 78px;
+}
+
+html[data-codiff-platform="darwin"] .workspace-top-bar {
   backdrop-filter: none;
   background: var(--sidebar-vibrancy-tint);
 }
@@ -5238,7 +5242,6 @@ html[data-codiff-platform="darwin"] .plan-header {
 }
 
 .app-shell.sidebar-collapsed {
-  grid-template-rows: auto minmax(0, 1fr);
   grid-template-columns: minmax(0, 1fr);
 }
 
@@ -5246,45 +5249,190 @@ html[data-codiff-platform="darwin"] .plan-header {
   display: none;
 }
 
-.collapsed-sidebar-bar {
-  -webkit-app-region: drag;
-  backdrop-filter: blur(28px) saturate(1.3);
-  background: var(--sidebar-bg);
-  border-bottom: 1px solid var(--sidebar-border);
-  box-sizing: border-box;
-  corner-shape: initial;
-  border-radius: 0;
-  grid-column: 1 / -1;
+.review-top-bar {
+  grid-area: 1 / 1 / auto / -1;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 12px;
+  min-width: 0;
+  padding: 0 14px 0 78px;
+  display: grid;
+}
+
+.share-shell .review-top-bar, .app-shell.window-fullscreen .review-top-bar {
+  padding-left: 14px;
+}
+
+.review-top-bar-left, .review-top-bar-right {
   align-items: center;
   gap: 8px;
-  height: 40px;
-  margin: 0;
-  padding: 0 14px 0 78px;
+  min-width: 0;
   display: flex;
 }
 
-html[data-codiff-platform="darwin"] .collapsed-sidebar-bar {
-  backdrop-filter: none;
-  background: var(--sidebar-vibrancy-tint);
+.review-top-bar-left {
+  justify-content: flex-start;
 }
 
-.app-shell.window-fullscreen .collapsed-sidebar-bar {
-  padding-left: 14px;
+.review-top-bar-right {
+  justify-content: flex-end;
 }
 
-.collapsed-sidebar-label {
+.review-top-bar-repository-slot {
   color: var(--sidebar-text);
   font-family: var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
   flex: 1;
+  align-items: center;
   min-width: 0;
   font-size: 12px;
   font-weight: 600;
   line-height: 1.35;
+  display: flex;
+}
+
+.review-top-bar-repository {
+  -webkit-app-region: no-drag;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.review-top-bar-branch {
+  color: var(--muted);
+  corner-shape: squircle;
+  font: 600 12px/1 var(--font-sans);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 14px;
+  flex: none;
+  align-items: center;
+  max-width: min(240px, 24vw);
+  padding: 4px 8px;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+a.review-top-bar-repository, a.review-top-bar-source {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.review-top-bar-repository:hover, a.review-top-bar-source:hover {
+  color: var(--text);
+}
+
+a.review-top-bar-repository:focus-visible, a.review-top-bar-source:focus-visible {
+  outline: 1px solid var(--tree-selection-focus);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+
+.review-top-bar-source {
+  -webkit-app-region: no-drag;
+  color: var(--sidebar-text);
+  font: 600 12px/1.35 var(--font-mono);
+  white-space: nowrap;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
+}
+
+.review-top-bar-context {
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.review-top-bar-actions {
+  -webkit-app-region: no-drag;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.review-top-bar-settings, .review-top-bar-settings > * {
+  flex: none;
+  align-items: center;
+  width: auto;
+  display: flex;
+}
+
+.review-mode-control {
+  -webkit-app-region: no-drag;
+  corner-shape: squircle;
+  border-radius: 16px;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  padding: 2px;
+  display: inline-flex;
+}
+
+.review-top-bar-branch, .review-mode-control {
+  background: #7f7f7f14;
+  border: 1px solid #7f7f7f1f;
+}
+
+.review-mode-control button {
+  color: var(--muted);
+  corner-shape: squircle;
+  cursor: pointer;
+  font: 600 11px/1 var(--font-sans);
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  border-radius: 14px;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: 24px;
+  padding: 0 8px;
+  display: inline-flex;
+}
+
+.review-mode-control button:hover {
+  color: var(--sidebar-text);
+  background: #7f7f7f17;
+}
+
+.review-mode-control button[aria-selected="true"] {
+  background: var(--hover-wash);
+  color: var(--sidebar-text);
+  box-shadow: 0 1px 2px #00000014;
+}
+
+.review-mode-label {
+  text-overflow: ellipsis;
+  min-width: 0;
   overflow: hidden;
 }
 
+.review-mode-count {
+  color: inherit;
+  font: 700 10px/1 var(--font-mono);
+  text-align: center;
+  background: #7f7f7f29;
+  border-radius: 999px;
+  flex: none;
+  min-width: 16px;
+  padding: 3px 5px;
+}
+
+.review-mode-dot {
+  background: var(--sidebar-ref);
+  border-radius: 50%;
+  flex: none;
+  width: 6px;
+  height: 6px;
+}
+
 .sidebar-toggle-button {
   -webkit-app-region: no-drag;
   color: var(--muted);
@@ -5321,6 +5469,10 @@ html[data-codiff-platform="darwin"] .collapsed-sidebar-bar {
   position: relative;
 }
 
+.app-shell > .sidebar, .app-shell > .sidebar-resizer, .app-shell > .review {
+  grid-row: 2;
+}
+
 .sidebar-resizer:before {
   content: "";
   background: none;
@@ -5581,31 +5733,6 @@ html[data-codiff-platform="darwin"] .sidebar {
   background: var(--sidebar-vibrancy-tint);
 }
 
-.sidebar-header {
-  -webkit-app-region: drag;
-  border-bottom: 1px solid var(--sidebar-border);
-  flex: none;
-  min-width: 0;
-  padding: 0 14px;
-}
-
-.sidebar-path-row {
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  min-height: 38px;
-  padding-left: 64px;
-  display: flex;
-}
-
-.app-shell.window-fullscreen .sidebar-path-row, .share-shell .sidebar-path-row {
-  padding-left: 0;
-}
-
-.merge-request-shell .sidebar-path-row {
-  gap: 6px;
-}
-
 .merge-request-nav-button {
   color: var(--muted);
   cursor: pointer;
@@ -5640,19 +5767,6 @@ html[data-codiff-platform="darwin"] .sidebar {
   padding: 18px 14px;
 }
 
-.sidebar-path {
-  color: var(--sidebar-text);
-  font-family: var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.35;
-  overflow: hidden;
-}
-
 .sidebar-search-row {
   flex: none;
   gap: 8px;
@@ -5660,78 +5774,6 @@ html[data-codiff-platform="darwin"] .sidebar {
   display: grid;
 }
 
-.sidebar-mode-toggle {
-  border-bottom: 1px solid var(--sidebar-border);
-  flex: none;
-  grid-template-columns: minmax(48px, .75fr) minmax(96px, 1.35fr) minmax(68px, .9fr);
-  gap: 6px;
-  padding: 0 8px;
-  display: grid;
-}
-
-.share-shell .sidebar-mode-toggle {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.share-shell .sidebar-mode-toggle-with-comments, .merge-request-shell .sidebar-mode-toggle {
-  grid-template-columns: minmax(42px, .65fr) minmax(88px, 1.05fr) minmax(102px, 1.3fr);
-}
-
-.sidebar-mode-toggle button {
-  -webkit-app-region: no-drag;
-  color: var(--muted);
-  corner-shape: squircle;
-  cursor: pointer;
-  font: 600 12px/1.35 var(--font-sans);
-  background: none;
-  border: 0;
-  border-radius: 24px 24px 0 0;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  height: 30px;
-  padding: 0 8px;
-  display: inline-flex;
-}
-
-.sidebar-mode-toggle button span:first-child {
-  text-overflow: ellipsis;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.sidebar-tab-count {
-  color: var(--muted);
-  font: 700 10px/1 var(--font-mono);
-  text-align: center;
-  background: #7f7f7f29;
-  border-radius: 999px;
-  flex: none;
-  min-width: 16px;
-  padding: 3px 5px;
-}
-
-.sidebar-mode-toggle button[aria-selected="true"] .sidebar-tab-count {
-  color: var(--sidebar-text);
-  background: #7f7f7f38;
-}
-
-.sidebar-mode-toggle button:hover:not(:disabled) {
-  color: var(--sidebar-text);
-  background: #7f7f7f1a;
-}
-
-.sidebar-mode-toggle button[aria-selected="true"] {
-  color: var(--sidebar-text);
-  background: #7f7f7f24;
-}
-
-.sidebar-mode-toggle button:disabled {
-  cursor: default;
-  opacity: .45;
-}
-
 .sidebar-settings-bar {
   border-top: 1px solid var(--sidebar-border);
   flex: none;
@@ -8425,25 +8467,18 @@ diffs-container .review-comment-thread {
   padding: 3px 6px;
 }
 
-@container sidebar (width <= 260px) {
-  .sidebar-mode-toggle {
-    grid-template-columns: minmax(42px, .75fr) minmax(82px, 1.35fr) minmax(58px, .9fr);
-    gap: 4px;
-    padding-inline: 8px;
+@media (width <= 720px) {
+  .review-top-bar-repository-slot, .review-top-bar-context {
+    display: none;
   }
+}
 
-  .share-shell .sidebar-mode-toggle-with-comments, .merge-request-shell .sidebar-mode-toggle {
-    grid-template-columns: minmax(40px, .65fr) minmax(78px, 1.05fr) minmax(88px, 1.3fr);
+@media (width <= 480px) {
+  .review-mode-control button {
+    padding-inline: 7px;
   }
 
-  .sidebar-mode-toggle button {
-    gap: 4px;
-    padding-inline: 4px;
-    font-size: 11px;
-  }
-
-  .sidebar-tab-count {
-    min-width: 14px;
-    padding-inline: 4px;
+  .review-mode-label {
+    display: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkzw/codiff-core",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "A fast diff viewer.",
   "license": "MIT",
   "author": {