From e887451c6b72071508e6bb3d85732bee7595d90e Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 10:33:03 +0200
Subject: [PATCH] web/components/repo: show pipeline status in the commit list

Every commit row on the repo overview now ends with the pipeline symbol,
the way the appview's repo index does. Only repos with a spindle get one.

The data is mocked for now, same as the pipelines tab. Bobbin's
listPipelines still needs wiring up before any of it is real.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/api/repoIndex.ts                  |  6 +++
 .../components/repo/CommitList.stories.svelte |  4 +-
 web/src/lib/components/repo/CommitList.svelte | 36 ++++++++++++---
 .../repo/RepoIndexView.stories.svelte         | 46 ++++++++++++++-----
 .../lib/components/repo/RepoIndexView.svelte  |  1 +
 web/src/lib/components/repo/pipelines/mock.ts | 15 ++++++
 6 files changed, 90 insertions(+), 18 deletions(-)

diff --git a/web/src/lib/api/repoIndex.ts b/web/src/lib/api/repoIndex.ts
index 77269024..e8bfb9d3 100644
--- a/web/src/lib/api/repoIndex.ts
+++ b/web/src/lib/api/repoIndex.ts
@@ -18,6 +18,7 @@ import {
 	toTreeCommitSummary,
 	toTreeEntrySummary
 } from "$lib/api/repo";
+import { pipelinesByCommitHash } from "$lib/components/repo/pipelines/mock";
 import { renderDocument } from "$lib/markup";
 import type { LanguageSlice, RepoInfo } from "$lib/components/repo/types";
 // `/tree/{ref}` is this same page at another ref, so they share a load
@@ -167,6 +168,11 @@ export const loadRepoIndex = async (
 		readmeHtml,
 		commits,
 		tagsByCommit: tagsByCommitHash(commits, tags),
+		// TODO: mocked, like the pipelines tab. only repos with a spindle run CI,
+		// so the appview does not even ask for statuses without one
+		pipelinesByCommit: parent.repo.spindle
+			? pipelinesByCommitHash(commits.map((commit) => commit.hash))
+			: {},
 		totalCommits: results.log.value?.total ?? commits.length,
 		branches: branches.slice(0, BRANCH_LIMIT),
 		totalBranches: branches.length,
diff --git a/web/src/lib/components/repo/CommitList.stories.svelte b/web/src/lib/components/repo/CommitList.stories.svelte
index 178d6ce1..9bd3d3b9 100644
--- a/web/src/lib/components/repo/CommitList.stories.svelte
+++ b/web/src/lib/components/repo/CommitList.stories.svelte
@@ -2,6 +2,7 @@
 	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
 	import { expect } from "storybook/test";
 	import CommitList from "./CommitList.svelte";
+	import { pipelinesByCommitHash } from "./pipelines/mock";
 	import type { CommitSummary } from "./types";
 
 	const commits: CommitSummary[] = [
@@ -47,7 +48,8 @@
 			commits,
 			tagsByCommit: {
 				"0123456789abcdef0123456789abcdef01234567": ["v1.0.0"]
-			}
+			},
+			pipelinesByCommit: pipelinesByCommitHash(commits.map((commit) => commit.hash))
 		}
 	});
 </script>
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index a2140507..24531e0e 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -4,16 +4,26 @@
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import User from "$lib/components/ui/User.svelte";
-	import type { CommitSummary } from "./types";
+	import Separator from "../ui/Separator.svelte";
+	import PipelineWorkflows from "./pipelines/PipelineWorkflows.svelte";
+	import type { CommitSummary, PipelineSummary } from "./types";
 
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
 		commits: CommitSummary[];
 		tagsByCommit?: Record<string, string[]>;
+		/** only repos with a spindle have any, and only some commits get one */
+		pipelinesByCommit?: Record<string, PipelineSummary>;
 	}
 
