diff --git a/web/src/lib/api/spindle.ts b/web/src/lib/api/spindle.ts
new file mode 100644
index 00000000..ee85c8ac
--- /dev/null
+++ b/web/src/lib/api/spindle.ts
@@ -0,0 +1,58 @@
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import {
+	createAppviewClient,
+	authedGet,
+	authedPost,
+	type AppviewContext
+} from "./appview";
+import type { XrpcRequestInit } from "./client";
+
+// The spindle is a service-auth'd xrpc host just like the appview: the browser
+// mints a per-call token with aud = did:web:<spindle host> and lxm = the method.
+// Secrets live on the spindle (the CI runner needs them) and are keyed by the
+// repo's at-uri, which the spindle resolves to a repoDid.
+export type SpindleContext = AppviewContext;
+
+export const createSpindleClient = (
+	host: string,
+	agent: OAuthUserAgent,
+	fetch?: typeof globalThis.fetch
+): SpindleContext => createAppviewClient({ apiUrl: `https://${host}`, agent, fetch });
+
+// mirrors sh.tangled.repo.listSecrets#secret — values are never returned.
+export interface Secret {
+	repo: string;
+	key: string;
+	createdAt: string;
+	createdBy: string;
+}
+
+const LIST_SECRETS = "sh.tangled.repo.listSecrets";
+const ADD_SECRET = "sh.tangled.repo.addSecret";
+const REMOVE_SECRET = "sh.tangled.repo.removeSecret";
+
+export const listSecrets = async (
+	ctx: SpindleContext,
+	repoUri: string,
+	init?: XrpcRequestInit
+): Promise<Secret[]> => {
+	const res = await authedGet<{ secrets?: Secret[] }>(ctx, LIST_SECRETS, { repo: repoUri }, init);
+	return res.secrets ?? [];
+};
+
+export const addSecret = (
+	ctx: SpindleContext,
+	repoUri: string,
+	key: string,
+	value: string,
+	init?: XrpcRequestInit
+): Promise<void> =>
+	authedPost(ctx, ADD_SECRET, { repo: repoUri, key, value }, init).then(() => undefined);
+
+export const removeSecret = (
+	ctx: SpindleContext,
+	repoUri: string,
+	key: string,
+	init?: XrpcRequestInit
+): Promise<void> =>
+	authedPost(ctx, REMOVE_SECRET, { repo: repoUri, key }, init).then(() => undefined);
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index daf19d3b..ab7fad5f 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createSpindleClient, listSecrets, removeSecret, type Secret } from "$lib/api/spindle";
+	import { createLoad, createAction } from "$lib/action.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Select from "$lib/components/ui/Select.svelte";
+	import Skeleton from "$lib/components/ui/Skeleton.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
 	import DocsButton from "$lib/components/settings/DocsButton.svelte";
@@ -13,23 +19,39 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
 	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
 	const path = (p: string) => resolve(p as "/");
 
-	// mocked — spindle selection and secrets are not wired up yet
-	let spindle = $state(untrack(() => data.repo.spindle) ?? "spindle.tangled.sh");
-	const spindles = $derived([spindle, "spindle.user.tld"]);
+	const spindleHost = $derived(data.repo.spindle);
+	const repoUri = $derived(data.repo.uri);
 
-	let secrets = $state([
-		{
-			name: "generic_secret",
-			added: "Added 5 hours ago by",
-			by: untrack(() => data.repo.ownerHandle)
-		}
-	]);
+	// spindle selection is stored on the repo record, not the spindle — changing
+	// it is a pds write, out of scope here. show the configured spindle read-only.
+	const spindleOptions = $derived(spindleHost ? [{ value: spindleHost }] : []);
 
