From 316a0f76438414e6321d2debd9f60d4410436dbc Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Thu, 6 Aug 2026 09:09:35 +0200
Subject: [PATCH] Draw the commit graph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The history is an ordinary list of buttons. Each row owns a small SVG
for its lane segment, marked aria-hidden, over content that already
reads correctly without it — a summary, an author, a <time>, and a
short id. Row is a button because selecting a commit is an action and a
button brings its own role, focus ring and Enter handling; that limits
it to phrasing content, which is why ref badges are spans with a
visually hidden word for what each one is.

Ten lane colours come from one CSS rule rather than ten values: the
lane index rotates an oklch hue, starting near the seed colour so the
graph belongs to the same palette as everything else. Nothing about
colour reaches the Rust side, and switching light to dark re-themes the
whole graph without a re-render.

Nothing here needs a virtual list. Rows arrive in batches as the end of
the list nears the viewport, so the DOM only holds what has been
scrolled to, and rows past the first forty get content-visibility so
the browser skips laying out and painting the rest. `none` for the
intrinsic width keeps an off-screen row from collapsing horizontally,
which would make the scroll width jump on a wide graph. Which rows are
deferred is decided by nth-child, so no JavaScript is involved.

Wide graphs scroll rather than compress. A graph's width comes from the
history — aspnetcore lays out 115 columns — so no window size makes it
fit and capping would only hide branches.

Two things caught while driving the real components in a browser:

- Five arrow presses moved the selection one row. Solid 2 batches
  signal writes, so reading selected() to compute the next value goes
  stale when presses land in one batch. Now the update goes through the
  functional setter, which sees the pending value.
- jsx-a11y assumes React's htmlFor, so Solid's plain `for` read as an
  unassociated label. Configured rather than worked around.

Safari drops list semantics from a list styled with list-style: none,
which Tailwind's preflight applies — and Tauri is WKWebView on macOS,
so that is the default here. An empty-string marker renders nothing and
leaves the list a list, which beats patching the role back with ARIA.

Opening is a path field for now. A native folder picker needs the Tauri
dialog plugin, which is a dependency this change does not need; the
picker arrives with the repository-picker work.

Infinite scrolling is not verified yet — IntersectionObserver does not
run in a hidden document, and the browser pane available here cannot
make one visible. The Playwright harness covers it next.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .oxlintrc.json                    |  13 ++-
 src/App.tsx                       |  87 ++++++++++++++++----
 src/app.css                       |  66 ++++++++++++++++
 src/components/CommitRow.tsx      |  93 ++++++++++++++++++++++
 src/components/GraphLanes.tsx     |  92 ++++++++++++++++++++++
 src/components/History.tsx        | 127 ++++++++++++++++++++++++++++++
 src/components/OpenRepository.tsx |  49 ++++++++++++
 src/components/StatusBar.tsx      |  14 +++-
 src/lib/format.ts                 |  50 ++++++++++++
 src/lib/graph.ts                  | 100 +++++++++++++++++++++++
 10 files changed, 671 insertions(+), 20 deletions(-)
 create mode 100644 src/components/CommitRow.tsx
 create mode 100644 src/components/GraphLanes.tsx
 create mode 100644 src/components/History.tsx
 create mode 100644 src/components/OpenRepository.tsx
 create mode 100644 src/lib/format.ts
 create mode 100644 src/lib/graph.ts

diff --git a/.oxlintrc.json b/.oxlintrc.json
index 007ae08..6f824ea 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -8,11 +8,20 @@
   },
   "rules": {
     // Vite's CSS entry point is a side-effect import; there is nothing to assign.
-    "import/no-unassigned-import": "off"
+    "import/no-unassigned-import": "off",
+    // A component's function is mostly markup, so a line limit meant for logic
+    // just asks for components to be split where they do not want to be.
+    "eslint/max-lines-per-function": "off"
   },
   "settings": {
     "jsx-a11y": {
-      "polymorphicPropName": "component"
+      "polymorphicPropName": "component",
+      // jsx-a11y was written for React, which renames the `for` attribute to
+      // `htmlFor`. Solid uses the real HTML name, so the rules have to be told
+      // to look for it.
+      "attributes": {
+        "for": ["for", "htmlFor"]
+      }
     }
   },
   "ignorePatterns": ["dist", "src-tauri/target"]
