add something

src/lib/components/CommitPanel.svelte

@@ -4,6 +4,7 @@
   interface Props {
     commitMessage: string;
     canCommit: boolean;
+    commitBlockReason: string;
     hasRepository: boolean;
     isBusy: boolean;
     operation: string;
@@ -15,6 +16,7 @@
   let {
     commitMessage = "",
     canCommit = false,
+    commitBlockReason = "",
     hasRepository = false,
     isBusy = false,
     operation = "",
@@ -45,7 +47,10 @@
       placeholder="Commit message..."
       disabled={!hasRepository || isBusy}
     ></textarea>
-    <button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit}>
+    {#if commitBlockReason}
+      <p class="commit-block-reason">{commitBlockReason}</p>
+    {/if}
+    <button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit} title={commitBlockReason || "Commit staged changes"}>
       {#if operation === "Committing"}
         <LoaderCircle class="spin" size={16} aria-hidden="true" />
       {:else}

src/lib/components/CompareDialog.svelte

@@ -26,8 +26,26 @@
     onSelectFile = () => {},
   }: Props = $props();
 
+  let beforePane = $state<HTMLDivElement | null>(null);
+  let afterPane = $state<HTMLDivElement | null>(null);
+  let isSyncingSplitScroll = false;
+
+  function syncSplitScroll(source: "before" | "after") {
+    if (isSyncingSplitScroll) return;
+    const sourcePane = source === "before" ? beforePane : afterPane;
+    const targetPane = source === "before" ? afterPane : beforePane;
+    if (!sourcePane || !targetPane) return;
+
+    isSyncingSplitScroll = true;
+    targetPane.scrollTop = sourcePane.scrollTop;
+    targetPane.scrollLeft = sourcePane.scrollLeft;
+    requestAnimationFrame(() => {
+      isSyncingSplitScroll = false;
+    });
+  }
+
   function displayDiffFile(file: GitDiffFile): string {
-    return file.old_path ? `${file.old_path} → ${file.path}` : file.path;
+    return file.old_path ? `${file.old_path} -> ${file.path}` : file.path;
   }
 
   function buildDiffByPath(patch: string): Map<string, string> {
@@ -106,17 +124,18 @@
 
       if (isMeta) {
         flush();
-        rows.push({ type: "span", kind: "meta", text: line });
+        continue;
       } else if (line.startsWith("@@")) {
         flush();
         const m = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
         if (m) { leftNum = parseInt(m[1]) - 1; rightNum = parseInt(m[2]) - 1; }
-        rows.push({ type: "span", kind: "hunk", text: line });
+      } else if (line.startsWith("\\ ")) {
+        flush();
       } else if (line.startsWith("-")) {
         dels.push(line);
       } else if (line.startsWith("+")) {
         adds.push(line);
-      } else {
+      } else if (line.startsWith(" ")) {
         flush();
         leftNum++;
         rightNum++;
@@ -125,6 +144,9 @@
           leftNum,  leftText:  line.slice(1), leftKind:  "context",
           rightNum, rightText: line.slice(1), rightKind: "context",
         });
+      } else {
+        flush();
+        rows.push({ type: "span", kind: "meta", text: line });
       }
     }
     flush();
@@ -142,7 +164,7 @@
   role="presentation"
   onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
-  <div class="dialog" role="dialog" aria-modal="true" aria-label="Commit comparison" tabindex="-1">
+  <div class="dialog compare-dialog" role="dialog" aria-modal="true" aria-label="Commit comparison" tabindex="-1">
 
     <header class="dialog-header">
       <div>
@@ -214,17 +236,40 @@
 
             <!-- Split diff grid -->
             <div class="split-diff" role="table" aria-label="Side-by-side diff">
