git-truck 0.8.2 → 0.8.6-experimental

package/src/analyzer/git-caller.server.ts

@@ -0,0 +1,290 @@
+import { log } from "./log.server"
+import { getBaseDirFromPath, getDirName, promiseHelper, runProcess } from "./util.server"
+import { resolve, join } from "path"
+import { promises as fs, existsSync } from "fs"
+import { AnalyzerData, AnalyzerDataInterfaceVersion, Repository } from "./model"
+
+export enum ANALYZER_CACHE_MISS_REASONS {
+  OTHER_REPO = "The cache was not created for this repo",
+  NOT_CACHED = "No cache was found",
+  BRANCH_HEAD_CHANGED = "Branch head changed",
+  DATA_VERSION_MISMATCH = "Outdated cache",
+}
+
+export type RawGitObjectType = "blob" | "tree" | "commit" | "tag"
+export type RawGitObject = {
+  hash: string
+  type: RawGitObjectType
+  idk: string
+  value: string
+}
+
+export class GitCaller {
+  private useCache = true
+  private repo: string
+  private catFileCache: Map<string, string> = new Map()
+  private diffNumStatCache: Map<string, string> = new Map()
+  private blameCache: Map<string, string> = new Map()
+
+  private static instance: GitCaller | null = null
+
+  static initInstance(repo: string) {
+    if (!GitCaller.instance || GitCaller.instance.repo !== repo) {
+      GitCaller.instance = new GitCaller(repo)
+    }
+  }
+
+  static destroyInstance() {
+    GitCaller.instance = null
+  }
+
+  static getInstance(): GitCaller {
+    if (!GitCaller.instance) {
+      throw Error("ObjectDeflator not initialized")
+    }
+    return GitCaller.instance
+  }
+
+  static async isGitRepo(path: string): Promise<boolean> {
+    const gitFolderPath = resolve(path, ".git")
+    const hasGitFolder = existsSync(gitFolderPath)
+    if (!hasGitFolder) return false
+    const [, findBranchHeadError] = await promiseHelper(GitCaller.findBranchHead(path))
+    return Boolean(hasGitFolder && !findBranchHeadError)
+  }
+
+  /**
+   *
+   * @param repo The repo to find the branch head for
+   * @param branch The branch to find the head for (default: checkout branch)
+   * @returns Promise<[branchHead: string, branchName: string]>
+   */
+  static async findBranchHead(repo: string, branch?: string): Promise<[string, string]> {
+    if (!branch) {
+      const [foundBranch, getBranchError] = await promiseHelper(GitCaller.getCurrentBranch(repo))
+      if (getBranchError) {
+        throw getBranchError
+      }
+      branch = foundBranch
+    }
+
+    const gitFolder = join(repo, ".git")
+    if (!existsSync(gitFolder)) {
+      throw Error("No git folder exists at " + gitFolder)
+    }
+    // Find file containing the branch head
+    const branchPath = join(gitFolder, "refs/heads/" + branch)
+    const absolutePath = join(process.cwd(), branchPath)
+    log.debug("Looking for branch head at " + absolutePath)
+
+    const branchHead = (await fs.readFile(branchPath, "utf-8")).trim()
+    log.debug(`${branch} -> [commit]${branchHead}`)
+    if (!branchHead) throw Error("Branch head not found")
+
+    return [branchHead, branch]
+  }
+
+  static getCachePath(repo: string, branch: string) {
+    return resolve(__dirname, "..", ".temp", repo, `${branch}.json`)
+  }
+
+  static async getCurrentBranch(dir: string) {
+    const result = (await runProcess(dir, "git", ["rev-parse", "--abbrev-ref", "HEAD"])) as string
+    return result.trim()
+  }
+
+  static async scanDirectoryForRepositories(argPath: string): Promise<[Repository | null, Repository[]]> {
+    let userRepo: Repository | null = null
+    const pathIsRepo = await GitCaller.isGitRepo(argPath)
+    const baseDir = resolve(pathIsRepo ? getBaseDirFromPath(argPath) : argPath)
+
+    const entries = await fs.readdir(baseDir, { withFileTypes: true })
+    const dirs = entries.filter((entry) => entry.isDirectory()).map(({ name }) => name)
+    const repoOrNull = await Promise.all(
+      dirs.map(async (repoDir) => {
+        const repoPath = join(baseDir, repoDir)
+        const [isRepo] = await promiseHelper(GitCaller.isGitRepo(repoPath))
+        if (!isRepo) return null
+        const repo: Repository = { name: repoDir, path: repoPath, data: null, reasons: [] }
+        try {
+          const [findBranchHeadResult, error] = await promiseHelper(GitCaller.findBranchHead(repoPath))
+          if (!error) {
+            const [branchHead, branch] = findBranchHeadResult
+            const [data, reasons] = await GitCaller.retrieveCachedResult({
+              repo: repoDir,
+              branch,
+              branchHead,
+            })
+            repo.data = data
+            repo.reasons = reasons
+          }
+        } catch (e) {
+          return null
+        }
+        return repo
+      })
+    )
+    const onlyRepos: Repository[] = repoOrNull.filter((currentRepo) => {
+      if (currentRepo === null) return false
+      if (pathIsRepo && currentRepo.name === getDirName(argPath)) {
+        userRepo = currentRepo
+      }
+      return true
+    }) as Repository[]
+
+    return [userRepo, onlyRepos]
+  }
+
+  static async retrieveCachedResult({
+    repo,
+    branch,
+    branchHead,
+  }: {
+    repo: string
+    branch: string
+    branchHead: string
+  }): Promise<[AnalyzerData | null, ANALYZER_CACHE_MISS_REASONS[]]> {
+    const reasons = []
+    const cachedDataPath = GitCaller.getCachePath(repo, branch)
+    if (!existsSync(cachedDataPath)) return [null, [ANALYZER_CACHE_MISS_REASONS.NOT_CACHED]]
+
+    const cachedData = JSON.parse(await fs.readFile(cachedDataPath, "utf8")) as AnalyzerData
+
+    // Check if the current branchHead matches the hash of the analyzed commit from the cache
+    const branchHeadMatches = branchHead === cachedData.commit.hash
+    if (!branchHeadMatches) reasons.push(ANALYZER_CACHE_MISS_REASONS.BRANCH_HEAD_CHANGED)
+
+    // Check if the data uses the most recent analyzer data interface
+    const dataVersionMatches = cachedData.interfaceVersion === AnalyzerDataInterfaceVersion
+    if (!branchHeadMatches) reasons.push(ANALYZER_CACHE_MISS_REASONS.DATA_VERSION_MISMATCH)
+
+    // Check if the selected repository has changed
+    const repoMatches = repo === cachedData.repo
+
+    const cacheConditions = {
+      branchHeadMatches,
+      dataVersionMatches,
+      repoMatches,
+    }
+
+    // Only return cached data if every criteria is met
+    if (!Object.values(cacheConditions).every(Boolean)) return [null, reasons]
+
+    return [cachedData, reasons]
+  }
+
+  private constructor(repo: string) {
+    this.repo = repo
+  }
+
+  setUseCache(useCache: boolean) {
+    this.useCache = useCache
+  }
+
+  private async catFile(hash: string) {
+    const result = await runProcess(this.repo, "git", ["cat-file", "-p", hash])
+    return result as string
+  }
+
+  async findBranchHead(branch?: string) {
+    return await GitCaller.findBranchHead(this.repo, branch)
+  }
+
+  async catFileCached(hash: string): Promise<string> {
+    if (!this.useCache) {
+      const cachedValue = this.catFileCache.get(hash)
+      if (cachedValue) {
+        return cachedValue
+      }
+    }
+    const result = await this.catFile(hash)
+    this.catFileCache.set(hash, result)
+
+    return result
+  }
+
+  private async blame(path: string) {
+    try {
+      const result = await runProcess(this.repo, "git", ["blame", path])
+      return result as string
+    } catch (e) {
+      log.warn(`Could not blame on ${path}. It might have been deleted since last commit.`)
+      return ""
+    }
+  }
+
+  async blameCached(path: string): Promise<string> {
+    if (!this.useCache) {
+      const cachedValue = this.blameCache.get(path)
+      if (cachedValue) {
+        return cachedValue
+      }
+    }
+    const result = await this.blame(path)
+    this.blameCache.set(path, result)
+
+    return result
+  }
+
+  async hasUnstagedChanges() {
+    const result = await runProcess(this.repo, "git", ["update-index", "--refresh"])
+    return !!result
+  }
+
+  async parseBlame(path: string) {
+    const cutString = path.slice(path.indexOf("/") + 1)
+    const blame = await this.blameCached(cutString)
+    const blameRegex = /\((?<author>.*?)\s+\d{4}-\d{2}-\d{2}/gm
+    const matches = blame.match(blameRegex)
+    const blameAuthors: Record<string, number> = {}
+    matches?.forEach((match) => {
+      const author = match
+        .slice(1)
+        .slice(0, match.length - 11)
+        .trim()
+      if (author !== "Not Committed Yet") {
+        const currentValue = blameAuthors[author] ?? 0
+        blameAuthors[author] = currentValue + 1
+      }
+    })
+    return blameAuthors
+  }
+
+  async gitDiffNumStatCached(a: string, b: string) {
+    const key = a + b
+    if (this.useCache) {
+      const cachedValue = this.diffNumStatCache.get(key)
+      if (cachedValue) {
+        return cachedValue
+      }
+    }
+    const result = await this.gitDiffNumStat(a, b)
+    this.diffNumStatCache.set(key, result)
+    return result
+  }
+
+  private async gitDiffNumStat(a: string, b: string) {
+    const result = await runProcess(this.repo, "git", ["diff", "--numstat", a, b])
+    return result as string
+  }
+
+  async getDefaultGitSettingValue(setting: string) {
+    const result = await runProcess(this.repo, "git", ["config", setting])
+    return result as string
+  }
+
+  async resetGitSetting(settingToReset: string, value: string) {
+    if (!value) {
+      await runProcess(this.repo, "git", ["config", "--unset", settingToReset])
+      log.debug(`Unset ${settingToReset}`)
+    } else {
+      await runProcess(this.repo, "git", ["config", settingToReset, value])
+      log.debug(`Reset ${settingToReset} to ${value}`)
+    }
+  }
+
+  async setGitSetting(setting: string, value: string) {
+    await runProcess(this.repo, "git", ["config", setting, value])
+    log.debug(`Set ${setting} to ${value}`)
+  }
+}

package/src/analyzer/hydrate.server.ts

@@ -13,7 +13,7 @@ import {
   PersonWithTime,
 } from "./model"
 import { analyzeCommitLight } from "./analyze.server"
-import { gitDiffNumStatAnalyzed, lookupFileInTree } from "./util"
+import { gitDiffNumStatAnalyzed, lookupFileInTree } from "./util.server"
 import { Queue } from "./queue"
 
 const renamedFiles = new Map<string, string>()

package/src/analyzer/model.ts

@@ -1,4 +1,12 @@
 import { AuthorshipType } from "~/metrics"
+import { ANALYZER_CACHE_MISS_REASONS } from "./git-caller.server"
+
+export interface Repository {
+  path: string
+  name: string
+  data: AnalyzerData | null
+  reasons: ANALYZER_CACHE_MISS_REASONS[]
+}
 
 export type GitObject = GitBlobObject | GitTreeObject
 
@@ -14,19 +22,21 @@ export interface TruckUserConfig {
   path?: string
   unionedAuthors?: string[][]
   hiddenFiles?: string[]
+  invalidateCache?: boolean
 }
 
 export interface TruckConfig {
   log?: string
   out?: string
-  branch: string
+  branch?: string
   path: string
   unionedAuthors: string[][]
   hiddenFiles: string[]
+  invalidateCache: boolean
 }
 
 // Bump this if AnalyzerData interface chances
-export const AnalyzerDataInterfaceVersion = 3
+export const AnalyzerDataInterfaceVersion = 4
 
 export interface AnalyzerData {
   cached: boolean
@@ -40,6 +50,7 @@ export interface AnalyzerData {
   currentVersion: string
   latestVersion?: string
   lastRunEpoch: number
+  hasUnstagedChanges: boolean
 }
 
 export interface GitBlobObject extends GitBaseObject {

package/src/analyzer/{util.ts → util.server.ts}

@@ -5,7 +5,8 @@ import { dirname, resolve, sep } from "path"
 import { getLogLevel, log, LOG_LEVEL } from "./log.server"
 import { GitBlobObject, GitTreeObject, AnalyzerData } from "./model"
 import { performance } from "perf_hooks"
-import { GitCaller } from "./git-caller"
+import { GitCaller } from "./git-caller.server"
+import { resolve as resolvePath } from "path"
 
 export function last<T>(array: T[]) {
   return array[array.length - 1]
@@ -15,10 +16,12 @@ export function runProcess(dir: string, command: string, args: string[]) {
   return new Promise((resolve, reject) => {
     try {
       const prcs = spawn(command, args, {
-        cwd: dir,
+        cwd: resolvePath(dir),
       })
       const chunks: Uint8Array[] = []
-      prcs.stderr.once("data", (buf) => reject(buf.toString().trim()))
+      const errorHandler = (buf: Error): void => reject(buf.toString().trim())
+      prcs.once("error", errorHandler)
+      prcs.stderr.once("data", errorHandler)
       prcs.stdout.on("data", (buf) => chunks.push(buf))
       prcs.stdout.on("end", () => {
         resolve(Buffer.concat(chunks).toString().trim())
@@ -94,26 +97,6 @@ export async function lookupFileInTree(tree: GitTreeObject, path: string): Promi
   return await lookupFileInTree(subtree, dirs.slice(1).join("/"))
 }
 
-export async function getDefaultGitSettingValue(repoDir: string, setting: string) {
-  const result = await runProcess(repoDir, "git", ["config", setting])
-  return result as string
-}
-
-export async function resetGitSetting(repoDir: string, settingToReset: string, value: string) {
-  if (!value) {
-    await runProcess(repoDir, "git", ["config", "--unset", settingToReset])
-    log.debug(`Unset ${settingToReset}`)
-  } else {
-    await runProcess(repoDir, "git", ["config", settingToReset, value])
-    log.debug(`Reset ${settingToReset} to ${value}`)
-  }
-}
-
-export async function setGitSetting(repoDir: string, setting: string, value: string) {
-  await runProcess(repoDir, "git", ["config", setting, value])
-  log.debug(`Set ${setting} to ${value}`)
-}
-
 export async function writeRepoToFile(outPath: string, analyzedData: AnalyzerData) {
   const data = JSON.stringify(analyzedData, null, 2)
   const dir = dirname(outPath)
@@ -124,13 +107,8 @@ export async function writeRepoToFile(outPath: string, analyzedData: AnalyzerDat
   return outPath
 }
 
-export function getRepoName(repoDir: string) {
-  return resolve(repoDir).split(sep).slice().reverse()[0]
-}
-
-export async function getCurrentBranch(dir: string) {
-  const result = (await runProcess(dir, "git", ["rev-parse", "--abbrev-ref", "HEAD"])) as string
-  return result.trim()
+export function getDirName(dir: string) {
+  return resolve(dir).split(sep).slice().reverse()[0]
 }
 
 export const formatMs = (ms: number) => {
@@ -167,7 +145,7 @@ export async function describeAsyncJob<T>(
   beforeMsg: string,
   afterMsg: string,
   errorMsg: string
-) {
+): Promise<[T, null] | [null, Error]> {
   spinner = createTruckSpinner()
   const success = (text: string, final = false) => {
     if (getLogLevel() === LOG_LEVEL.SILENT) return
@@ -194,10 +172,26 @@ export async function describeAsyncJob<T>(
     const stopTime = performance.now()
     const suffix = `[${formatMs(stopTime - startTime)}]`
     success(`${afterMsg} ${suffix}`, true)
-    return result
+    return [result, null]
   } catch (e) {
     error(errorMsg)
     log.error(e as Error)
-    process.exit(1)
+    return [null, e as Error]
+  }
+}
+
+export const getBaseDirFromPath = (path: string) => resolve(path, "..")
+export const getSiblingRepository = (path: string, repo: string) => resolve(getBaseDirFromPath(path), repo)
+
+/**
+ * This functions handles try / catch for you, so your code stays flat.
+ * @param promise An async function
+ * @returns A tuple of the result and an error. If there is no error, the error will be null.
+ */
+export async function promiseHelper<T>(promise: Promise<T>): Promise<[null, Error] | [T, null]> {
+  try {
+    return [await promise, null]
+  } catch (e) {
+    return [null, e as Error]
   }
 }

package/src/analyzer/util.test.ts

@@ -1,4 +1,4 @@
-import { last } from "./util"
+import { last } from "./util.server"
 
 describe("last", () => {
   it("gets the last element of the array", () => {

package/src/components/AnalyzingIndicator.tsx

@@ -0,0 +1,55 @@
+import styled from "styled-components"
+
+const LoadingPane = styled.div`
+  padding: 0.5em 2em;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+
+  /* hide_initially animation */
+  opacity: 0;
+  animation: hide_initially 0s linear forwards;
+  animation-delay: 1s;
+`
+
+const FullViewbox = styled.div`
+  display: grid;
+  place-items: center;
+  height: 100vh;
+  width: 100vw;
+`
+
+const StyledPath = styled.path`
+  fill: none;
+  stroke: #4580ff;
+  animation: dash 2s ease-in-out alternate infinite;
+`
+
+const LoadingText = styled.div`
+  text-align: center;
+  grid-area: 1/2;
+`
+
+const StyledSVG = styled.svg`
+  grid-area: 1/2;
+`
+
+export function AnalyzingIndicator() {
+  const width = 20
+  const height = 20
+  const length = width + height
+
+  const path = `M0,0 m-${width * 0.5},-${height * 0.5} l${width},0 l0,${height} l-${width},0 l0,-${height} Z`
+  const viewBox = `-${height * 0.5} -${width * 0.5} ${height} ${width}`
+
+  return (
+    <FullViewbox>
+      <LoadingPane>
+        <LoadingText>Analyzing...</LoadingText>
+        <StyledSVG height="160px" width="160px" viewBox={viewBox}>
+          <StyledPath strokeDasharray={length * 0.5} strokeDashoffset={length * 2} d={path}></StyledPath>
+        </StyledSVG>
+      </LoadingPane>
+    </FullViewbox>
+  )
+}

package/src/components/Animations.ts

@@ -0,0 +1,14 @@
+import { keyframes } from "styled-components";
+
+export const pulseAnimation = keyframes`
+  0%   { stroke-width: 1px; stroke-opacity: 0%; }
+  50%  { stroke-opacity: 50% }
+  99%  { stroke-width: 5px; stroke-opacity: 0%; }
+  100% { stroke-width: 1px; stroke-opacity: 0%; }
+`
+
+export const blinkAnimation = keyframes`
+  0% { opacity: 100% }
+  50% { opacity: 50% }
+  100% { opacity: 100% }
+`

package/src/components/Chart.tsx

@@ -23,6 +23,7 @@ import { useData } from "../contexts/DataContext"
 import { useMetrics } from "../contexts/MetricContext"
 import { ChartType, useOptions } from "../contexts/OptionsContext"
 import { usePath } from "../contexts/PathContext"
+import { blinkAnimation, pulseAnimation } from "./Animations"
 import { Tooltip } from "./Tooltip"
 
 type CircleOrRectHiearchyNode = HierarchyCircularNode<HydratedGitObject> | HierarchyRectangularNode<HydratedGitObject>
@@ -44,7 +45,7 @@ export function Chart(props: ChartProps) {
   const data = useData()
   const { chartType } = useOptions()
   const { path } = usePath()
-  const { setClickedObject } = useClickedObject()
+  const { clickedObject, setClickedObject } = useClickedObject()
   const { setPath } = usePath()
 
   const nodes = useMemo(() => {
@@ -68,7 +69,7 @@ export function Chart(props: ChartProps) {
           onMouseOver: () => setHoveredBlob(null),
           onMouseOut: () => setHoveredBlob(null),
         }
-
+  
   return (
     <>
       <SVG
@@ -78,9 +79,9 @@ export function Chart(props: ChartProps) {
       >
         {nodes?.descendants().map((d, i) => {
           return (
-            <g key={`${chartType}${d.data.path}`} {...createGroupHandlers(d)}>
+            <G blink={clickedObject?.path === d.data.path} key={`${chartType}${d.data.path}`} {...createGroupHandlers(d)}>
               <Node isRoot={i === 0} d={d} />
-            </g>
+            </G>
           )
         })}
       </SVG>
@@ -89,6 +90,12 @@ export function Chart(props: ChartProps) {
   )
 }
 
+const G = styled.g<{ blink: boolean }>`
+  animation-name: ${ props => props.blink ? blinkAnimation : "none" };
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+`
+
 const Node = memo(function Node({ d, isRoot }: { d: CircleOrRectHiearchyNode; isRoot: boolean }) {
   const { chartType } = useOptions()
   let showLabel = isTree(d.data)
@@ -160,13 +167,20 @@ function Circle({ d, isSearchMatch }: { d: HierarchyCircularNode<HydratedGitObje
     cy: d.y,
     r: Math.max(d.r - 1, 0),
     stroke: isSearchMatch ? searchMatchColor : "transparent",
-    strokeWidth: isSearchMatch ? "4px" : "1px",
+    strokeWidth: "1px",
     fill: metricsData[authorshipType].get(metricType)?.colormap.get(d.data.path) ?? "grey",
   })
 
-  return <animated.circle {...props} className={d.data.type} />
+  return <CircleSVG pulse={isSearchMatch} {...props} className={d.data.type} />
 }
 
+const CircleSVG = styled(animated.circle)<{ pulse: boolean }>`
+  animation-name: ${ props => props.pulse ? pulseAnimation : "none" };
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+`
+
 function Rect({ d, isSearchMatch }: { d: HierarchyRectangularNode<HydratedGitObject>; isSearchMatch: boolean }) {
   const metricsData = useMetrics()
   const { metricType, authorshipType } = useOptions()
@@ -178,7 +192,7 @@ function Rect({ d, isSearchMatch }: { d: HierarchyRectangularNode<HydratedGitObj
     height: d.y1 - d.y0,
 
     stroke: isSearchMatch ? searchMatchColor : "transparent",
-    strokeWidth: isSearchMatch ? "4px" : "1px",
+    strokeWidth: "1px",
 
     fill:
       d.data.type === "blob"
@@ -186,9 +200,16 @@ function Rect({ d, isSearchMatch }: { d: HierarchyRectangularNode<HydratedGitObj
         : "transparent",
   })
 
-  return <animated.rect {...props} className={d.data.type} />
+  return <RectSVG pulse={isSearchMatch} {...props} className={d.data.type} />
 }
 
+const RectSVG = styled(animated.rect)<{ pulse: boolean }>`
+  animation-name: ${ props => props.pulse ? pulseAnimation : "none" };
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+`
+
 function CircleText({
   d,
   displayText,

package/src/components/Details.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react"
-import { Form, useTransition } from "remix"
+import { Form, useNavigate, useTransition } from "remix"
 import styled from "styled-components"
 import { HydratedGitBlobObject, HydratedGitObject, HydratedGitTreeObject } from "~/analyzer/model"
 import { calculateAuthorshipForSubTree } from "~/authorUnionUtil"
@@ -7,7 +7,7 @@ import { AuthorDistFragment } from "~/components/AuthorDistFragment"
 import { AuthorDistOther } from "~/components/AuthorDistOther"
 import { Spacer } from "~/components/Spacer"
 import { ExpandDown } from "~/components/Toggle"
-import { Box, BoxTitle, DetailsKey, DetailsValue, InlineCode, NavigateBackButton, TextButton } from "~/components/util"
+import { Box, BoxTitle, DetailsKey, DetailsValue, Code, NavigateBackButton, TextButton } from "~/components/util"
 import { useClickedObject } from "~/contexts/ClickedContext"
 import { useData } from "~/contexts/DataContext"
 import { useOptions } from "~/contexts/OptionsContext"
@@ -29,6 +29,7 @@ export function Details() {
   const { setPath, path } = usePath()
   const data = useData()
   const isProcessingHideRef = useRef(false)
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (isProcessingHideRef.current) {
@@ -74,7 +75,7 @@ export function Details() {
       <Spacer lg />
       {isBlob ? (
         <>
-          <Form method="post" action="/repo">
+          <Form method="post" action=".">
             <input type="hidden" name="ignore" value={clickedObject.path} />
             <TextButton
               type="submit"
@@ -89,7 +90,7 @@ export function Details() {
           {clickedObject.name.includes(".") ? (
             <>
               <Spacer />
-              <Form method="post" action="/repo">
+              <Form method="post" action=".">
                 <input type="hidden" name="ignore" value={`*.${extension}`} />
                 <TextButton
                   type="submit"
@@ -98,19 +99,19 @@ export function Details() {
                     isProcessingHideRef.current = true
                   }}
                 >
-                  Hide all <InlineCode>.{extension}</InlineCode> files
+                  Hide all <Code inline>.{extension}</Code> files
                 </TextButton>
               </Form>
             </>
           ) : null}
           <Spacer />
-          <Form method="post" action="/repo">
+          <Form method="post" action=".">
             <input type="hidden" name="open" value={clickedObject.path} />
             <TextButton disabled={state !== "idle"}>Open file</TextButton>
           </Form>
         </>
       ) : (
-        <Form method="post" action="/repo">
+        <Form method="post" action=".">
           <input type="hidden" name="ignore" value={clickedObject.path} />
           <TextButton
             type="submit"