diff --git a/src/App.tsx b/src/App.tsx
index 832fd33..cfc75b9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,56 @@
+import { Show, createSignal } from "solid-js";
+
+import History from "./components/History";
+import OpenRepository from "./components/OpenRepository";
 import RepositoryNav from "./components/RepositoryNav";
 import StatusBar from "./components/StatusBar";
+import { openRepository } from "./lib/api";
+import { isGigitError, type OpenedRepository } from "./lib/bindings";
+import { createGraphView } from "./lib/graph";
+
+/** What to call a repository: its working tree's folder, or the git directory. */
+function nameOf(repository: OpenedRepository): string {
+  const path = repository.summary.workdir ?? repository.summary.gitDir;
+
+  return path.replace(/\/+$/u, "").split("/").pop() ?? path;
+}
+
+/** How the current HEAD reads in the title bar. */
+function headOf(repository: OpenedRepository): string {
+  const head = repository.summary.head;
+
+  switch (head.state) {
+    case "branch":
+      return head.shorthand;
+    case "detached":
+      return `detached at ${head.id.slice(0, 7)}`;
+    case "unborn":
+      return `${head.shorthand} (no commits yet)`;
+  }
+}
 
-/**
- * The application shell: a title bar, a repository navigation sidebar, the
- * history pane, and a status bar. Everything below is still a placeholder —
- * the history pane is filled in once the graph streams from Rust.
- */
 export default function App() {
+  const [repository, setRepository] = createSignal<OpenedRepository | undefined>();
+  const [opening, setOpening] = createSignal(false);
+  const [error, setError] = createSignal<string | undefined>();
+  const graph = createGraphView();
+
+  async function open(path: string) {
+    setOpening(true);
+    setError(undefined);
+
+    try {
+      const opened = await openRepository(path);
+      setRepository(opened);
+      await graph.show(opened.id);
+    } catch (failure) {
+      setRepository(undefined);
+      setError(isGigitError(failure) ? failure.message : String(failure));
+    } finally {
+      setOpening(false);
+    }
+  }
+
   return (
     <div class="grid h-full grid-cols-[16rem_1fr] grid-rows-[auto_1fr_auto] bg-surface text-on-surface">
       <a
@@ -18,24 +62,39 @@ export default function App() {
 
       <header class="col-span-2 flex items-center gap-3 border-b border-outline-variant bg-surface-container px-4 py-2">
         <h1 class="text-title-md">gigit</h1>
-        <p class="text-body-sm text-on-surface-variant">No repository open</p>
-        <button
-          type="button"
-          class="ml-auto rounded-large bg-primary px-4 py-2 text-label-lg text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+        <Show
+          when={repository()}
+          fallback={<p class="text-body-sm text-on-surface-variant">No repository open</p>}
         >
-          Open repository…
-        </button>
+          {(current) => (
+            <p class="text-body-sm text-on-surface-variant">
+              {nameOf(current())} · {headOf(current())}
+            </p>
+          )}
+        </Show>
+
+        <OpenRepository busy={opening()} onOpen={open} />
       </header>
 
       <RepositoryNav />
 
       {/* tabindex="-1" so the skip link actually moves focus here, not just scroll */}
-      <main id="history" tabindex="-1" class="overflow-auto p-6">
+      <main id="history" tabindex="-1" class="min-h-0 overflow-hidden">
         <h2 class="sr-only">History</h2>
-        <p class="text-body-md text-on-surface-variant">Open a repository to see its history.</p>
+
+        <Show
+          when={repository()}
+          fallback={
+            <p class="p-6 text-body-md text-on-surface-variant">
+              Open a repository to see its history.
+            </p>
+          }
+        >
+          <History graph={graph} />
+        </Show>
       </main>
 
-      <StatusBar />
+      <StatusBar message={error() ?? graph.message()} isError={error() !== undefined} />
     </div>
   );
 }
diff --git a/src/app.css b/src/app.css
index be2aa91..8a3f636 100644
--- a/src/app.css
+++ b/src/app.css
@@ -27,3 +27,69 @@
     overflow: hidden;
   }
 }
