fix: sync tab UX — live reload, flash messages, duplicate prevention

- All tab components reload data on tab switch via active prop + $effect
- DevicesTab shows flash messages on add/remove, auto-uppercases device ID
- DeviceCard uses amber dot for disconnected, adds copy device ID button
- ProjectsTab uses live Syncthing device count instead of stale team config
- SetupTab conditionally renders version to avoid blank space
- Duplicate device add returns HTTP 409 with SyncthingClient pre-check
- Improved confirmation popover styling for device removal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JayantDevkar

api/routers/sync_status.py

@@ -202,6 +202,8 @@ async def sync_add_device(req: AddDeviceRequest) -> Any:
         return await run_sync(proxy.add_device, req.device_id, req.name)
     except SyncthingNotRunning:
         raise HTTPException(status_code=503, detail="Syncthing is not running")
+    except ValueError as e:
+        raise HTTPException(status_code=409, detail=str(e))
 
 
 @router.delete("/devices/{device_id}")

cli/karma/syncthing.py

@@ -88,6 +88,9 @@ def get_connections(self) -> dict:
     def add_device(self, device_id: str, name: str) -> None:
         """Pair with a remote device."""
         config = self._get_config()
+        existing_ids = {d["deviceID"] for d in config.get("devices", [])}
+        if device_id in existing_ids:
+            raise ValueError(f"Device {device_id} already configured")
         config["devices"].append({
             "deviceID": device_id,
             "name": name,

frontend/src/lib/components/sync/ActivityTab.svelte

@@ -5,6 +5,8 @@
 	import { API_BASE } from '$lib/config';
 	import { getProjectNameFromEncoded, formatBytes, formatBytesRate, formatRelativeTime } from '$lib/utils';
 
+	let { active = false }: { active?: boolean } = $props();
+
 	const MAX_HISTORY = 30;
 	const POLL_INTERVAL = 3000;
 
@@ -268,9 +270,15 @@
 		}
 	}
 
+	// Reload when tab becomes active
+	$effect(() => {
+		if (active) {
+			loadLookupMaps();
+			fetchActivity();
+		}
+	});
+
 	onMount(() => {
-		loadLookupMaps();
-		fetchActivity();
 		pollTimer = setInterval(fetchActivity, POLL_INTERVAL);
 	});
 

frontend/src/lib/components/sync/DeviceCard.svelte

@@ -1,26 +1,48 @@
 <script lang="ts">
-	import { Monitor, ChevronDown, ChevronRight, ArrowUp, ArrowDown, Lock } from 'lucide-svelte';
+	import {
+		Monitor,
+		ChevronDown,
+		ChevronRight,
+		ArrowUp,
+		ArrowDown,
+		Lock,
+		Copy,
+		CheckCircle
+	} from 'lucide-svelte';
 	import type { SyncDevice } from '$lib/api-types';
 	import { formatBytes } from '$lib/utils';
 
 	let { device }: { device: SyncDevice } = $props();
 
 	let expanded = $state(false);
+	let copiedId = $state(false);
 
 	let statusDotClass = $derived(
-		device.connected || device.is_self ? 'bg-[var(--success)]' : 'bg-[var(--text-muted)]'
+		device.connected || device.is_self ? 'bg-[var(--success)]' : 'bg-[var(--warning)]'
 	);
 
 	let statusText = $derived(
 		device.is_self ? 'Online' : device.connected ? 'Connected' : 'Disconnected'
 	);
 
 	let truncatedId = $derived(
-		device.device_id.length > 32 ? device.device_id.slice(0, 32) + '…' : device.device_id
+		device.device_id.length > 32 ? device.device_id.slice(0, 32) + '\u2026' : device.device_id
 	);
+
+	function copyDeviceId() {
+		navigator.clipboard
+			.writeText(device.device_id)
+			.then(() => {
+				copiedId = true;
+				setTimeout(() => (copiedId = false), 2000);
+			})
+			.catch(() => {});
+	}
 </script>
 
