feat: add run visibility and refactor permission system

Author: lkstrp

frontend/app/src/lib/api/client.ts

@@ -15,6 +15,7 @@ import type {
 	NetworkFilters,
 	NetworkUpdate,
 	OutputFile,
+	Visibility,
 	PaginatedResponse,
 	Workflow,
 } from "$lib/types.js";
@@ -126,7 +127,7 @@ export const networks = {
 	async delete(id: string): Promise<void> {
 		return request<void>(`/networks/${id}`, { method: 'DELETE' });
 	},
-	async updateVisibility(id: string, visibility: "public" | "private"): Promise<Network> {
+	async updateVisibility(id: string, visibility: Visibility): Promise<Network> {
 		return request<Network>(`/networks/${id}`, {
 			method: 'PATCH',
 			body: JSON.stringify({ visibility })
@@ -277,6 +278,12 @@ export const runs = {
 	async remove(id: string): Promise<void> {
 		return request<void>(`/runs/${id}`, { method: 'DELETE' });
 	},
+	async updateVisibility(id: string, visibility: Visibility): Promise<RunSummary> {
+		return request<RunSummary>(`/runs/${id}`, {
+			method: 'PATCH',
+			body: JSON.stringify({ visibility })
+		});
+	},
 	logsUrl(id: string): string {
 		return `${API_BASE}/runs/${id}/logs`;
 	},
@@ -370,6 +377,24 @@ export const admin = {
 		return request<void>(`/admin/networks/${networkId}`, { method: 'DELETE' });
 	},
 
+	async listRuns(skip = 0, limit = 100, filters: { visibility?: string; owner?: string } = {}): Promise<PaginatedResponse<RunSummary>> {
+		let url = `/admin/runs?skip=${skip}&limit=${limit}`;
+		if (filters.visibility) url += `&visibility=${filters.visibility}`;
+		if (filters.owner) url += `&owner=${filters.owner}`;
+		return request<PaginatedResponse<RunSummary>>(url);
+	},
+
+	async updateRun(runId: string, updates: { visibility?: Visibility; user_id?: string }): Promise<Run> {
+		return request<Run>(`/admin/runs/${runId}`, {
+			method: 'PATCH',
+			body: JSON.stringify(updates)
+		});
+	},
+
+	async deleteRun(runId: string): Promise<void> {
+		return request<void>(`/admin/runs/${runId}`, { method: 'DELETE' });
+	},
+
 	async getPermissions(): Promise<Record<string, unknown>> {
 		return request<Record<string, unknown>>('/admin/permissions');
 	},

frontend/app/src/lib/components/cells/VisibilityCell.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import { Share2, Lock } from 'lucide-svelte';
+	import { Globe, LockKeyhole } from 'lucide-svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import type { Network } from '$lib/types.js';
+	import type { Visibility } from '$lib/types.js';
 
-	let { network, canEdit, onToggle }: {
-		network: Network;
+	let { item, canEdit, onToggle }: {
+		item: { id: string; visibility: Visibility; owner?: { id: string } | null };
 		canEdit: boolean;
-		onToggle: (id: string, visibility: 'public' | 'private') => void;
+		onToggle: (id: string, visibility: Visibility) => void;
 	} = $props();
 
-	const isSystem = $derived(!network.owner);
-	const isPublic = $derived(network.visibility === 'public');
-	const Icon = $derived(isPublic ? Share2 : Lock);
+	const isSystem = $derived(!item.owner);
+	const isPublic = $derived(item.visibility === 'public');
+	const Icon = $derived(isPublic ? Globe : LockKeyhole);
 	const iconClass = 'h-4 w-4 text-muted-foreground';
 </script>
 
@@ -28,7 +28,7 @@
 							variant="ghost"
 							size="sm"
 							class="h-8 w-8 p-0"
-							onclick={() => onToggle(network.id, isPublic ? 'private' : 'public')}
+							onclick={() => onToggle(item.id, isPublic ? 'private' : 'public')}
 							{...props}
 						>
 							<Icon class={iconClass} />
@@ -41,7 +41,7 @@
 				{/snippet}
 			</Tooltip.Trigger>
 			<Tooltip.Content>
-				{isPublic ? 'Visible to all users' : 'Only visible to you'}
+				{isPublic ? 'Visible to all users' : 'Only visible to the owner'}
 			</Tooltip.Content>
 		</Tooltip.Root>
 	</div>

frontend/app/src/lib/types.ts

@@ -39,7 +39,7 @@ export interface Network {
 	filename: string;
 	file_path: string;
 	file_size?: number;
-	visibility: "public" | "private";
+	visibility: Visibility;
 	owner: User;
 	source_run_id?: string;
 	dimensions?: Record<string, number>;
@@ -52,6 +52,8 @@ export interface Network {
 	updated_at?: string;
 }
 
+export type Visibility = "public" | "private";
+
 export interface BackendPublic {
 	id: string;
 	name: string;
@@ -89,6 +91,7 @@ export interface RunSummary {
 	completed_at?: string;
 	created_at: string;
 	owner: User;
+	visibility: Visibility;
 	backend: BackendPublic;
 	total_job_count?: number;
 	jobs_finished?: number;
@@ -169,7 +172,7 @@ export interface NetworkFilters {
 }
 
 export interface NetworkUpdate {
-	visibility?: "public" | "private";
+	visibility?: Visibility;
 	user_id?: string;
 }
 

frontend/app/src/routes/database/+page.svelte

@@ -17,7 +17,7 @@
 	import { authStore } from '$lib/stores/auth.svelte.js';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import TableSkeleton from '$lib/components/TableSkeleton.svelte';
-	import type { Network as NetworkType, User, NetworkUpdate, ApiError } from '$lib/types.js';
+	import type { Network as NetworkType, User, NetworkUpdate, ApiError, Visibility } from '$lib/types.js';
 	import type { FilterState, FilterCategory } from '$lib/components/ui/filter-dialog';
 	import type { ColumnDef, SortingState, VisibilityState, Row } from '@tanstack/table-core';
 
@@ -217,7 +217,7 @@
 		}
 	}
 
-	async function handleVisibilityToggle(networkId: string, newVisibility: "public" | "private") {
+	async function handleVisibilityToggle(networkId: string, newVisibility: Visibility) {
 		if (updatingVisibilityId) return;
 		updatingVisibilityId = networkId;
 		try {

frontend/app/src/routes/database/components/columns.ts

@@ -9,7 +9,7 @@ import VisibilityCell from '$lib/components/cells/VisibilityCell.svelte';
 import { Lock, Globe, Trash2, UserRoundCog } from 'lucide-svelte';
 import OwnerCell from '$lib/components/OwnerCell.svelte';
 import type { ColumnDef } from '@tanstack/table-core';
-import type { Network, NetworkTag, TagType, TagColor } from '$lib/types.js';
+import type { Network, NetworkTag, TagType, TagColor, Visibility } from '$lib/types.js';
 
 interface DatabaseColumnsHelpers {
 	getDirectoryPath: (fullPath: string | null | undefined) => string;
@@ -20,7 +20,7 @@ interface DatabaseColumnsHelpers {
 	handleDelete: (id: string) => void;
 	toggleComponentsExpanded: (id: string) => void;
 	getExpandedComponents: () => Set<string>;
-	handleVisibilityToggle: (id: string, visibility: "public" | "private") => void;
+	handleVisibilityToggle: (id: string, visibility: Visibility) => void;
 	canEditNetwork: (network: Network) => boolean;
 	authEnabled: boolean;
 	handleOwnerChange?: (network: Network) => void;
@@ -126,7 +126,7 @@ export const createColumns = (helpers: DatabaseColumnsHelpers): ColumnDef<Networ
 						cell: (info: { row: { original: Network } }) => {
 							const network = info.row.original;
 							return renderComponent(VisibilityCell, {
-								network,
+								item: network,
 								canEdit: canEditNetwork(network),
 								onToggle: handleVisibilityToggle
 							});

frontend/app/src/routes/runs/+page.svelte

@@ -7,7 +7,7 @@
 	import { formatRelativeTime, saveTablePref, buildOwnerOptions } from '$lib/utils.js';
 	import { restoreTableState, buildTableURL, filtersToAPI, clampPage } from '$lib/table-url-state.js';
 	import { RUN_FINAL_STATUSES } from '$lib/types.js';
-	import type { RunSummary, User, BackendPublic, ApiError } from '$lib/types.js';
+	import type { RunSummary, User, BackendPublic, ApiError, Visibility } from '$lib/types.js';
 	import type { FilterState, FilterCategory } from '$lib/components/ui/filter-dialog';
 	import type { SortingState, VisibilityState } from '@tanstack/table-core';
 	import FilterBar from '$lib/components/FilterBar.svelte';
@@ -26,6 +26,7 @@
 	let totalRuns = $state(0);
 	let cancellingId = $state<string | null>(null);
 	let removingId = $state<string | null>(null);
+	let updatingVisibilityId = $state<string | null>(null);
 
 	const FILTER_KEYS = ['statuses', 'workflows', 'owners', 'git_refs', 'configfiles', 'backends'] as const;
 	let filters = $state({ statuses: new Set<string>(), workflows: new Set<string>(), owners: new Set<string>(), git_refs: new Set<string>(), configfiles: new Set<string>(), backends: new Set<string>() });
@@ -91,16 +92,25 @@
 		{ key: 'backends', label: 'Backend', options: availableBackends.map(b => ({ id: b.id, label: b.name })) },
 	]);
 
+	function canEditRun(run: RunSummary): boolean {
+		if (!authStore.user) return false;
+		if (authStore.user.permissions?.includes('runs:manage_all')) return true;
+		return run.owner?.id === authStore.user.id;
+	}
+
 	const columns = $derived.by(() => {
 		const authEnabled = authStore.authEnabled ?? false;
 		return createColumns({
 			formatRelativeTime,
 			handleCancel,
 			handleRemove,
 			handleRerun,
+			handleVisibilityToggle,
+			canEditRun,
 			authEnabled,
 			getCancellingId: () => cancellingId,
 			getRemovingId: () => removingId,
+			getUpdatingVisibilityId: () => updatingVisibilityId,
 			getTick: () => tick
 		});
 	});
@@ -206,6 +216,19 @@
 		}
 	}
 
+	async function handleVisibilityToggle(runId: string, visibility: Visibility) {
+		if (updatingVisibilityId) return;
+		updatingVisibilityId = runId;
+		try {
+			await runs.updateVisibility(runId, visibility);
+			await loadRuns(true);
+		} catch (err) {
+			if (!(err as ApiError).cancelled) toast.error((err as Error).message);
+		} finally {
+			updatingVisibilityId = null;
+		}
+	}
+
 	async function handleRemove(runId: string) {
 		if (removingId) return;
 		if (!confirm('Are you sure you want to remove this run? This will delete all associated files and cannot be undone.')) {

frontend/app/src/routes/runs/[id]/+page.svelte

@@ -8,7 +8,8 @@
 	import type { Run, ApiError, OutputFile, RunNetwork, Workflow } from '$lib/types.js';
 	import { Button } from '$lib/components/ui/button';
 	import { Skeleton } from '$lib/components/ui/skeleton';
-	import { Terminal, RotateCw, X, Trash2, Loader2, MoreVertical, Settings2, ChevronRight, ExternalLink, FolderArchive, GitBranch, Clock, Calendar, Server } from 'lucide-svelte';
+	import { Terminal, RotateCw, X, Trash2, Loader2, MoreVertical, Settings2, ChevronRight, ExternalLink, FolderArchive, GitBranch, Clock, Calendar, Server, Globe, LockKeyhole } from 'lucide-svelte';
+	import { authStore } from '$lib/stores/auth.svelte.js';
 	import { breadcrumbStore } from '$lib/stores/breadcrumb.svelte.js';
 	import OutputFilesTree from '../components/OutputFilesTree.svelte';
 	import WorkflowSection from '../components/WorkflowSection.svelte';
@@ -27,6 +28,7 @@
 	let rerunning = $state(false);
 	let cancelling = $state(false);
 	let removing = $state(false);
+	let togglingVisibility = $state(false);
 	let configOpen = $state(false);
 	let logsOpen = $state(true);
 
@@ -101,7 +103,7 @@
 		}
 	});
 
-	const actionBusy = $derived(cancelling || rerunning || removing);
+	const actionBusy = $derived(cancelling || rerunning || removing || togglingVisibility);
 
 	const duration = $derived.by(() => {
 		if (!isTerminal) tick; // reference tick to force re-evaluation
@@ -283,6 +285,19 @@
 		goto('/runs');
 	});
 
+	const canEditRun = $derived(
+		run && authStore.user && (
+			authStore.user.permissions?.includes('runs:manage_all') ||
+			run.owner?.id === authStore.user.id
+		)
+	);
+
+	const handleToggleVisibility = () => runAction(v => togglingVisibility = v, async () => {
+		const newVis = run!.visibility === 'public' ? 'private' : 'public';
+		await runs.updateVisibility(run!.id, newVis);
+		run = await runs.get(runId);
+	});
+
 	function scrollToBottom() {
 		requestAnimationFrame(() => {
 			if (logContainer) {
@@ -356,6 +371,17 @@
 										Rerun
 									</DropdownMenu.Item>
 								{/if}
+								{#if canEditRun}
+									<DropdownMenu.Item onclick={handleToggleVisibility} disabled={actionBusy}>
+										{#if run?.visibility === 'public'}
+											<LockKeyhole class="h-4 w-4 mr-2" />
+											Make private
+										{:else}
+											<Globe class="h-4 w-4 mr-2" />
+											Make public
+										{/if}
+									</DropdownMenu.Item>
+								{/if}
 								<DropdownMenu.Separator />
 								<DropdownMenu.Item onclick={handleRemove} disabled={actionBusy} class="text-destructive focus:text-destructive">
 									<Trash2 class="h-4 w-4 mr-2" />
@@ -391,6 +417,18 @@
 						<Server class="h-3.5 w-3.5" />
 						<span>{run.backend.name}</span>
 					</div>
+					{#if authStore.authEnabled}
+						<div class="h-4 w-px bg-border"></div>
+						<div class="flex items-center gap-1.5">
+							{#if run.visibility === 'public'}
+								<Globe class="h-3.5 w-3.5" />
+								<span>Public</span>
+							{:else}
+								<LockKeyhole class="h-3.5 w-3.5" />
+								<span>Private</span>
+							{/if}
+						</div>
+					{/if}
 					{#if run.networks.length > 0}
 						<div class="h-4 w-px bg-border"></div>
 						<div class="flex items-center gap-1.5">