-              {#each splitRows as row, i (i)}
-                {#if row.type === "span"}
-                  <div class="split-span split-{row.kind}">{row.text}</div>
-                {:else}
-                  <div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
-                  <div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
-                  <div class="split-divider"></div>
-                  <div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
-                  <div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
-                {/if}
-              {/each}
+              <div
+                class="split-pane"
+                bind:this={beforePane}
+                aria-label="Before file content"
+                onscroll={() => syncSplitScroll("before")}
+              >
+                <div class="split-pane-grid">
+                  {#each splitRows as row, i (`left-${i}`)}
+                    {#if row.type === "span"}
+                      <div class="split-span split-{row.kind}">{row.text}</div>
+                    {:else}
+                      <div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
+                      <div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
+                    {/if}
+                  {/each}
+                </div>
+              </div>
+              <div
+                class="split-pane"
+                bind:this={afterPane}
+                aria-label="After file content"
+                onscroll={() => syncSplitScroll("after")}
+              >
+                <div class="split-pane-grid">
+                  {#each splitRows as row, i (`right-${i}`)}
+                    {#if row.type === "span"}
+                      <div class="split-span split-{row.kind}">{row.text}</div>
+                    {:else}
+                      <div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
+                      <div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
+                    {/if}
+                  {/each}
+                </div>
+              </div>
             </div>
           {/if}
         </div>

src/lib/components/ExplorerPanel.svelte

@@ -1,6 +1,27 @@
 <script lang="ts">
-  import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "@lucide/svelte";
+  import {
+    Braces,
+    ChevronDown,
+    ChevronRight,
+    CodeXml,
+    Database,
+    FileArchive,
+    FileAudio,
+    FileCode,
+    FileCog,
+    FileImage,
+    FileJson,
+    FileSpreadsheet,
+    FileText,
+    FileType,
+    FileVideo,
+    Folder,
+    FolderOpen,
+    Terminal,
+  } from "@lucide/svelte";
+  import { languageIconForPath } from "../languageIcons";
   import type { ExplorerNode, ExplorerNodeKind, FileStatusKind, GitRepositoryFile } from "../types";
+  import LanguageIcon from "./LanguageIcon.svelte";
 
   interface Props {
     repoFiles: GitRepositoryFile[];
@@ -97,6 +118,38 @@
     return kind ?? "none";
   }
 
+  function extensionFor(path: string): string {
+    const name = path.split(/[\\/]/).pop()?.toLowerCase() ?? "";
+    const index = name.lastIndexOf(".");
+    return index > 0 ? name.slice(index + 1) : "";
+  }
+
+  function fileIconKind(node: ExplorerNode): string {
+    const name = node.name.toLowerCase();
+    const ext = extensionFor(node.path);
+
+    if (["package.json", "tsconfig.json", "jsconfig.json", "composer.json", "deno.json", "tauri.conf.json"].includes(name)) return "json";
+    if (["cargo.toml", "package-lock.json", "pnpm-lock.yaml", "yarn.lock", "bun.lockb"].includes(name)) return "config";
+    if (["dockerfile", "makefile", "justfile", "rakefile", "gemfile", ".env", ".gitignore", ".gitattributes", ".npmrc", ".editorconfig"].includes(name)) return "config";
+
+    if (["js", "jsx", "ts", "tsx", "svelte", "vue", "astro", "rs", "go", "java", "kt", "kts", "cs", "cpp", "cxx", "cc", "c", "h", "hpp", "swift", "php", "rb", "py", "lua", "dart", "scala", "zig", "ex", "exs", "erl", "hrl", "fs", "fsx", "fsi", "clj", "cljs"].includes(ext)) return "code";
+    if (["html", "htm", "xml", "xaml", "svg"].includes(ext)) return "markup";
+    if (["css", "scss", "sass", "less", "postcss"].includes(ext)) return "style";
+    if (["json", "jsonc", "json5"].includes(ext)) return "json";
+    if (["toml", "yaml", "yml", "ini", "conf", "config", "properties", "env"].includes(ext)) return "config";
+    if (["sh", "bash", "zsh", "fish", "ps1", "bat", "cmd"].includes(ext)) return "script";
+    if (["md", "mdx", "txt", "log", "rst", "adoc", "tex"].includes(ext)) return "text";
+    if (["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico", "avif", "tif", "tiff"].includes(ext)) return "image";
+    if (["mp3", "wav", "ogg", "flac", "m4a", "aac"].includes(ext)) return "audio";
+    if (["mp4", "mov", "avi", "mkv", "webm", "wmv"].includes(ext)) return "video";
+    if (["zip", "rar", "7z", "tar", "gz", "tgz", "bz2", "xz"].includes(ext)) return "archive";
+    if (["csv", "tsv", "xls", "xlsx", "ods"].includes(ext)) return "sheet";
+    if (["sql", "sqlite", "sqlite3", "db"].includes(ext)) return "database";
+    if (["ttf", "otf", "woff", "woff2", "eot"].includes(ext)) return "font";
+
+    return "text";
+  }
+
   let explorerTree = $derived(buildExplorerTree(repoFiles));
   let visibleNodes = $derived(flattenExplorerTree(explorerTree, expandedExplorerPaths));
 </script>
@@ -145,7 +198,39 @@
             {/if}
           {:else}
             <span class="tree-spacer"></span>
-            <FileText size={15} aria-hidden="true" />
+            {@const languageIcon = languageIconForPath(node.path)}
+            {@const iconKind = fileIconKind(node)}
+            {#if languageIcon}
+              <LanguageIcon icon={languageIcon.icon} title={languageIcon.title} />
+            {:else if iconKind === "code"}
+              <FileCode class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "markup"}
+              <CodeXml class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "style"}
+              <Braces class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "json"}
+              <FileJson class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "config"}
+              <FileCog class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "script"}
+              <Terminal class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "image"}
+              <FileImage class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "audio"}
+              <FileAudio class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "video"}
+              <FileVideo class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "archive"}
+              <FileArchive class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "sheet"}
+              <FileSpreadsheet class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "database"}
+              <Database class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "font"}
+              <FileType class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else}
+              <FileText class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {/if}
           {/if}
 
           <button