-	const remove = (name: string) => {
-		secrets = secrets.filter((s) => s.name !== name);
+	// secrets live on the spindle; load them if one is configured.
+	const loaded = createLoad(async (): Promise<Secret[]> => {
+		const agent = auth.agent;
+		const host = spindleHost;
+		const uri = repoUri;
+		if (!agent || !host || !uri) return [];
+		return listSecrets(createSpindleClient(host, agent), uri);
+	});
+
+	const remove = createAction(async (secret: Secret) => {
+		const agent = auth.agent;
+		const host = spindleHost;
+		const uri = repoUri;
+		if (!agent || !host || !uri) throw new Error("No spindle is configured for this repository.");
+		await removeSecret(createSpindleClient(host, agent), uri, secret.key);
+		loaded.update((list) => list.filter((s) => s.key !== secret.key));
+	});
+
+	const confirmRemove = (secret: Secret) => {
+		if (remove.loading) return;
+		if (!confirm(`Delete the secret ${secret.key}?`)) return;
+		void remove.run(secret);
 	};
 </script>
 
@@ -51,12 +73,17 @@
 
 	<SettingsList>
 		<SettingsRow title="Spindle" stack>
-			<Select
-				bind:value={spindle}
-				options={spindles.map((option) => ({ value: option }))}
-				label="Spindle"
-				class="w-full sm:w-80"
-			/>
+			{#if spindleHost}
+				<Select
+					value={spindleHost}
+					options={spindleOptions}
+					label="Spindle"
+					disabled
+					class="w-full sm:w-80"
+				/>
+			{:else}
+				<SettingsEmpty message="No spindle configured for this repository." />
+			{/if}
 		</SettingsRow>
 	</SettingsList>
 </SettingsBlock>
@@ -70,28 +97,61 @@
 	separator
 >
 	{#snippet action()}
-		<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button>
+		<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)} disabled={!spindleHost}>
+			Add secret
+		</Button>
 	{/snippet}
 
-	<SettingsList>
-		{#each secrets as secret (secret.name)}
-			<SettingsRow stack>
-				{#snippet label()}
-					<span class="flex min-w-0 flex-col gap-1">
-						<span class="font-mono typography-monospace-regular break-all text-foreground-default">
-							{secret.name}
-						</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}
+	{#if loaded.error}
+		<ErrorAlert label={loaded.error} />
+	{/if}
+	{#if remove.error}
+		<ErrorAlert label={remove.error} />
+	{/if}
+
+	{#if !spindleHost}
+		<SettingsEmpty message="Configure a spindle to manage secrets." />
+	{:else if loaded.loading}
+		<SettingsList>
+			{#each [0, 1] as row (row)}
+				<div class="flex w-full items-center justify-between gap-4">
+					<div class="flex flex-col gap-1.5">
+						<Skeleton class="h-4 w-40 rounded-sm" />
+						<Skeleton class="h-3 w-48 rounded-sm" />
+					</div>
+					<Skeleton class="h-8 w-20 shrink-0 rounded-sm" />
+				</div>
+			{/each}
+		</SettingsList>
+	{:else if (loaded.data?.length ?? 0) === 0}
+		<SettingsEmpty message="No secrets yet" />
+	{:else if loaded.data}
+		<SettingsList>
+			{#each loaded.data as secret (secret.key)}
+				<SettingsRow stack>
+					{#snippet label()}
+						<span class="flex min-w-0 flex-col gap-1">
+							<span class="typography-monospace-regular font-mono break-all text-foreground-default">
+								{secret.key}
+							</span>
+							<span
+								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+							>
+								Added <TimeAgo value={secret.createdAt} variant="full" />
+								<Avatar did={secret.createdBy} size="small" />
+							</span>
 						</span>
-					</span>
-				{/snippet}
-				<Button variant="danger" icon={Trash} onclick={() => remove(secret.name)}>Delete</Button>
-			</SettingsRow>
-		{/each}
-	</SettingsList>
+					{/snippet}
+					<Button
+						variant="danger"
+						icon={Trash}
+						loading={remove.loading && remove.args?.[0].key === secret.key}
+						onclick={() => confirmRemove(secret)}
+					>
+						Delete
+					</Button>
+				</SettingsRow>
+			{/each}
+		</SettingsList>
+	{/if}
 </SettingsBlock>
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 38944be7..d1c9d4c3 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,8 +1,12 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createSpindleClient, addSecret } from "$lib/api/spindle";
+	import { createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -12,14 +16,23 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
 	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/pipelines`);
+	const spindleHost = $derived(data.repo.spindle);
+	const repoUri = $derived(data.repo.uri);
 
 	let name = $state("");
 	let value = $state("");
-	const valid = $derived(name.trim().length > 0 && value.length > 0);
+	const valid = $derived(name.trim().length > 0 && value.length > 0 && !!spindleHost);
 
-	// mocked — secrets are not wired up yet
-	const submit = () => goto(resolve(back as "/"));
+	const create = createAction(async () => {
+		const agent = auth.agent;
+		const host = spindleHost;
+		const uri = repoUri;
+		if (!agent || !host || !uri) throw new Error("No spindle is configured for this repository.");
+		await addSecret(createSpindleClient(host, agent), uri, name.trim(), value);
+		await goto(resolve(back as "/"));
+	});
 </script>
 
 <DrillDown
@@ -28,6 +41,10 @@
 	title="Add secret"
 	description="Secrets are available as environment variables in the workflow."
 >
+	{#if create.error}
+		<ErrorAlert label={create.error} />
+	{/if}
+
 	<SettingsList padding="tight">
 		<FormRow label="Name" for="secret-name">
 			<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
@@ -39,6 +56,14 @@
 
 	<FormActions>
 		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			loading={create.loading}
+			disabled={!valid}
+			onclick={create.run}
+		>
+			Add
+		</Button>
 	</FormActions>
 </DrillDown>