Improve repository experience by adding a commits browser

apps/dashboard/package.json

@@ -7,8 +7,8 @@
 	},
 	"scripts": {
 		"predev": "node ../../scripts/link-worktree-dev-vars.mjs",
-		"dev": "vite dev --port 3000",
-		"build": "NODE_OPTIONS='--max-old-space-size=4096' vite build",
+		"dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite dev --port 3000",
+		"build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
 		"preview": "vite preview",
 		"test": "vitest run",
 		"format": "biome format",
@@ -63,6 +63,7 @@
 		"@types/react": "^19.2.0",
 		"@types/react-dom": "^19.2.0",
 		"@vitejs/plugin-react": "^5.1.4",
+		"cross-env": "^10.1.0",
 		"drizzle-kit": "^0.31.10",
 		"jsdom": "^28.1.0",
 		"react-scan": "^0.5.3",

apps/dashboard/src/components/layouts/dashboard-tabs.tsx

@@ -36,6 +36,7 @@ const tabIconMap = {
 	review: ReviewsIcon,
 	repo: ArchiveIcon,
 	commit: GitCommitIcon,
+	commits: GitCommitIcon,
 	actions: ActionsIcon,
 } as const;
 
@@ -300,7 +301,9 @@ function ScrollActiveTabIntoView({
 	useEffect(() => {
 		const container = scrollRef.current;
 		if (!container) return;
-		const activeTab = container.querySelector<HTMLElement>(".active");
+		const activeTab = container.querySelector<HTMLElement>(
+			"[data-active='true']",
+		);
 		if (!activeTab) return;
 
 		const { left: cLeft, right: cRight } = container.getBoundingClientRect();
@@ -334,9 +337,11 @@ const DetailTab = memo(function DetailTab({
 	onContextMenu: () => void;
 	routerRef: React.RefObject<ReturnType<typeof useRouter>>;
 }) {
+	const pathname = useRouterState({ select: (s) => s.location.pathname });
 	const preloadTab = () => {
 		void preloadRouteOnce(routerRef.current, tab.url);
 	};
+	const isActive = isTabActive(tab, pathname);
 
 	return (
 		<Link
@@ -357,9 +362,10 @@ const DetailTab = memo(function DetailTab({
 			onFocus={preloadTab}
 			onTouchStart={preloadTab}
 			onContextMenu={onContextMenu}
-			activeOptions={{ exact: true }}
-			activeProps={{ className: "active" }}
-			className="group relative flex h-8 shrink-0 items-center gap-1.5 rounded-md px-3 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground [&.active]:bg-surface-1 [&.active]:text-foreground"
+			data-active={isActive}
+			className={cn(
+				"group relative flex h-8 shrink-0 items-center gap-1.5 rounded-md px-3 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground data-[active=true]:bg-surface-1 data-[active=true]:text-foreground",
+			)}
 		>
 			{tab.avatarUrl ? (
 				<img
@@ -425,3 +431,22 @@ const DetailTab = memo(function DetailTab({
 		</Link>
 	);
 });
+
+function isTabActive(tab: Tab, pathname: string) {
+	if (tab.type === "repo") {
+		const repoPath = `/${tab.repo}`;
+		return (
+			pathname === repoPath ||
+			pathname === `${repoPath}/` ||
+			pathname.startsWith(`${repoPath}/tree/`) ||
+			pathname.startsWith(`${repoPath}/blob/`)
+		);
+	}
+
+	return normalizePath(pathname) === normalizePath(tab.url);
+}
+
+function normalizePath(path: string) {
+	if (path.length > 1 && path.endsWith("/")) return path.slice(0, -1);
+	return path;
+}

apps/dashboard/src/components/navigation/command-palette.tsx

@@ -90,20 +90,25 @@ export function CommandPalette() {
 				value={search}
 				onValueChange={setSearch}
 			/>
-			<CommandList>
+			<CommandList className="px-0">
 				<CommandEmpty>
 					{getEmptyMessage(
 						search,
 						shouldSearchGitHub && githubSearchQuery.isFetching,
 					)}
 				</CommandEmpty>
 				{Array.from(groups.entries()).map(([groupName, groupItems]) => (
-					<CommandGroup key={groupName} heading={groupName}>
+					<CommandGroup
+						key={groupName}
+						heading={groupName}
+						className="!p-0 [&_[cmdk-group-heading]]:px-4"
+					>
 						{groupItems.map((item) => (
 							<CommandItemUI
 								key={item.id}
 								value={`${item.label} ${(item.keywords ?? []).join(" ")}`}
 								onSelect={() => handleSelect(item)}
+								className="rounded-none !px-4"
 							>
 								{item.icon && (
 									<item.icon

apps/dashboard/src/components/repo/code-explorer-toolbar.tsx

@@ -59,7 +59,7 @@ export function CodeExplorerToolbar({
 	);
 }
 
-function BranchSelector({
+export function BranchSelector({
 	repo,
 	currentRef,
 	scope,

apps/dashboard/src/components/repo/code-file-view.tsx

@@ -25,6 +25,7 @@ import {
 	githubRepoTreeQueryOptions,
 } from "#/lib/github.query";
 import type { FileLastCommit } from "#/lib/github.types";
+import { CommitsLink } from "./commits-link";
 
 const IMAGE_EXTENSIONS = new Set([
 	"png",
@@ -217,7 +218,13 @@ export function CodeFileView({
 		const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${currentRef}/${path}`;
 		return (
 			<div className="flex flex-col gap-4">
-				<FileCommitBar owner={owner} repo={repo} commit={commit} />
+				<FileCommitBar
+					owner={owner}
+					repo={repo}
+					currentRef={currentRef}
+					path={path}
+					commit={commit}
+				/>
 				<div className="overflow-hidden rounded-lg border">
 					<FileViewHeader
 						fileName={fileName}
@@ -278,7 +285,13 @@ export function CodeFileView({
 
 	return (
 		<div className="flex flex-col gap-4">
-			<FileCommitBar owner={owner} repo={repo} commit={commit} />
+			<FileCommitBar
+				owner={owner}
+				repo={repo}
+				currentRef={currentRef}
+				path={path}
+				commit={commit}
+			/>
 			<div className="overflow-hidden rounded-lg border">
 				<FileViewHeader
 					fileName={fileName}
@@ -328,7 +341,13 @@ function SvgFileView({
 
 	return (
 		<div className="flex flex-col gap-4">
-			<FileCommitBar owner={owner} repo={repo} commit={commit} />
+			<FileCommitBar
+				owner={owner}
+				repo={repo}
+				currentRef={currentRef}
+				path={path}
+				commit={commit}
+			/>
 			<div className="overflow-hidden rounded-lg border">
 				<FileViewHeader
 					fileName={fileName}
@@ -467,10 +486,14 @@ function FileViewHeader({
 function FileCommitBar({
 	owner,
 	repo,
+	currentRef,
+	path,
 	commit,
 }: {
 	owner: string;
 	repo: string;
+	currentRef: string;
+	path: string;
 	commit: FileLastCommit | null | undefined;
 }) {
 	if (!commit) {
@@ -515,6 +538,12 @@ function FileCommitBar({
 					</TooltipContent>
 				</Tooltip>
 				<span>{formatRelativeTime(commit.date)}</span>
+				<CommitsLink
+					owner={owner}
+					repo={repo}
+					currentRef={currentRef}
+					path={path}
+				/>
 			</div>
 		</div>
 	);

apps/dashboard/src/components/repo/commits-link.tsx

@@ -0,0 +1,45 @@
+import { GitCommitIcon } from "@diffkit/icons";
+import { cn } from "@diffkit/ui/lib/utils";
+import { Link } from "@tanstack/react-router";
+import type { ReactNode } from "react";
+
+const commitsLinkClassName =
+	"-my-1 -mr-1 flex items-center gap-1 rounded-md px-2 py-1.5 font-medium text-foreground transition-colors hover:bg-surface-2";
+
+export function buildCommitsLinkSplat(currentRef: string, path?: string) {
+	return path ? `${currentRef}/${path}` : currentRef;
+}
+
+export function CommitsLink({
+	owner,
+	repo,
+	currentRef,
+	path,
+	children = "History",
+	"aria-label": ariaLabel = "View commits",
+	className,
+}: {
+	owner: string;
+	repo: string;
+	currentRef: string;
+	path?: string;
+	children?: ReactNode;
+	"aria-label"?: string;
+	className?: string;
+}) {
+	return (
+		<Link
+			to="/$owner/$repo/commits/$"
+			params={{
+				owner,
+				repo,
+				_splat: buildCommitsLinkSplat(currentRef, path),
+			}}
+			aria-label={ariaLabel}
+			className={cn(commitsLinkClassName, className)}
+		>
+			<GitCommitIcon size={14} />
+			<span className="hidden sm:inline">{children}</span>
+		</Link>
+	);
+}

apps/dashboard/src/components/repo/folder-view.tsx

@@ -56,6 +56,8 @@ export function FolderView({
 					scope={scope}
 					defaultBranch={repo.defaultBranch}
 					defaultBranchTip={repo.latestCommit}
+					path={currentPath}
+					historyLabel="History"
 				/>
 				<div className="overflow-hidden rounded-b-lg border">
 					{entries.map((entry, index) => (

apps/dashboard/src/components/repo/latest-commit-bar.tsx

@@ -10,9 +10,11 @@ import { Link } from "@tanstack/react-router";
 import { formatRelativeTime } from "#/lib/format-relative-time";
 import {
 	type GitHubQueryScope,
+	githubFileLastCommitQueryOptions,
 	githubRefHeadCommitQueryOptions,
 } from "#/lib/github.query";
 import type { RepoOverview } from "#/lib/github.types";
+import { CommitsLink } from "./commits-link";
 
 export function LatestCommitBar({
 	owner,
@@ -21,27 +23,44 @@ export function LatestCommitBar({
 	scope,
 	defaultBranch,
 	defaultBranchTip,
+	path,
+	historyLabel = "Commits",
 }: {
 	owner: string;
 	repoName: string;
 	ref: string;
 	scope: GitHubQueryScope;
 	defaultBranch: string;
 	defaultBranchTip: RepoOverview["latestCommit"];
+	path?: string;
+	historyLabel?: string;
 }) {
-	const tipQuery = useQuery({
+	const pathCommitQuery = useQuery({
+		...githubFileLastCommitQueryOptions(scope, {
+			owner,
+			repo: repoName,
+			ref,
+			path: path ?? "",
+		}),
+		enabled: !!path,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+	});
+	const refCommitQuery = useQuery({
 		...githubRefHeadCommitQueryOptions(scope, {
 			owner,
 			repo: repoName,
 			ref,
 		}),
+		enabled: !path,
 		placeholderData:
-			ref === defaultBranch && defaultBranchTip != null
+			!path && ref === defaultBranch && defaultBranchTip != null
 				? defaultBranchTip
 				: undefined,
 		refetchOnMount: false,
 		refetchOnWindowFocus: false,
 	});
+	const tipQuery = path ? pathCommitQuery : refCommitQuery;
 
 	const commit = tipQuery.data;
 
@@ -95,6 +114,9 @@ export function LatestCommitBar({
 					</TooltipContent>
 				</Tooltip>
 				<span>{formatRelativeTime(commit.date)}</span>
+				<CommitsLink owner={owner} repo={repoName} currentRef={ref} path={path}>
+					{historyLabel}
+				</CommitsLink>
 			</div>
 		</div>
 	);