-	let { ownerHandle, repoName, commits, tagsByCommit = {} }: Props = $props();
+	let {
+		ownerHandle,
+		repoName,
+		commits,
+		tagsByCommit = {},
+		pipelinesByCommit = {}
+	}: Props = $props();
 
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 	let expanded = $state<Record<string, boolean>>({});
@@ -43,7 +53,9 @@
 			</div>
 
 			{#if commit.body && expanded[commit.hash]}
-				<p class="mt-1 pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted">{commit.body}</p>
+				<p class="mt-1 pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted">
+					{commit.body}
+				</p>
 			{/if}
 
 			<div
@@ -63,9 +75,21 @@
 					<span aria-hidden="true">&middot;</span>
 					<TimeAgo value={commit.when} />
 				{/if}
-				{#each tagsByCommit[commit.hash] ?? [] as name (name)}
-					<Tag color="gray" class="font-mono">{name}</Tag>
-				{/each}
+				{#if (tagsByCommit[commit.hash] ?? []).length > 0}
+					<Separator variant="dot" />
+					{#each tagsByCommit[commit.hash] as name (name)}
+						<Tag color="gray" class="font-mono">{name}</Tag>
+					{/each}
+				{/if}
+				{#if pipelinesByCommit[commit.hash]}
+					<Separator variant="dot" />
+					<PipelineWorkflows
+						{ownerHandle}
+						{repoName}
+						pipeline={pipelinesByCommit[commit.hash]}
+						variant="symbol"
+					/>
+				{/if}
 			</div>
 		</div>
 	{/each}
diff --git a/web/src/lib/components/repo/RepoIndexView.stories.svelte b/web/src/lib/components/repo/RepoIndexView.stories.svelte
index 1f641705..84149b4d 100644
--- a/web/src/lib/components/repo/RepoIndexView.stories.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.stories.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import type { loadRepoIndex } from "$lib/api/repoIndex";
+	import { pipelinesByCommitHash } from "./pipelines/mock";
 	import StoryAuthProvider from "../../../../.storybook/StoryAuthProvider.svelte";
 	import RepoIndexView from "./RepoIndexView.svelte";
 	import type { RepoInfo } from "./types";
@@ -16,6 +17,36 @@
 		defaultBranch: "main"
 	};
 
+	const commits = [
+		{
+			hash: "0123456789abcdef0123456789abcdef01234567",
+			shortHash: "01234567",
+			subject: "add the repository index",
+			body: "",
+			authorName: "dawn",
+			authorEmail: "dawn@example.test",
+			when: "2026-07-28T09:00:00Z"
+		},
+		{
+			hash: "89abcdef0123456789abcdef0123456789abcdef",
+			shortHash: "89abcdef",
+			subject: "sort tree entries with directories first",
+			body: "",
+			authorName: "dawn",
+			authorEmail: "dawn@example.test",
+			when: "2026-07-27T17:20:00Z"
+		},
+		{
+			hash: "456789abcdef0123456789abcdef0123456789ab",
+			shortHash: "456789ab",
+			subject: "drop the unused ref cache",
+			body: "",
+			authorName: "dawn",
+			authorEmail: "dawn@example.test",
+			when: "2026-07-27T11:05:00Z"
+		}
+	];
+
 	const data = {
 		ref: "main",
 		availability: "ok",
@@ -25,18 +56,10 @@
 		],
 		readme: { filename: "README.md", contents: "# tangled" },
 		readmeHtml: "<h1>tangled</h1>",
-		commits: [
-			{
-				hash: "0123456789abcdef0123456789abcdef01234567",
-				shortHash: "01234567",
-				subject: "add the repository index",
-				body: "",
-				authorName: "dawn",
-				authorEmail: "dawn@example.test",
-				when: "2026-07-28T09:00:00Z"
-			}
-		],
+		commits,
 		tagsByCommit: {},
+		// every third commit is left without a run, so all three cases show
+		pipelinesByCommit: pipelinesByCommitHash(commits.map((commit) => commit.hash)),
 		totalCommits: 42,
 		branches: [
 			{
@@ -69,6 +92,7 @@
 		readmeHtml: null,
 		commits: [],
 		tagsByCommit: {},
+		pipelinesByCommit: {},
 		totalCommits: 0,
 		branches: [],
 		totalBranches: 0,
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index 2b38f90a..97552513 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -95,6 +95,7 @@
 							repoName={repo.name}
 							commits={data.commits}
 							tagsByCommit={data.tagsByCommit}
+							pipelinesByCommit={data.pipelinesByCommit}
 						/>
 					</div>
 				{/if}
diff --git a/web/src/lib/components/repo/pipelines/mock.ts b/web/src/lib/components/repo/pipelines/mock.ts
index eaf706d1..38b87d0e 100644
--- a/web/src/lib/components/repo/pipelines/mock.ts
+++ b/web/src/lib/components/repo/pipelines/mock.ts
@@ -86,3 +86,18 @@ export const pipelines: PipelineSummary[] = [
 		]
 	}
 ];
+
+/**
+ * fake per-commit runs for the repo overview's commit list. the appview asks its
+ * own /commit-statuses endpoint for these; bobbin's equivalent is
+ * sh.tangled.pipeline.listPipelines, the same call the pipelines tab still owes.
+ * every third commit is left without a run so the gap renders too.
+ */
+export const pipelinesByCommitHash = (hashes: string[]): Record<string, PipelineSummary> => {
+	const byHash: Record<string, PipelineSummary> = {};
+	hashes.forEach((hash, index) => {
+		if (index % 3 === 2) return;
+		byHash[hash] = { ...pipelines[index % pipelines.length], sha: hash };
+	});
+	return byHash;
+};
-- 
2.51.2