src/lib/components/LanguageIcon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { SimpleIcon } from "simple-icons";
+
+  interface Props {
+    icon: SimpleIcon;
+    title: string;
+  }
+
+  let { icon, title }: Props = $props();
+</script>
+
+<svg
+  class="language-icon"
+  viewBox="0 0 24 24"
+  style={`color: #${icon.hex}`}
+  aria-hidden="true"
+  focusable="false"
+>
+  <title>{title}</title>
+  <path d={icon.path} />
+</svg>

src/lib/components/ResolveDialog.svelte

@@ -3,6 +3,16 @@
   import { AlertCircle, Check, LoaderCircle, X } from "@lucide/svelte";
   import type { ConflictChoice, ConflictFile, ConflictPart, GitFileStatus, PreparedResolution } from "../types";
 
+  type ConflictRegion = Extract<ConflictPart, { kind: "conflict" }>;
+  type ResolveSplitRow =
+    | { type: "marker"; conflictIndex: number }
+    | {
+        type: "pair";
+        conflictIndex?: number;
+        leftNum?: number; leftText?: string; leftKind: "context" | "ours" | "empty";
+        rightNum?: number; rightText?: string; rightKind: "context" | "theirs" | "empty";
+      };
+
   interface Props {
     conflictedFiles: GitFileStatus[];
     conflictTarget: string;
@@ -36,6 +46,9 @@
   let resolveContent = $state("");
   let manualMode = $state(false);
   let binarySide = $state<"ours" | "theirs" | null>(null);
+  let resolveBeforePane = $state<HTMLDivElement | null>(null);
+  let resolveAfterPane = $state<HTMLDivElement | null>(null);
+  let isSyncingResolveScroll = false;
 
   $effect(() => {
     const c = conflict;
@@ -75,6 +88,8 @@
   });
 
   let conflictRegionCount = $derived(conflictParts.filter((p) => p.kind === "conflict").length);
+  let conflictRegions = $derived(conflictOnlyParts(conflictParts));
+  let resolveSplitRows = $derived(buildResolveSplitRows(conflictParts));
   let unresolvedCount = $derived(manualMode ? 0 : conflictChoices.filter((c) => c == null).length);
   let resolvedContent = $derived(manualMode ? resolveContent : buildResolution(conflictParts, conflictChoices));
   let resolveHasMarkers = $derived(/^<{7}/m.test(resolvedContent) || /^>{7}/m.test(resolvedContent));
@@ -125,6 +140,74 @@
     return out.join("\n");
   }
 