-<div class="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--bg-subtle)] overflow-hidden">
+<div
+	class="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--bg-subtle)] overflow-hidden"
+>
 	<!-- Header (always visible) -->
 	<button
 		onclick={() => (expanded = !expanded)}
@@ -79,14 +101,18 @@
 		<div class="px-4 pb-4 pt-2 border-t border-[var(--border)] space-y-4">
 			<!-- Connection section -->
 			<div>
-				<h4 class="text-[11px] font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2">
+				<h4
+					class="text-[11px] font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2"
+				>
 					Connection
 				</h4>
 				<div class="space-y-1.5">
 					{#if device.address}
 						<div class="flex items-center justify-between gap-4">
 							<span class="text-xs text-[var(--text-secondary)]">Address</span>
-							<span class="text-xs font-mono text-[var(--text-primary)] truncate max-w-[60%] text-right">
+							<span
+								class="text-xs font-mono text-[var(--text-primary)] truncate max-w-[60%] text-right"
+							>
 								{device.address}
 							</span>
 						</div>
@@ -108,16 +134,36 @@
 					{/if}
 					<div class="flex items-center justify-between gap-4">
 						<span class="text-xs text-[var(--text-secondary)]">Device ID</span>
-						<code class="text-[11px] font-mono text-[var(--text-muted)] truncate max-w-[60%] text-right">
-							{truncatedId}
-						</code>
+						<div class="flex items-center gap-1.5">
+							<code
+								class="text-[11px] font-mono text-[var(--text-muted)] truncate max-w-[55%] text-right"
+							>
+								{truncatedId}
+							</code>
+							<button
+								onclick={(e) => {
+									e.stopPropagation();
+									copyDeviceId();
+								}}
+								aria-label="Copy device ID"
+								class="shrink-0 p-1 rounded text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+							>
+								{#if copiedId}
+									<CheckCircle size={12} class="text-[var(--success)]" />
+								{:else}
+									<Copy size={12} />
+								{/if}
+							</button>
+						</div>
 					</div>
 				</div>
 			</div>
 
 			<!-- Transfer section -->
 			<div>
-				<h4 class="text-[11px] font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2">
+				<h4
+					class="text-[11px] font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2"
+				>
 					Transfer
 				</h4>
 				<div class="space-y-1.5">

frontend/src/lib/components/sync/DevicesTab.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { Monitor, XCircle, Plus, Loader2, Trash2 } from 'lucide-svelte';
+	import { Monitor, XCircle, Plus, Loader2, Trash2, CheckCircle2 } from 'lucide-svelte';
 	import type { SyncDetect, SyncDevice } from '$lib/api-types';
 	import { API_BASE } from '$lib/config';
 	import DeviceCard from './DeviceCard.svelte';
 
-	let { detect }: { detect: SyncDetect | null } = $props();
+	let { detect, active = false }: { detect: SyncDetect | null; active?: boolean } = $props();
 
 	let devices = $state<SyncDevice[]>([]);
 	let loading = $state(true);
@@ -19,6 +18,16 @@
 	let removingDeviceId = $state<string | null>(null);
 	let removeConfirmId = $state<string | null>(null);
 
+	// Flash message
+	let flashMessage = $state<string | null>(null);
+	let flashTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	function showFlash(msg: string) {
+		flashMessage = msg;
+		if (flashTimeout) clearTimeout(flashTimeout);
+		flashTimeout = setTimeout(() => (flashMessage = null), 3000);
+	}
+
 	async function loadDevices() {
 		loading = true;
 		error = null;
@@ -56,14 +65,16 @@
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({
-					device_id: newDeviceId.trim(),
+					device_id: newDeviceId.trim().toUpperCase(),
 					name: newDeviceName.trim() || newDeviceId.trim()
 				})
 			});
 			if (res.ok) {
+				const addedName = newDeviceName.trim() || 'Device';
 				newDeviceId = '';
 				newDeviceName = '';
 				await loadDevices();
+				showFlash(`${addedName} paired successfully`);
 			} else {
 				const body = await res.json().catch(() => ({}));
 				pairError = body?.detail ?? 'Failed to pair device.';
@@ -76,13 +87,15 @@
 	}
 
 	async function removeDevice(deviceId: string) {
+		const deviceName = devices.find((d) => d.device_id === deviceId)?.name ?? 'Device';
 		removingDeviceId = deviceId;
 		try {
 			const res = await fetch(`${API_BASE}/sync/devices/${encodeURIComponent(deviceId)}`, {
 				method: 'DELETE'
 			});
 			if (res.ok) {
 				await loadDevices();
+				showFlash(`${deviceName} removed`);
 			}
 		} catch {
 			// ignore
@@ -92,12 +105,25 @@
 		}
 	}
 
-	onMount(() => {
-		loadDevices();
+	// Reload when tab becomes active
+	$effect(() => {
+		if (active) {
+			loadDevices();
+		}
 	});
 </script>
 
 <div class="p-6 space-y-4">
+	<!-- Flash message -->
+	{#if flashMessage}
+		<div
+			class="flex items-center gap-2 px-4 py-2.5 rounded-[var(--radius-lg)] bg-[var(--success)]/10 border border-[var(--success)]/20 text-xs font-medium text-[var(--success)]"
+		>
+			<CheckCircle2 size={14} class="shrink-0" />
+			{flashMessage}
+		</div>
+	{/if}
+
 	{#if loading}
 		<!-- Skeleton -->
 		<div class="space-y-3">
@@ -139,18 +165,20 @@
 					{#if !device.is_self}
 						<!-- Remove button overlay -->
 						{#if removeConfirmId === device.device_id}
-							<div class="absolute top-2 right-2 flex items-center gap-1.5 bg-[var(--bg-subtle)] rounded-md p-1 border border-[var(--border)]">
-								<span class="text-xs text-[var(--text-muted)] px-1">Remove?</span>
+							<div
+								class="absolute top-1.5 right-1.5 flex items-center gap-1.5 bg-[var(--bg-base)] rounded-lg px-2.5 py-1.5 border border-[var(--border)] shadow-md z-10"
+							>
+								<span class="text-xs text-[var(--text-secondary)]">Remove?</span>
 								<button
 									onclick={() => removeDevice(device.device_id)}
 									disabled={removingDeviceId === device.device_id}
-									class="px-2 py-0.5 text-xs font-medium rounded bg-[var(--error-subtle)] text-[var(--error)] border border-[var(--error)]/20 hover:bg-[var(--error)]/20 transition-colors disabled:opacity-50"
+									class="px-2.5 py-1 text-xs font-medium rounded-md bg-[var(--error)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
 								>
 									{removingDeviceId === device.device_id ? '...' : 'Yes'}
 								</button>
 								<button
 									onclick={() => (removeConfirmId = null)}
-									class="px-2 py-0.5 text-xs font-medium rounded border border-[var(--border)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+									class="px-2.5 py-1 text-xs font-medium rounded-md border border-[var(--border)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
 								>
 									No
 								</button>
@@ -186,8 +214,11 @@
 						type="text"
 						bind:value={newDeviceId}
 						placeholder="XXXXXXX-XXXXXXX-..."
-						class="w-full px-3 py-2 text-xs font-mono rounded-[var(--radius)] border border-[var(--border)] bg-[var(--bg-base)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40 focus:border-[var(--accent)] transition-colors"
+						class="w-full px-3 py-2 text-sm font-mono rounded-[var(--radius)] border border-[var(--border)] bg-[var(--bg-base)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40 focus:border-[var(--accent)] transition-colors uppercase"
 					/>
+					<p class="text-[11px] text-[var(--text-muted)]">
+						Find this in Syncthing &rarr; Actions &rarr; Show ID
+					</p>
 				</div>
 				<div class="space-y-1.5">
 					<label for="new-device-name" class="block text-xs font-medium text-[var(--text-secondary)]">

frontend/src/lib/components/sync/ProjectsTab.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { FolderGit2, RefreshCw } from 'lucide-svelte';
 	import type { SyncProject } from '$lib/api-types';
 	import { API_BASE } from '$lib/config';
@@ -23,6 +22,8 @@
 		members: string[];
 	}
 
+	let { active = false }: { active?: boolean } = $props();
+
 	let projects = $state<SyncProject[]>([]);
 	let loading = $state(true);
 	let error = $state<string | null>(null);
@@ -32,9 +33,10 @@
 		loading = true;
 		error = null;
 		try {
-			const [projectsRes, teamsRes] = await Promise.all([
+			const [projectsRes, teamsRes, devicesRes] = await Promise.all([
 				fetch(`${API_BASE}/projects`),
-				fetch(`${API_BASE}/sync/teams`).catch(() => null)
+				fetch(`${API_BASE}/sync/teams`).catch(() => null),
+				fetch(`${API_BASE}/sync/devices`).catch(() => null)
 			]);
 
 			const apiProjects: ApiProject[] = projectsRes.ok ? await projectsRes.json() : [];
@@ -51,6 +53,15 @@
 				}
 			}
 
+			// Count actual remote Syncthing devices (excluding self)
+			let remoteDeviceCount = 0;
+			if (devicesRes?.ok) {
+				const devData = await devicesRes.json();
+				remoteDeviceCount = (devData.devices ?? []).filter(
+					(d: { is_self?: boolean }) => !d.is_self
+				).length;
+			}
+
 			projects = apiProjects.map((p) => {
 				const isSynced = syncedSet.has(p.encoded_name);
 				return {
@@ -60,7 +71,7 @@
 					synced: isSynced,
 					status: isSynced ? ('synced' as const) : ('not-syncing' as const),
 					last_sync_at: null,
-					machine_count: teamCountMap.get(p.encoded_name) ?? 0,
+					machine_count: isSynced ? remoteDeviceCount : 0,
 					pending_count: 0
 				};
 			});
@@ -106,8 +117,10 @@
 
 	let unsyncedCount = $derived(projects.filter((p) => !p.synced).length);
 
-	onMount(() => {
-		loadProjects();
+	$effect(() => {
+		if (active) {
+			loadProjects();
+		}
 	});
 </script>
 

frontend/src/lib/components/sync/SetupTab.svelte

@@ -7,10 +7,12 @@
 
 	let {
 		detect = $bindable(),
-		status = $bindable()
+		status = $bindable(),
+		active = false
 	}: {
 		detect: SyncDetect | null;
 		status: SyncStatusResponse | null;
+		active?: boolean;
 	} = $props();
 
 	// --- State 1: Not Detected ---
@@ -135,7 +137,7 @@
 	}
 
 	$effect(() => {
-		if (status?.configured) {
+		if (status?.configured && active) {
 			loadOverview();
 		}
 	});
@@ -269,7 +271,7 @@
 			></span>
 			<div>
 				<span class="text-sm font-semibold text-[var(--text-primary)]">
-					Syncthing {detect.version ?? ''} running
+					Syncthing{#if detect.version} v{detect.version}{/if} running
 				</span>
 				<p class="text-xs text-[var(--text-secondary)] mt-0.5">
 					One more step — name this machine to start syncing.
@@ -366,7 +368,7 @@
 					Sync configured
 				</span>
 				<p class="text-xs text-[var(--text-secondary)] mt-0.5">
-					Syncthing {detect?.version ?? ''} is running. Manage devices in the Devices tab.
+					Syncthing{#if detect?.version} v{detect.version}{/if} is running. Manage devices in the Devices tab.
 				</p>
 			</div>
 		</div>