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>
 	);