From 039a6ff5b2c0a29709123d296969bd2cd4027272 Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Fri, 11 Sep 2026 02:07:23 +0300
Subject: [PATCH] web: pick a spindle and manage CI secrets from repo settings

Signed-off-by: dawn <dawn@tangled.org>
---
 web/src/lib/api/collaborators.ts              |  11 +-
 web/src/lib/api/repoCreationTargets.ts        |  10 +-
 web/src/lib/api/secrets.test.ts               |  56 ++++++
 web/src/lib/api/secrets.ts                    |  52 +++++
 .../[repo]/settings/pipelines/+page.svelte    | 189 +++++++++++-------
 .../[repo]/settings/pipelines/+page.ts        |  16 ++
 .../pipelines/secrets/new/+page.svelte        |  78 ++++----
 7 files changed, 294 insertions(+), 118 deletions(-)
 create mode 100644 web/src/lib/api/secrets.test.ts
 create mode 100644 web/src/lib/api/secrets.ts
 create mode 100644 web/src/routes/[handle]/[repo]/settings/pipelines/+page.ts

diff --git a/web/src/lib/api/collaborators.ts b/web/src/lib/api/collaborators.ts
index df5792c15..206e74a2f 100644
--- a/web/src/lib/api/collaborators.ts
+++ b/web/src/lib/api/collaborators.ts
@@ -27,14 +27,9 @@ export const listCollaborators = async (
 		const page = { ...init, max: MAX_COLLABORATORS };
 		const [accepted, invited] = await Promise.all([
 			collect(ctx, "sh.tangled.repo.listCollaborators", { subject, limit: 100 }, page),
-			collect(
-				ctx,
-				"sh.tangled.repo.listCollaboratorInvites",
-				{ subject, limit: 100 },
-				page
-			)
-			// fail open; knots and viewers without invite support reject the lookup
-			.catch(() => [])
+			collect(ctx, "sh.tangled.repo.listCollaboratorInvites", { subject, limit: 100 }, page)
+				// fail open; knots and viewers without invite support reject the lookup
+				.catch(() => [])
 		]);
 		const seen = new Set([repo.ownerDid]);
 		for (const item of accepted) {
diff --git a/web/src/lib/api/repoCreationTargets.ts b/web/src/lib/api/repoCreationTargets.ts
index 2c48ee1a7..48290f377 100644
--- a/web/src/lib/api/repoCreationTargets.ts
+++ b/web/src/lib/api/repoCreationTargets.ts
@@ -51,12 +51,12 @@ const targetNames = (
 	return [...names].sort((a, b) => a.localeCompare(b));
 };
 
-export const availableKnots = async (ctx: BobbinContext, did: Did): Promise<string[]> => {
+export const availableKnots = async (ctx: BobbinContext, did: string): Promise<string[]> => {
 	const [owned, memberships] = await Promise.all([
 		allPages((cursor) =>
 			ok(
 				ctx.xrpc.call(listKnotsSchema, {
-					params: { subject: did, limit: 1_000, cursor }
+					params: { subject: did as Did, limit: 1_000, cursor }
 				})
 			)
 		),
@@ -71,19 +71,19 @@ export const availableKnots = async (ctx: BobbinContext, did: Did): Promise<stri
 	return targetNames(owned, memberships, knotDomain);
 };
 
-export const availableSpindles = async (ctx: BobbinContext, did: Did): Promise<string[]> => {
+export const availableSpindles = async (ctx: BobbinContext, did: string): Promise<string[]> => {
 	const [owned, memberships] = await Promise.all([
 		allPages((cursor) =>
 			ok(
 				ctx.xrpc.call(listSpindlesSchema, {
-					params: { subject: did, limit: 1_000, cursor }
+					params: { subject: did as Did, limit: 1_000, cursor }
 				})
 			)
 		),
 		allPages((cursor) =>
 			ok(
 				ctx.xrpc.call(listSpindleMembersSchema, {
-					params: { subject: did, limit: 1_000, cursor }
+					params: { subject: did as Did, limit: 1_000, cursor }
 				})
 			)
 		)
diff --git a/web/src/lib/api/secrets.test.ts b/web/src/lib/api/secrets.test.ts
new file mode 100644
index 000000000..3cd468bcd
--- /dev/null
+++ b/web/src/lib/api/secrets.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from "vitest";
+import type { ResourceUri } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+
+vi.mock("$lib/auth/agent", () => ({
+	createClient: () => ({}),
+	mintServiceAuth: async () => "token",
+	serviceDidForHost: (host: string) => `did:web:${host}`,
+	hostForServiceDid: () => null
+}));
+
+const { addSecret, listSecrets, removeSecret } = await import("$lib/api/secrets");
+
+const agent = { sub: "did:plc:owner" } as unknown as OAuthUserAgent;
+const repo = "at://did:plc:owner/sh.tangled.repo/core" as ResourceUri;
+
+const spindle = (body: unknown) => {
+	const fetch = vi.fn<typeof globalThis.fetch>(
+		async () =>
+			new Response(JSON.stringify(body), {
+				status: 200,
+				headers: { "content-type": "application/json" }
+			})
+	);
+	vi.stubGlobal("fetch", fetch);
+	return fetch;
+};
+
+describe("pipeline secrets", () => {
+	it("asks the repo's spindle over https and tolerates a null list", async () => {
+		const fetch = spindle({ secrets: null });
+
+		await expect(listSecrets(agent, "spindle.test", repo)).resolves.toEqual([]);
+		const asked = new URL(String(fetch.mock.calls[0][0]));
+		expect(new Headers(fetch.mock.calls[0][1]?.headers).get("authorization")).toBe(
+			"Bearer token"
+		);
+		expect(asked.origin).toBe("https://spindle.test");
+		expect(asked.pathname).toBe("/xrpc/sh.tangled.repo.listSecrets");
+		expect(asked.searchParams.get("repo")).toBe(repo);
+	});
+
+	it("keys writes by the repo record uri", async () => {
+		const fetch = spindle({});
+
+		await addSecret(agent, "https://spindle.test", repo, "API_KEY", "value");
+		expect(JSON.parse(String(fetch.mock.calls[0][1]?.body))).toEqual({
+			repo,
+			key: "API_KEY",
+			value: "value"
+		});
+
+		await removeSecret(agent, "https://spindle.test", repo, "API_KEY");
+		expect(JSON.parse(String(fetch.mock.calls[1][1]?.body))).toEqual({ repo, key: "API_KEY" });
+	});
+});
diff --git a/web/src/lib/api/secrets.ts b/web/src/lib/api/secrets.ts
new file mode 100644
index 000000000..9f30dce20
--- /dev/null
+++ b/web/src/lib/api/secrets.ts
@@ -0,0 +1,52 @@
+import { ok } from "@atcute/client";
+import type { ResourceUri } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { serviceClient } from "$lib/api/_request";
+import { mainSchema as addSecretSchema } from "$lib/api/lexicons/types/sh/tangled/repo/addSecret";
+import {
+	mainSchema as listSecretsSchema,
+	type Secret
+} from "$lib/api/lexicons/types/sh/tangled/repo/listSecrets";
+import { mainSchema as removeSecretSchema } from "$lib/api/lexicons/types/sh/tangled/repo/removeSecret";
+
+export type { Secret };
+
+export const listSecrets = async (
+	agent: OAuthUserAgent,
+	spindle: string,
+	repo: string
+): Promise<Secret[]> => {
+	const { secrets } = await ok(
+		serviceClient(agent, spindle).xrpc.call(listSecretsSchema, {
+			params: { repo: repo as ResourceUri }
+		})
+	);
+	return secrets ?? [];
+};
+
+export const addSecret = async (
+	agent: OAuthUserAgent,
+	spindle: string,
+	repo: string,
+	key: string,
+	value: string
+): Promise<void> => {
+	await ok(
+		serviceClient(agent, spindle).xrpc.call(addSecretSchema, {
+			input: { repo: repo as ResourceUri, key, value }
+		})
+	);
+};
+
+export const removeSecret = async (
+	agent: OAuthUserAgent,
+	spindle: string,
+	repo: string,
+	key: string
+): Promise<void> => {
+	await ok(
+		serviceClient(agent, spindle).xrpc.call(removeSecretSchema, {
+			input: { repo: repo as ResourceUri, key }
+		})
+	);
+};
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index 508a5ff0a..9040f444b 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -1,118 +1,169 @@
 <script lang="ts">
+	import { invalidateAll } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction, createLoad } from "$lib/action.svelte";
+	import { saveRepoRecord } from "$lib/api/repoSettings";
+	import { listSecrets, removeSecret, type Secret } from "$lib/api/secrets";
+	import { getAuth } from "$lib/auth.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Select from "$lib/components/ui/Select.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsHeader from "$lib/components/settings/SettingsHeader.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import SettingsSaveBar from "$lib/components/settings/SettingsSaveBar.svelte";
 	import DocsButton from "$lib/components/settings/DocsButton.svelte";
 	import Plus from "$icon/plus";
 	import Trash from "$icon/trash-2";
 
 	let { data } = $props();
 
+	const auth = getAuth();
+	const repo = $derived(data.repo);
+	const owner = $derived(data.access.canAdminister);
+	const base = $derived(`/${repo.ownerHandle}/${repo.name}/settings`);
 	const path = (p: string) => resolve(p as "/");
 
-	// mocked — spindle selection and secrets are not wired up yet
-	let spindle = $state("spindle.tangled.sh");
-	const spindles = $derived([spindle, "spindle.user.tld"]);
+	const NO_SPINDLE = "";
+	const current = $derived(repo.spindle ?? NO_SPINDLE);
+	let picked = $state<string>();
+	const chosen = $derived(picked ?? current);
+	const dirty = $derived(chosen !== current);
+	const reset = () => (picked = undefined);
 
-	let secrets = $state([
-		{
-			name: "generic_secret",
-			added: "Added 5 hours ago by",
-			by: ""
-		}
-	]);
-
-	$effect(() => {
-		void Promise.resolve(data.repo).then((r) => {
-			if (r.spindle) spindle = r.spindle;
-			for (const s of secrets) {
-				s.by = r.ownerHandle;
-			}
+	const save = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await saveRepoRecord(agent, data.publicConfig.bobbinUrl, data.record, {
+			spindle: chosen || undefined
 		});
+		await invalidateAll();
+	});
+
+	// spindle service auth needs the browser agent, so this cannot load in +page.ts
+	const secrets = createLoad(async (): Promise<Secret[] | null> => {
+		const agent = auth.agent;
+		const spindle = repo.spindle;
+		if (!agent || !spindle) return null;
+		return listSecrets(agent, spindle, repo.uri);
 	});
 
-	const remove = (name: string) => {
-		secrets = secrets.filter((s) => s.name !== name);
-	};
+	const drop = createAction(async (key: string) => {
+		const agent = auth.agent;
+		const spindle = repo.spindle;
+		if (!agent || !spindle) return;
+		await removeSecret(agent, spindle, repo.uri, key);
+		secrets.update((rows) => (rows ? rows.filter((row) => row.key !== key) : rows));
+	});
 </script>
 
-<Pending>
-	{#snippet skeleton()}
-		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
-	{/snippet}
-	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
-	{@const repo = await data.repo}
-	{@const base = `/${repo.ownerHandle}/${repo.name}/settings`}
-	<SettingsHeader title="Pipelines" />
+<SettingsHeader title="Pipelines" />
+
+<ErrorAlert label={save.error ?? drop.error ?? secrets.error} />
 
-	<SettingsBlock
-		title="Spindle"
-		description={[
-			"Choose a spindle to execute your workflows on. Only repository owners can configure spindles.",
-			"Spindles can be selfhosted."
-		]}
-		separator
-	>
-		{#snippet action()}
+<SettingsBlock
+	title="Spindle"
+	description={[
+		"Choose a spindle to execute your workflows on. Only repository owners can configure spindles.",
+		"Spindles can be selfhosted."
+	]}
+	separator
+>
+	{#snippet action()}
+		<div class="flex items-center gap-4">
+			{#if owner}
+				<SettingsSaveBar {dirty} onreset={reset} onsave={save.run} />
+			{/if}
 			<DocsButton href="https://docs.tangled.org/spindles" />
-		{/snippet}
+		</div>
+	{/snippet}
 
-		<SettingsList>
-			<SettingsRow title="Spindle" stack>
-				<Select
-					bind:value={spindle}
-					options={spindles.map((option) => ({ value: option }))}
-					label="Spindle"
-					class="w-full sm:w-80"
-				/>
-			</SettingsRow>
-		</SettingsList>
-	</SettingsBlock>
+	<SettingsList>
+		<SettingsRow title="Spindle" stack>
+			{#if owner}
+				<Pending>
+					{#snippet skeleton()}
+						<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+					{/snippet}
+					{@const spindles = await data.spindles}
+					{@const options = [...new Set([repo.spindle, ...spindles])].filter(
+						(option) => option !== undefined
+					)}
+					<Select
+						bind:value={() => chosen, (value) => (picked = value)}
+						options={[
+							{ value: NO_SPINDLE, label: "No spindle" },
+							...options.map((option) => ({ value: option }))
+						]}
+						label="Spindle"
+						class="w-full sm:w-80"
+					/>
+				</Pending>
+			{:else}
+				<span class="typography-monospace-regular text-foreground-default">
+					{repo.spindle ?? "No spindle"}
+				</span>
+			{/if}
+		</SettingsRow>
+	</SettingsList>
+</SettingsBlock>
 
-	<SettingsBlock
-		title="Secrets"
-		description={[
-			"Secrets are accessible in workflow runs via environment variables.",
-			"Anyone with collaborator access to this repository can add and use secrets in workflow runs."
-		]}
-		separator
-	>
-		{#snippet action()}
-			<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button>
-		{/snippet}
+<SettingsBlock
+	title="Secrets"
+	description={[
+		"Secrets are accessible in workflow runs via environment variables.",
+		"Anyone with collaborator access to this repository can add and use secrets in workflow runs."
+	]}
+	separator
+>
+	{#snippet action()}
+		<Button icon={Plus} disabled={!repo.spindle} href={path(`${base}/pipelines/secrets/new`)}
+			>Add secret</Button
+		>
+	{/snippet}
 
+	{#if !repo.spindle}
+		<SettingsEmpty message="Choose a spindle to store secrets on" />
+	{:else if secrets.loading}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+	{:else if secrets.error}
+		<SettingsEmpty message="Couldn't reach {repo.spindle}" />
+	{:else if (secrets.data ?? []).length === 0}
+		<SettingsEmpty message="No secrets yet" />
+	{:else}
 		<SettingsList>
-			{#each secrets as secret (secret.name)}
+			{#each secrets.data ?? [] as secret (secret.key)}
 				<SettingsRow stack>
 					{#snippet label()}
 						<span class="flex min-w-0 flex-col gap-1">
 							<span
 								class="typography-monospace-regular break-all text-foreground-default"
 							>
-								{secret.name}
+								{secret.key}
 							</span>
 							<span
 								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
 							>
-								{secret.added}
-								<Avatar handle={secret.by} size="small" />
-								{secret.by}
+								Added <TimeAgo value={secret.createdAt} /> by
+								<Avatar did={secret.createdBy} size="small" />
 							</span>
 						</span>
 					{/snippet}
-					<Button variant="danger" icon={Trash} onclick={() => remove(secret.name)}
-						>Delete</Button
+					<Button
+						variant="danger"
+						icon={Trash}
+						loading={drop.loading && drop.args?.[0] === secret.key}
+						onclick={() => drop.run(secret.key)}>Delete</Button
 					>
 				</SettingsRow>
 			{/each}
 		</SettingsList>
-	</SettingsBlock>
-</Pending>
+	{/if}
+</SettingsBlock>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.ts b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.ts
new file mode 100644
index 000000000..72812c807
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.ts
@@ -0,0 +1,16 @@
+import { createBobbinClient } from "$lib/api/client";
+import { stream } from "$lib/api/load";
+import { availableSpindles } from "$lib/api/repoCreationTargets";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const viewerDid = parent.auth?.did;
+	if (!viewerDid) return { spindles: [] };
+
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
+	return { spindles: stream(availableSpindles(ctx, viewerDid).catch(() => [])) };
+};
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
index 1fb97e932..ae4b232cd 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction } from "$lib/action.svelte";
+	import { addSecret } from "$lib/api/secrets";
+	import { getAuth } from "$lib/auth.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
-	import Pending from "$lib/components/ui/Pending.svelte";
-	import Bones from "$lib/components/ui/Bones.svelte";
-	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -15,43 +16,48 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
+	const repo = $derived(data.repo);
+	const back = $derived(`/${repo.ownerHandle}/${repo.name}/settings/pipelines`);
+
 	let name = $state("");
 	let value = $state("");
 	const valid = $derived(name.trim().length > 0 && value.length > 0);
 
-	// mocked — secrets are not wired up yet
-	const submit = () => {
-		void Promise.resolve(data.repo).then((repo) => {
-			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings/pipelines` as "/"));
-		});
-	};
+	const add = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !valid) return;
+		if (!repo.spindle) throw new Error("This repository has no spindle to store secrets on.");
+		await addSecret(agent, repo.spindle, repo.uri, name.trim(), value);
+		await goto(resolve(back as "/"), { invalidateAll: true });
+	});
 </script>
 
-<Pending>
-	{#snippet skeleton()}
-		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
-	{/snippet}
-	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
-	{@const repo = await data.repo}
-	{@const back = `/${repo.ownerHandle}/${repo.name}/settings/pipelines`}
-	<DrillDown
-		backLabel="Pipelines"
-		backHref={back}
-		title="Add secret"
-		description="Secrets are available as environment variables in the workflow."
-	>
-		<SettingsList padding="small">
-			<FormRow label="Name" for="secret-name">
-				<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
-			</FormRow>
-			<FormRow label="Value" for="secret-value">
-				<Input id="secret-value" bind:value placeholder="very important secret" />
-			</FormRow>
-		</SettingsList>
+<DrillDown
+	backLabel="Pipelines"
+	backHref={back}
+	title="Add secret"
+	description="Secrets are available as environment variables in the workflow."
+>
+	<ErrorAlert label={add.error} />
+
+	<SettingsList padding="small">
+		<FormRow label="Name" for="secret-name">
+			<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
+		</FormRow>
+		<FormRow label="Value" for="secret-value">
+			<Input id="secret-value" bind:value placeholder="very important secret" />
+		</FormRow>
+	</SettingsList>
 
-		<FormActions>
-			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-		</FormActions>
-	</DrillDown>
-</Pending>
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={!valid}
+			loading={add.loading}
+			onclick={add.run}>Add</Button
+		>
+	</FormActions>
+</DrillDown>
-- 
2.51.2