+  function conflictOnlyParts(parts: ConflictPart[]): ConflictRegion[] {
+    return parts.filter((part): part is ConflictRegion => part.kind === "conflict");
+  }
+
+  function buildResolveSplitRows(parts: ConflictPart[]): ResolveSplitRow[] {
+    const rows: ResolveSplitRow[] = [];
+    let leftNum = 0;
+    let rightNum = 0;
+
+    for (const part of parts) {
+      if (part.kind === "text") {
+        for (const line of part.lines) {
+          leftNum++;
+          rightNum++;
+          rows.push({
+            type: "pair",
+            leftNum,
+            leftText: line,
+            leftKind: "context",
+            rightNum,
+            rightText: line,
+            rightKind: "context",
+          });
+        }
+        continue;
+      }
+
+      rows.push({ type: "marker", conflictIndex: part.index });
+      const count = Math.max(part.oursLines.length, part.theirsLines.length);
+      for (let i = 0; i < count; i++) {
+        const hasOurs = i < part.oursLines.length;
+        const hasTheirs = i < part.theirsLines.length;
+        if (hasOurs) leftNum++;
+        if (hasTheirs) rightNum++;
+        rows.push({
+          type: "pair",
+          conflictIndex: part.index,
+          leftNum: hasOurs ? leftNum : undefined,
+          leftText: hasOurs ? part.oursLines[i] : undefined,
+          leftKind: hasOurs ? "ours" : "empty",
+          rightNum: hasTheirs ? rightNum : undefined,
+          rightText: hasTheirs ? part.theirsLines[i] : undefined,
+          rightKind: hasTheirs ? "theirs" : "empty",
+        });
+      }
+    }
+
+    return rows;
+  }
+
+  function syncResolveScroll(source: "before" | "after") {
+    if (isSyncingResolveScroll) return;
+    const sourcePane = source === "before" ? resolveBeforePane : resolveAfterPane;
+    const targetPane = source === "before" ? resolveAfterPane : resolveBeforePane;
+    if (!sourcePane || !targetPane) return;
+
+    isSyncingResolveScroll = true;
+    targetPane.scrollTop = sourcePane.scrollTop;
+    targetPane.scrollLeft = sourcePane.scrollLeft;
+    requestAnimationFrame(() => {
+      isSyncingResolveScroll = false;
+    });
+  }
+
+  function legacyConflictParts(): any[] {
+    return [];
+  }
+
   function setConflictChoice(index: number, choice: ConflictChoice) {
     const next = [...conflictChoices];
     next[index] = choice;
@@ -296,7 +379,71 @@
               ></textarea>
             {:else}
               <div class="resolve-structured">
-                {#each conflictParts as part, partIndex (partIndex)}
+                {#if conflictRegions.length > 0}
+                  <div class="resolve-conflict-controls" aria-label="Conflict decisions">
+                    {#each conflictRegions as part (part.index)}
+                      <div class="resolve-conflict-bar" class:unresolved={conflictChoices[part.index] == null}>
+                        <span class="resolve-conflict-label">Conflict {part.index + 1}</span>
+                        <div class="resolve-choice-buttons">
+                          <button type="button" class:active={conflictChoices[part.index] === "ours"} onclick={() => setConflictChoice(part.index, "ours")} disabled={isBusy}>Current</button>
+                          <button type="button" class:active={conflictChoices[part.index] === "theirs"} onclick={() => setConflictChoice(part.index, "theirs")} disabled={isBusy}>Incoming</button>
+                          <button type="button" class:active={conflictChoices[part.index] === "both-ot"} onclick={() => setConflictChoice(part.index, "both-ot")} disabled={isBusy} title="Both - current first">Both C+I</button>
+                          <button type="button" class:active={conflictChoices[part.index] === "both-to"} onclick={() => setConflictChoice(part.index, "both-to")} disabled={isBusy} title="Both - incoming first">Both I+C</button>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+
+                <div class="resolve-split" role="table" aria-label="Full conflict comparison">
+                  <div
+                    class="resolve-pane"
+                    bind:this={resolveBeforePane}
+                    aria-label="Current file content"
+                    onscroll={() => syncResolveScroll("before")}
+                  >
+                    <div class="resolve-pane-grid">
+                      {#each resolveSplitRows as row, i (`left-${i}`)}
+                        {#if row.type === "marker"}
+                          <div class="resolve-split-marker" class:unresolved={conflictChoices[row.conflictIndex] == null}>Conflict {row.conflictIndex + 1}</div>
+                        {:else}
+                          <div class="resolve-num" class:ours={row.leftKind === "ours"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
+                          <div
+                            class="resolve-cell"
+                            class:ours={row.leftKind === "ours"}
+                            class:empty={row.leftKind === "empty"}
+                            class:dimmed={row.conflictIndex != null && !oursActive(conflictChoices[row.conflictIndex])}
+                          >{displayLine(row.leftText ?? "") || " "}</div>
+                        {/if}
+                      {/each}
+                    </div>
+                  </div>
+                  <div
+                    class="resolve-pane"
+                    bind:this={resolveAfterPane}
+                    aria-label="Incoming file content"
+                    onscroll={() => syncResolveScroll("after")}
+                  >
+                    <div class="resolve-pane-grid">
+                      {#each resolveSplitRows as row, i (`right-${i}`)}
+                        {#if row.type === "marker"}
+                          <div class="resolve-split-marker" class:unresolved={conflictChoices[row.conflictIndex] == null}>Conflict {row.conflictIndex + 1}</div>
+                        {:else}
+                          <div class="resolve-num" class:theirs={row.rightKind === "theirs"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
+                          <div
+                            class="resolve-cell"
+                            class:theirs={row.rightKind === "theirs"}
+                            class:empty={row.rightKind === "empty"}
+                            class:dimmed={row.conflictIndex != null && !theirsActive(conflictChoices[row.conflictIndex])}
+                          >{displayLine(row.rightText ?? "") || " "}</div>
+                        {/if}
+                      {/each}
+                    </div>
+                  </div>
+                </div>
+
+                {#if false}
+                {#each legacyConflictParts() as part, partIndex (partIndex)}
                   {#if part.kind === "text"}
                     {#if part.lines.length > 0}
                       <pre class="resolve-context">{#each part.lines as line}<span class="resolve-line context">{displayLine(line) || " "}</span>{/each}</pre>
@@ -323,6 +470,7 @@
                     </div>
                   {/if}
                 {/each}
+                {/if}
               </div>
             {/if}
 

src/lib/languageIcons.ts

@@ -0,0 +1,207 @@
+import type { SimpleIcon } from "simple-icons";
+import {
+  siAstro,
+  siBun,
+  siC,
+  siClojure,
+  siCmake,
+  siCplusplus,
+  siCss,
+  siDart,
+  siDeno,
+  siDocker,
+  siDotnet,
+  siEditorconfig,
+  siElixir,
+  siErlang,
+  siEslint,
+  siFortran,
+  siFsharp,
+  siGit,
+  siGitignoredotio,
+  siGnubash,
+  siGo,
+  siGradle,
+  siGraphql,
+  siHaskell,
+  siHtml5,
+  siJavascript,
+  siJson,
+  siJulia,
+  siKotlin,
+  siLua,
+  siMake,
+  siMarkdown,
+  siNodedotjs,
+  siNpm,
+  siOcaml,
+  siOpenjdk,
+  siPerl,
+  siPhp,
+  siPnpm,
+  siPrettier,
+  siPython,
+  siR,
+  siReact,
+  siRuby,
+  siRust,
+  siSass,
+  siScala,
+  siShell,
+  siSqlite,
+  siSvelte,
+  siSvg,
+  siSwift,
+  siTailwindcss,
+  siTauri,
+  siTerraform,
+  siToml,
+  siTypescript,
+  siVite,
+  siVuedotjs,
+  siYaml,
+  siYarn,
+  siZig,
+  siZsh,
+} from "simple-icons";
+
+export interface LanguageIconSpec {
+  icon: SimpleIcon;
+  title: string;
+}
+
+function spec(icon: SimpleIcon, title = icon.title): LanguageIconSpec {
+  return { icon, title };
+}
+
+const fileNameIcons = new Map<string, LanguageIconSpec>([
+  ["dockerfile", spec(siDocker, "Docker")],
+  ["docker-compose.yml", spec(siDocker, "Docker Compose")],
+  ["docker-compose.yaml", spec(siDocker, "Docker Compose")],
+  ["compose.yml", spec(siDocker, "Docker Compose")],
+  ["compose.yaml", spec(siDocker, "Docker Compose")],
+  ["package.json", spec(siNodedotjs, "Node package")],
+  ["package-lock.json", spec(siNpm, "npm lockfile")],
+  ["pnpm-lock.yaml", spec(siPnpm, "pnpm lockfile")],
+  ["yarn.lock", spec(siYarn, "Yarn lockfile")],
+  ["bun.lockb", spec(siBun, "Bun lockfile")],
+  ["deno.json", spec(siDeno, "Deno")],
+  ["deno.jsonc", spec(siDeno, "Deno")],
+  ["cargo.toml", spec(siRust, "Cargo")],
+  ["cargo.lock", spec(siRust, "Cargo lockfile")],
+  ["tauri.conf.json", spec(siTauri, "Tauri")],
+  ["svelte.config.js", spec(siSvelte, "Svelte config")],
+  ["svelte.config.ts", spec(siSvelte, "Svelte config")],
+  ["vite.config.js", spec(siVite, "Vite config")],
+  ["vite.config.ts", spec(siVite, "Vite config")],
+  ["tailwind.config.js", spec(siTailwindcss, "Tailwind CSS config")],
+  ["tailwind.config.ts", spec(siTailwindcss, "Tailwind CSS config")],
+  ["eslint.config.js", spec(siEslint, "ESLint config")],
+  ["eslint.config.mjs", spec(siEslint, "ESLint config")],
+  [".eslintrc", spec(siEslint, "ESLint config")],
+  [".eslintrc.js", spec(siEslint, "ESLint config")],
+  [".eslintrc.cjs", spec(siEslint, "ESLint config")],
+  [".prettierrc", spec(siPrettier, "Prettier config")],
+  [".prettierrc.json", spec(siPrettier, "Prettier config")],
+  [".prettierrc.js", spec(siPrettier, "Prettier config")],
+  [".gitignore", spec(siGitignoredotio, "gitignore")],
+  [".gitattributes", spec(siGit, "Git attributes")],
+  [".gitmodules", spec(siGit, "Git modules")],
+  [".editorconfig", spec(siEditorconfig, "EditorConfig")],
+  ["cmakelists.txt", spec(siCmake, "CMake")],
+  ["makefile", spec(siMake, "Makefile")],
+  ["justfile", spec(siShell, "Justfile")],
+  ["rakefile", spec(siRuby, "Rakefile")],
+  ["gemfile", spec(siRuby, "Gemfile")],
+]);
+
+const extensionIcons = new Map<string, LanguageIconSpec>([
+  ["js", spec(siJavascript)],
+  ["mjs", spec(siJavascript)],
+  ["cjs", spec(siJavascript)],
+  ["jsx", spec(siReact, "React JSX")],
+  ["ts", spec(siTypescript)],
+  ["mts", spec(siTypescript)],
+  ["cts", spec(siTypescript)],
+  ["tsx", spec(siReact, "React TSX")],
+  ["svelte", spec(siSvelte)],
+  ["vue", spec(siVuedotjs, "Vue")],
+  ["astro", spec(siAstro)],
+  ["rs", spec(siRust)],
+  ["go", spec(siGo)],
+  ["py", spec(siPython)],
+  ["pyw", spec(siPython)],
+  ["java", spec(siOpenjdk, "Java")],
+  ["kt", spec(siKotlin)],
+  ["kts", spec(siKotlin)],
+  ["cs", spec(siDotnet, "C#")],
+  ["cpp", spec(siCplusplus, "C++")],
+  ["cxx", spec(siCplusplus, "C++")],
+  ["cc", spec(siCplusplus, "C++")],
+  ["hpp", spec(siCplusplus, "C++")],
+  ["hh", spec(siCplusplus, "C++")],
+  ["c", spec(siC)],
+  ["h", spec(siC)],
+  ["swift", spec(siSwift)],
+  ["php", spec(siPhp, "PHP")],
+  ["rb", spec(siRuby)],
+  ["lua", spec(siLua)],
+  ["dart", spec(siDart)],
+  ["scala", spec(siScala)],
+  ["zig", spec(siZig)],
+  ["ex", spec(siElixir)],
+  ["exs", spec(siElixir)],
+  ["erl", spec(siErlang)],
+  ["hrl", spec(siErlang)],
+  ["fs", spec(siFsharp, "F#")],
+  ["fsx", spec(siFsharp, "F#")],
+  ["fsi", spec(siFsharp, "F#")],
+  ["clj", spec(siClojure)],
+  ["cljs", spec(siClojure)],
+  ["hs", spec(siHaskell)],
+  ["lhs", spec(siHaskell)],
+  ["ml", spec(siOcaml, "OCaml")],
+  ["mli", spec(siOcaml, "OCaml")],
+  ["jl", spec(siJulia)],
+  ["r", spec(siR, "R")],
+  ["pl", spec(siPerl)],
+  ["pm", spec(siPerl)],
+  ["f", spec(siFortran)],
+  ["f90", spec(siFortran)],
+  ["f95", spec(siFortran)],
+  ["html", spec(siHtml5, "HTML")],
+  ["htm", spec(siHtml5, "HTML")],
+  ["css", spec(siCss, "CSS")],
+  ["scss", spec(siSass, "Sass")],
+  ["sass", spec(siSass, "Sass")],
+  ["svg", spec(siSvg, "SVG")],
+  ["json", spec(siJson, "JSON")],
+  ["jsonc", spec(siJson, "JSONC")],
+  ["json5", spec(siJson, "JSON5")],
+  ["yaml", spec(siYaml, "YAML")],
+  ["yml", spec(siYaml, "YAML")],
+  ["toml", spec(siToml, "TOML")],
+  ["tf", spec(siTerraform, "Terraform")],
+  ["tfvars", spec(siTerraform, "Terraform variables")],
+  ["graphql", spec(siGraphql, "GraphQL")],
+  ["gql", spec(siGraphql, "GraphQL")],
+  ["md", spec(siMarkdown, "Markdown")],
+  ["mdx", spec(siMarkdown, "MDX")],
+  ["sh", spec(siGnubash, "Shell script")],
+  ["bash", spec(siGnubash, "Bash")],
+  ["zsh", spec(siZsh, "Zsh")],
+  ["fish", spec(siShell, "Fish shell")],
+  ["sql", spec(siSqlite, "SQL")],
+  ["sqlite", spec(siSqlite, "SQLite")],
+  ["sqlite3", spec(siSqlite, "SQLite")],
+]);
+
+export function languageIconForPath(path: string): LanguageIconSpec | null {
+  const name = path.split(/[\\/]/).pop()?.toLowerCase() ?? "";
+  const byName = fileNameIcons.get(name);
+  if (byName) return byName;
+
+  const index = name.lastIndexOf(".");
+  if (index <= 0) return null;
+  return extensionIcons.get(name.slice(index + 1)) ?? null;
+}