+
+/* The lane a graph line or dot belongs to. Registered so it is typed as a
+   number, which is what lets it drive the hue calculation below. */
+@property --lane {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@theme {
+  /* Must match the constants in GraphLanes.tsx, which builds the SVG paths. */
+  --row-height: 28px;
+}
+
+@layer components {
+  /* Ten lane colours from one formula rather than ten hard-coded values: the
+     lane index rotates the hue, starting near the seed colour so the graph
+     belongs to the same palette as everything else. Lightness and chroma
+     differ between schemes because a colour readable on white is not readable
+     on near-black. */
+  .graph-line,
+  .graph-dot {
+    --hue: calc(25 + var(--lane) * 36);
+
+    color: light-dark(oklch(52% 0.17 var(--hue)), oklch(78% 0.15 var(--hue)));
+  }
+
+  .graph-line {
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
+
+  .graph-dot {
+    fill: currentcolor;
+  }
+
+  /* A merge reads as a ring, so it is distinguishable from an ordinary commit
+     without relying on size alone. */
+  .graph-dot-merge {
+    fill: var(--color-surface);
+    stroke: currentcolor;
+    stroke-width: 3;
+  }
+
+  /* Safari drops list semantics when a list is given `list-style: none`, which
+     Tailwind's preflight does — and Tauri is WKWebView on macOS, so that is the
+     default here, not a corner case. An empty string marker renders nothing but
+     leaves the list a list, which beats patching the role back on with ARIA. */
+  .history-list {
+    list-style-type: "";
+  }
+
+  /* Rows past the first screenful are skipped until they are scrolled near.
+     `none` for the width keeps an off-screen row from collapsing horizontally,
+     which would make the scroll width jump about on a wide graph.
+
+     Using nth-child means no JavaScript decides what is on screen — and the
+     first rows, the ones that must paint immediately, are deliberately left
+     out of it. */
+  .history-list > li:nth-child(n + 40) {
+    content-visibility: auto;
+    contain-intrinsic-size: auto none auto var(--row-height);
+  }
+}
diff --git a/src/components/CommitRow.tsx b/src/components/CommitRow.tsx
new file mode 100644
index 0000000..b67db2b
--- /dev/null
+++ b/src/components/CommitRow.tsx
@@ -0,0 +1,93 @@
+import { For, Show } from "solid-js";
+
+import type { GraphRow, RefBadge } from "../lib/bindings";
+import { absoluteTime, isoTime, relativeTime, shortId } from "../lib/format";
+import GraphLanes from "./GraphLanes";
+
+/** What a ref badge is, spoken rather than shown. */
+function describe(badge: RefBadge): string {
+  switch (badge.kind) {
+    case "localBranch":
+      return badge.isHead ? "current branch" : "branch";
+    case "remoteBranch":
+      return "remote branch";
+    case "tag":
+      return "tag";
+    case "other":
+      return "reference";
+  }
+}
+
+/**
+ * One commit.
+ *
+ * The row is a button because selecting a commit is an action, and a button
+ * brings its own role, focus ring and Enter/Space handling. That constrains the
+ * contents to phrasing content — which is why the ref badges are spans rather
+ * than a list.
+ */
+export default function CommitRow(props: {
+  row: GraphRow;
+  isSelected: boolean;
+  onSelect: () => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+}) {
+  return (
+    <li>
+      <button
+        type="button"
+        data-row={props.row.row}
+        // Roving tabindex: one stop for the whole history, not one per commit.
+        tabindex={props.isSelected ? 0 : -1}
+        aria-current={props.isSelected ? "true" : undefined}
+        onClick={props.onSelect}
+        onFocus={props.onSelect}
+        onKeyDown={props.onKeyDown}
+        class="flex h-(--row-height) w-full items-center gap-3 rounded-small px-2 text-left whitespace-nowrap hover:bg-surface-container focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary aria-[current]:bg-secondary-container aria-[current]:text-on-secondary-container"
+      >
+        <GraphLanes row={props.row} />
+
+        <Show when={props.row.refs.length > 0}>
+          <span class="flex shrink-0 items-center gap-1">
+            <For each={props.row.refs}>
+              {(badge) => (
+                <span
+                  class={[
+                    "rounded-extra-small px-1.5 py-0.5 text-label-sm",
+                    badge.isHead
+                      ? "bg-primary text-on-primary"
+                      : "bg-surface-container-highest text-on-surface-variant",
+                  ]}
+                >
+                  <span class="sr-only">{describe(badge)}: </span>
+                  {badge.shorthand}
+                </span>
+              )}
+            </For>
+          </span>
+        </Show>
+
+        <span class="min-w-0 flex-1 overflow-hidden text-body-md text-ellipsis">
+          {props.row.summary}
+        </span>
+
+        <span class="hidden shrink-0 text-body-sm text-on-surface-variant sm:inline">
+          {props.row.author}
+        </span>
+
+        <time
+          datetime={isoTime(props.row.time)}
+          title={absoluteTime(props.row.time)}
+          class="shrink-0 text-body-sm text-on-surface-variant tabular-nums"
+        >
+          {relativeTime(props.row.time)}
+        </time>
+
+        <span class="shrink-0 font-mono text-body-sm text-on-surface-variant">
+          <span class="sr-only">commit </span>
+          {shortId(props.row.id)}
+        </span>
+      </button>
+    </li>
+  );
+}
diff --git a/src/components/GraphLanes.tsx b/src/components/GraphLanes.tsx
new file mode 100644
index 0000000..dae1232
--- /dev/null
+++ b/src/components/GraphLanes.tsx
@@ -0,0 +1,92 @@
+import { For } from "solid-js";
+
+import type { Edge, GraphRow } from "../lib/bindings";
+
+/**
+ * Geometry, in pixels. These match the custom properties in `app.css`; the SVG
+ * needs real numbers to build paths from, and CSS needs them to size the row.
+ */
+const LANE_WIDTH = 14;
+const ROW_HEIGHT = 28;
+const DOT_RADIUS = 4;
+
+/** The centre of a column. */
+function centreOf(column: number): number {
+  return column * LANE_WIDTH + LANE_WIDTH / 2;
+}
+
+/**
+ * One line segment as a path.
+ *
+ * Control points sit at the vertical midpoint of the segment, which gives a
+ * smooth S-curve when the line changes column and collapses to a straight
+ * vertical line when it does not — so one formula covers every case.
+ */
+function segment(edge: Edge, commitColumn: number): string {
+  const middle = ROW_HEIGHT / 2;
+
+  let from: [number, number];
+  let to: [number, number];
+
+  switch (edge.kind) {
+    case "through": {
+      from = [centreOf(edge.fromColumn), 0];
+      to = [centreOf(edge.toColumn), ROW_HEIGHT];
+      break;
+    }
+    case "toCommit": {
+      from = [centreOf(edge.fromColumn), 0];
+      to = [centreOf(commitColumn), middle];
+      break;
+    }
+    case "fromCommit": {
+      from = [centreOf(commitColumn), middle];
+      to = [centreOf(edge.toColumn), ROW_HEIGHT];
+      break;
+    }
+  }
+
+  const bend = (from[1] + to[1]) / 2;
+
+  return `M ${from[0]} ${from[1]} C ${from[0]} ${bend} ${to[0]} ${bend} ${to[0]} ${to[1]}`;
+}
+
+/**
+ * The lanes and dot for one row.
+ *
+ * Decoration over content that already reads correctly without it, so it is
+ * hidden from assistive technology entirely. Colours come from the `--lane`
+ * custom property, which means the whole graph re-themes in CSS with no
+ * re-render.
+ */
+export default function GraphLanes(props: { row: GraphRow }) {
+  const width = () => Math.max(props.row.width, props.row.column + 1) * LANE_WIDTH;
+
+  return (
+    <svg
+      aria-hidden="true"
+      class="shrink-0"
+      width={width()}
+      height={ROW_HEIGHT}
+      viewBox={`0 0 ${width()} ${ROW_HEIGHT}`}
+    >
+      <For each={props.row.edges}>
+        {(edge) => (
+          <path
+            class="graph-line"
+            style={{ "--lane": String(edge.lane) }}
+            d={segment(edge, props.row.column)}
+          />
+        )}
+      </For>
+
+      <circle
+        class={["graph-dot", { "graph-dot-merge": props.row.dot === "merge" }]}
+        style={{ "--lane": String(props.row.lane) }}
+        cx={centreOf(props.row.column)}
+        cy={ROW_HEIGHT / 2}
+        r={props.row.dot === "merge" ? DOT_RADIUS + 1 : DOT_RADIUS}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/History.tsx b/src/components/History.tsx
new file mode 100644
index 0000000..98cc2c4
--- /dev/null
+++ b/src/components/History.tsx
@@ -0,0 +1,127 @@
+import { For, Show, createSignal, onCleanup } from "solid-js";
+
+import type { GraphView } from "../lib/graph";
+import CommitRow from "./CommitRow";
+
+/** How many rows a Page Up or Page Down jumps. */
+const PAGE = 20;
+
+/**
+ * The commit history.
+ *
+ * Two things keep this affordable on a repository with tens of thousands of
+ * commits. Rows arrive in batches as the end of the list comes into view, so
+ * the DOM only ever holds what has been scrolled to; and rows past the first
+ * screenful get `content-visibility`, so the browser skips laying out and
+ * painting the ones that are off screen. Between them there is no need for a
+ * virtual list library.
+ */
+export default function History(props: { graph: GraphView }) {
+  const [selected, setSelected] = createSignal(0);
+
+  let list: HTMLOListElement | undefined;
+
+  /**
+   * Move the selection and take focus with it, so the keyboard follows.
+   *
+   * `next` is a function of the current row rather than an absolute index, and
+   * the update goes through the functional setter, because Solid batches signal
+   * writes: reading `selected()` to compute the next value gives a stale answer
+   * when two key presses land in the same batch, and the second press is lost.
+   */
+  function moveSelection(next: (current: number) => number) {
+    const last = props.graph.rows().length - 1;
+    let landed = 0;
+
+    setSelected((current) => {
+      landed = Math.max(0, Math.min(next(current), last));
+      return landed;
+    });
+
+    // Found by row number rather than by index into a list of refs, so a jump
+    // past rows that have not rendered yet still lands somewhere sensible.
+    const row = list?.querySelector<HTMLElement>(`[data-row="${landed}"]`);
+    row?.focus();
+    row?.scrollIntoView({ block: "nearest" });
+  }
+
+  /**
+   * Arrow-key navigation. Handled on the row itself rather than on the
+   * container: the row is the focused, interactive element, so it is the one
+   * that should be listening.
+   */
+  function onKeyDown(event: KeyboardEvent) {
+    const moves: Record<string, (current: number) => number> = {
+      ArrowDown: (current) => current + 1,
+      ArrowUp: (current) => current - 1,
+      PageDown: (current) => current + PAGE,
+      PageUp: (current) => current - PAGE,
+      Home: () => 0,
+      // Clamped to the last row, so this does not need to know how many there
+      // are — which is just as well, since more may still be streaming in.
+      End: () => Number.MAX_SAFE_INTEGER,
+    };
+
+    const move = moves[event.key];
+    if (!move) return;
+
+    event.preventDefault();
+    moveSelection(move);
+  }
+
+  /**
+   * Watch for the end of the list coming into view. The margin asks for more
+   * before the user actually gets there, so scrolling does not stall.
+   */
+  function watchForEnd(element: HTMLDivElement) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          props.graph.loadMore();
+        }
+      },
+      { rootMargin: "800px" },
+    );
+
+    observer.observe(element);
+    onCleanup(() => observer.disconnect());
+  }
+
+  return (
+    <div class="h-full overflow-auto">
+      <Show
+        when={props.graph.rows().length > 0}
+        fallback={
+          <p class="p-6 text-body-md text-on-surface-variant">
+            {props.graph.status() === "loading" ? "Reading history…" : "No commits to show."}
+          </p>
+        }
+      >
+        <ol
+          ref={(element) => (list = element)}
+          // Rows are as wide as their content; the container scrolls to reach
+          // the rest. A graph's width comes from the history, not the window,
+          // so there is no width at which capping would help.
+          class="history-list w-max min-w-full"
+        >
+          <For each={props.graph.rows()}>
+            {(row, index) => (
+              <CommitRow
+                row={row}
+                isSelected={selected() === index()}
+                onSelect={() => setSelected(index())}
+                onKeyDown={onKeyDown}
+              />
+            )}
+          </For>
+        </ol>
+      </Show>
+
+      <div ref={watchForEnd} aria-hidden="true" class="h-px" />
+
+      <Show when={props.graph.status() === "streaming"}>
+        <p class="p-3 text-body-sm text-on-surface-variant">Loading more…</p>
+      </Show>
+    </div>
+  );
+}
diff --git a/src/components/OpenRepository.tsx b/src/components/OpenRepository.tsx
new file mode 100644
index 0000000..f839a1a
--- /dev/null
+++ b/src/components/OpenRepository.tsx
@@ -0,0 +1,49 @@
+import { createSignal } from "solid-js";
+
+/**
+ * Opening a repository by path.
+ *
+ * A plain form, because a native folder picker needs the Tauri dialog plugin
+ * and that is a dependency this change does not need. The picker arrives with
+ * the repository-picker work, along with recent repositories; until then a path
+ * still gets you in, and anything below a repository's root works because the
+ * Rust side searches upwards the way git does.
+ */
+export default function OpenRepository(props: { busy: boolean; onOpen: (path: string) => void }) {
+  const [path, setPath] = createSignal("");
+
+  function onSubmit(event: SubmitEvent) {
+    event.preventDefault();
+
+    const trimmed = path().trim();
+    if (trimmed) props.onOpen(trimmed);
+  }
+
+  return (
+    <form onSubmit={onSubmit} class="ml-auto flex items-center gap-2">
+      <label for="repository-path" class="text-label-lg text-on-surface-variant">
+        Repository
+      </label>
+      <input
+        id="repository-path"
+        name="path"
+        type="text"
+        required
+        spellcheck={false}
+        autocapitalize="off"
+        autocorrect="off"
+        placeholder="/path/to/repository"
+        value={path()}
+        onInput={(event) => setPath(event.currentTarget.value)}
+        class="w-72 rounded-small border border-outline bg-surface px-3 py-1.5 text-body-md text-on-surface focus-visible:outline-2 focus-visible:outline-offset-[-1px] focus-visible:outline-primary"
+      />
+      <button
+        type="submit"
+        disabled={props.busy}
+        class="rounded-large bg-primary px-4 py-2 text-label-lg text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50"
+      >
+        {props.busy ? "Opening…" : "Open"}
+      </button>
+    </form>
+  );
+}
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index ec86281..8304dd2 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -1,12 +1,18 @@
+import { Show } from "solid-js";
+
 /**
  * Status bar along the bottom of the window. The message lives in an
  * `<output>`, which is implicitly a polite live region, so progress reports
- * (fetching, walking history) are announced without stealing focus.
+ * and problems are announced without stealing focus.
  */
-export default function StatusBar() {
+export default function StatusBar(props: { message?: string; isError?: boolean }) {
   return (
-    <footer class="col-span-2 border-t border-outline-variant bg-surface-container-low px-4 py-1 text-body-sm text-on-surface-variant">
-      <output>Ready</output>
+    <footer class="col-span-2 border-t border-outline-variant bg-surface-container-low px-4 py-1 text-body-sm">
+      <output class={props.isError ? "text-error" : "text-on-surface-variant"}>
+        <Show when={props.message} fallback="Ready">
+          {(message) => message()}
+        </Show>
+      </output>
     </footer>
   );
 }
diff --git a/src/lib/format.ts b/src/lib/format.ts
new file mode 100644
index 0000000..96ef1d2
--- /dev/null
+++ b/src/lib/format.ts
@@ -0,0 +1,50 @@
+/** Formatting for display. Uses `Intl`, so no dependency and no locale data. */
+
+const RELATIVE = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+const ABSOLUTE = new Intl.DateTimeFormat(undefined, {
+  dateStyle: "medium",
+  timeStyle: "short",
+});
+
+/** Largest unit first, so the first one that fits is the one to use. */
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ["year", 365 * 24 * 60 * 60],
+  ["month", 30 * 24 * 60 * 60],
+  ["week", 7 * 24 * 60 * 60],
+  ["day", 24 * 60 * 60],
+  ["hour", 60 * 60],
+  ["minute", 60],
+];
+
+/**
+ * "3 days ago", for a committer time in seconds since the epoch.
+ *
+ * Commit dates are usually read as "how long ago", not as a date — the exact
+ * timestamp goes in the `title` and the `datetime` attribute instead.
+ */
+export function relativeTime(seconds: number, now = Date.now()): string {
+  const elapsed = seconds - Math.floor(now / 1000);
+
+  for (const [unit, size] of UNITS) {
+    if (Math.abs(elapsed) >= size) {
+      return RELATIVE.format(Math.round(elapsed / size), unit);
+    }
+  }
+
+  return RELATIVE.format(Math.round(elapsed), "second");
+}
+
+/** The full timestamp, for the tooltip. */
+export function absoluteTime(seconds: number): string {
+  return ABSOLUTE.format(new Date(seconds * 1000));
+}
+
+/** A machine-readable timestamp for `<time datetime>`. */
+export function isoTime(seconds: number): string {
+  return new Date(seconds * 1000).toISOString();
+}
+
+/** The short form of a commit id, as git itself abbreviates it. */
+export function shortId(id: string): string {
+  return id.slice(0, 7);
+}
diff --git a/src/lib/graph.ts b/src/lib/graph.ts
new file mode 100644
index 0000000..5182b93
--- /dev/null
+++ b/src/lib/graph.ts
@@ -0,0 +1,100 @@
+/**
+ * The state behind the history view.
+ *
+ * Owns the stream and the rows it has produced so far, so components can stay
+ * about rendering.
+ */
+
+import { createSignal } from "solid-js";
+
+import { streamGraph, type GraphStream } from "./api";
+import type { GraphRow, RepositoryId } from "./bindings";
+import { isGigitError } from "./bindings";
+
+/**
+ * Rows asked for up front. Comfortably more than a screenful, so the first
+ * scroll does not have to wait for a round trip.
+ */
+const INITIAL_BUDGET = 300;
+
+/** Rows asked for each time the view nears the end of what it has. */
+const TOP_UP = 400;
+
+export type GraphStatus = "idle" | "loading" | "streaming" | "complete" | "failed";
+
+export function createGraphView() {
+  const [rows, setRows] = createSignal<GraphRow[]>([]);
+  const [status, setStatus] = createSignal<GraphStatus>("idle");
+  const [message, setMessage] = createSignal<string | undefined>();
+
+  let stream: GraphStream | undefined;
+  /** Guards against asking for more while a top-up is already in flight. */
+  let waiting = false;
+
+  function receive(event: Parameters<Parameters<typeof streamGraph>[2]>[0]) {
+    switch (event.event) {
+      case "rows": {
+        waiting = false;
+        // `start` is the row index of the batch, so a batch that somehow
+        // arrives out of order still lands in the right place.
+        setRows((current) => {
+          const next = current.slice(0, event.data.start);
+          next.push(...event.data.rows);
+          return next;
+        });
+        break;
+      }
+      case "exhausted": {
+        waiting = false;
+        setStatus("complete");
+        if (event.data.degraded) {
+          setMessage(
+            "This history's dates are skewed enough that some commits may be a row or two out of place.",
+          );
+        }
+        break;
+      }
+      case "failed": {
+        waiting = false;
+        setStatus("failed");
+        setMessage(event.data.message);
+        break;
+      }
+    }
+  }
+
+  /** Start drawing a repository's history from the newest commit. */
+  async function show(id: RepositoryId) {
+    setRows([]);
+    setMessage(undefined);
+    setStatus("loading");
+    waiting = false;
+
+    try {
+      stream = await streamGraph(id, INITIAL_BUDGET, receive);
+      setStatus((current) => (current === "loading" ? "streaming" : current));
+    } catch (error) {
+      setStatus("failed");
+      setMessage(isGigitError(error) ? error.message : String(error));
+    }
+  }
+
+  /**
+   * Ask for more rows. Safe to call on every scroll — it does nothing while a
+   * top-up is already on its way, or once the history is fully drawn.
+   */
+  function loadMore() {
+    if (waiting || !stream || status() !== "streaming") return;
+
+    waiting = true;
+    stream.requestMore(TOP_UP).catch((error: unknown) => {
+      waiting = false;
+      setStatus("failed");
+      setMessage(isGigitError(error) ? error.message : String(error));
+    });
+  }
+
+  return { rows, status, message, show, loadMore };
+}
+
+export type GraphView = ReturnType<typeof createGraphView>;
-- 
2.51.2