diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.css b/frontend/src/app/components/auto-configure/auto-configure.component.css
index aa84d8a0b..79a592682 100644
--- a/frontend/src/app/components/auto-configure/auto-configure.component.css
+++ b/frontend/src/app/components/auto-configure/auto-configure.component.css
@@ -46,8 +46,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 48px 32px 36px;
-	gap: 16px;
+	padding: 40px 32px 24px;
+	gap: 10px;
 }
 
 .card__title {
@@ -64,6 +64,16 @@
 	}
 }
 
+.card__head-detail {
+	width: 100%;
+	min-height: 64px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
 .card__subtitle {
 	margin: 0;
 	font-size: 14px;
@@ -160,7 +170,6 @@
 	position: relative;
 	width: 72px;
 	height: 72px;
-	margin-bottom: 8px;
 }
 
 .spinner__ring {
@@ -191,33 +200,195 @@
 	to { transform: rotate(-360deg); }
 }
 
-/* ── Indeterminate progress bar ── */
+/* ── Success checkmark (replaces spinner on complete) ── */
+
+.success-mark {
+	width: 72px;
+	height: 72px;
+}
 
-.progress-bar {
+.success-mark svg {
 	width: 100%;
-	max-width: 320px;
-	height: 4px;
-	border-radius: 2px;
-	background: var(--color-primaryPalette-200);
-	overflow: hidden;
+	height: 100%;
+	overflow: visible;
+}
+
+.success-mark__circle {
+	fill: none;
+	stroke: var(--color-successPalette-500);
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-dasharray: 158;
+	stroke-dashoffset: 158;
+	animation: success-circle 500ms ease-out forwards;
+	transform-origin: 50% 50%;
+}
+
+.success-mark__check {
+	fill: none;
+	stroke: var(--color-successPalette-500);
+	stroke-width: 3.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-dasharray: 36;
+	stroke-dashoffset: 36;
+	animation: success-check 350ms 400ms ease-out forwards;
+}
+
+@keyframes success-circle {
+	to { stroke-dashoffset: 0; }
+}
+
+@keyframes success-check {
+	to { stroke-dashoffset: 0; }
+}
+
+/* ── Summary chips (shown on complete) ── */
+
+.summary-chips {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 8px;
 	margin-top: 4px;
 }
 
+.summary-chip {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 4px;
+	padding: 4px 10px;
+	border-radius: 999px;
+	background: var(--color-successPalette-50);
+	color: var(--color-successPalette-700);
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1.4;
+	white-space: nowrap;
+	animation: chip-enter 280ms ease-out;
+}
+
+.summary-chip strong {
+	font-size: 13px;
+	font-weight: 700;
+}
+
 @media (prefers-color-scheme: dark) {
-	.progress-bar {
-		background: var(--color-primaryPalette-800);
+	.summary-chip {
+		background: var(--color-successPalette-900);
+		color: var(--color-successPalette-100);
 	}
 }
 
-.progress-bar__fill {
-	width: 40%;
-	height: 100%;
-	border-radius: 2px;
-	background: var(--color-accentedPalette-500);
-	animation: indeterminate 1.5s ease-in-out infinite;
+@keyframes chip-enter {
+	from { transform: scale(0.85); opacity: 0; }
+	to { transform: scale(1); opacity: 1; }
 }
 
-@keyframes indeterminate {
-	0% { transform: translateX(-100%); }
-	100% { transform: translateX(350%); }
+/* ── Live status log ── */
+
+.status-log {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	max-width: 360px;
+	height: 78px;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	gap: 8px;
+	overflow: hidden;
+	mask-image: linear-gradient(to bottom, transparent 0, black 28px);
+	-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 28px);
+}
+
+.status-log__item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-size: 13px;
+	color: var(--color-primaryPalette-400);
+	text-align: left;
+	line-height: 1.35;
+	animation: status-log-enter 240ms ease-out;
+}
+
+.status-log__item_done {
+	color: var(--color-primaryPalette-200);
+	font-size: 12px;
+}
+
+.status-log__item_current {
+	color: var(--color-primaryPalette-800);
+	font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+	.status-log__item_done {
+		color: var(--color-primaryPalette-500);
+	}
+	.status-log__item_current {
+		color: var(--color-primaryPalette-50);
+	}
+}
+
+.status-log__icon {
+	flex-shrink: 0;
+	width: 16px;
+	height: 16px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.status-log__check {
+	color: var(--color-primaryPalette-200);
+	font-size: 13px;
+	font-weight: 700;
+	line-height: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+	.status-log__check {
+		color: var(--color-primaryPalette-500);
+	}
+}
+
+.status-log__spinner {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	border: 2px solid var(--color-accentedPalette-200);
+	border-top-color: var(--color-accentedPalette-500);
+	animation: tiny-spin 0.8s linear infinite;
+}
+
+@keyframes tiny-spin {
+	to { transform: rotate(360deg); }
+}
+
+@keyframes status-log-enter {
+	from { transform: translateY(-6px); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+}
+
+.card__status {
+	margin: 0;
+	min-height: 20px;
+	font-size: 13px;
+	color: var(--color-primaryPalette-500);
+	text-align: center;
+	line-height: 1.4;
+	max-width: 360px;
+}
+
+.card__status_error {
+	color: var(--color-warnPalette-500);
+}
+
+@media (prefers-color-scheme: dark) {
+	.card__status {
+		color: var(--color-primaryPalette-200);
+	}
 }
diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.html b/frontend/src/app/components/auto-configure/auto-configure.component.html
index 7e818bf08..2c07d23f5 100644
--- a/frontend/src/app/components/auto-configure/auto-configure.component.html
+++ b/frontend/src/app/components/auto-configure/auto-configure.component.html
@@ -1,15 +1,42 @@
 <div class="page">
 	<div class="card">
 		<div class="card__body">
-			<div class="spinner">
+			<div *ngIf="!done()" class="spinner">
 				<div class="spinner__ring spinner__ring--outer"></div>
 				<div class="spinner__ring spinner__ring--inner"></div>
 			</div>
-			<h2 class="card__title">Configuring your database</h2>
-			<p class="card__subtitle">We're analyzing your structure and applying the best settings. This is running in the background.</p>
-			<div class="progress-bar">
-				<div class="progress-bar__fill"></div>
+			<div *ngIf="done()" class="success-mark" aria-label="Configuration complete">
+				<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
+					<circle class="success-mark__circle" cx="26" cy="26" r="25"></circle>
+					<path class="success-mark__check" d="M14 27 l8 8 l16 -18"></path>
+				</svg>
 			</div>
+			<h2 class="card__title">{{ done() ? 'Your database is ready' : 'Configuring your database' }}</h2>
+			<div class="card__head-detail">
+				<p *ngIf="!done()" class="card__subtitle">We're analyzing your structure and applying the best settings. This is running in the background.</p>
+				<div *ngIf="hasSummary()" class="summary-chips">
+					<span class="summary-chip"><strong>{{ tablesConfigured().size }}</strong> {{ tablesConfigured().size === 1 ? 'table' : 'tables' }}</span>
+					<span *ngIf="widgetsCount() > 0" class="summary-chip"><strong>{{ widgetsCount() }}</strong> {{ widgetsCount() === 1 ? 'widget' : 'widgets' }}</span>
+					<span *ngIf="settingsCount() > 0" class="summary-chip"><strong>{{ settingsCount() }}</strong> {{ settingsCount() === 1 ? 'setting' : 'settings' }}</span>
+				</div>
+				<p *ngIf="done() && !hasSummary()" class="card__subtitle">All set — opening your dashboard…</p>
+			</div>
+
+			<ul class="status-log" *ngIf="!errorText(); else errorBlock">
+				<li *ngFor="let m of messages(); let last = last; trackBy: trackByIndex"
+					class="status-log__item"
+					[class.status-log__item_current]="last"
+					[class.status-log__item_done]="!last">
+					<span class="status-log__icon" aria-hidden="true">
+						<span *ngIf="!last" class="status-log__check">&#10003;</span>
+						<span *ngIf="last" class="status-log__spinner"></span>
+					</span>
+					<span class="status-log__text">{{ m }}</span>
+				</li>
+			</ul>
+			<ng-template #errorBlock>
+				<p class="card__status card__status_error">{{ errorText() }}</p>
+			</ng-template>
 		</div>
 		<div class="card__footer">
 			<p class="card__footer-text">You can start working — setup will continue in the background.</p>
diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.ts b/frontend/src/app/components/auto-configure/auto-configure.component.ts
index c5b2c638c..158b04e6d 100644
--- a/frontend/src/app/components/auto-configure/auto-configure.component.ts
+++ b/frontend/src/app/components/auto-configure/auto-configure.component.ts
@@ -1,21 +1,41 @@
-import { Component, inject, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
 
-import { ConfigurationStateService } from '../../services/configuration-state.service';
+import { ConfigProgress, ConfigurationStateService } from '../../services/configuration-state.service';
 
 @Component({
 	selector: 'app-auto-configure',
 	templateUrl: './auto-configure.component.html',
 	styleUrls: ['./auto-configure.component.css'],
-	imports: [MatButtonModule, RouterModule],
+	imports: [CommonModule, MatButtonModule, RouterModule],
 })
-export class AutoConfigureComponent implements OnInit {
+export class AutoConfigureComponent implements OnInit, OnDestroy {
 	private _route = inject(ActivatedRoute);
 	private _router = inject(Router);
 	private _configState = inject(ConfigurationStateService);
 
 	protected connectionId = signal<string | null>(null);
+	protected progress = signal<ConfigProgress | null>(null);
+	protected messages = signal<string[]>(['Initializing…']);
+	protected tablesConfigured = signal<Set<string>>(new Set<string>());
+	protected widgetsCount = signal<number>(0);
+	protected settingsCount = signal<number>(0);
+	private _progressSub?: Subscription;
+
+	protected errorText = computed(() => {
+		const p = this.progress();
+		if (p?.type === 'error') return p.message ?? 'Something went wrong.';
+		return null;
+	});
+
+	protected done = computed(() => this.progress()?.type === 'complete');
+
+	protected hasSummary = computed(
+		() => this.done() && (this.tablesConfigured().size > 0 || this.widgetsCount() > 0 || this.settingsCount() > 0),
+	);
 
 	async ngOnInit(): Promise<void> {
 		const connectionId = this._route.snapshot.paramMap.get('connection-id');
@@ -25,7 +45,135 @@ export class AutoConfigureComponent implements OnInit {
 		}
 
 		this.connectionId.set(connectionId);
+		this._progressSub = this._configState.progress$.subscribe((p) => {
+			this.progress.set(p);
+			if (p?.type === 'message' && p.text) this._countMessage(p.text);
+			const rawIncoming =
+				p?.type === 'message' && p.text
+					? p.text
+					: p?.type === 'complete'
+						? 'All done — opening your dashboard…'
+						: null;
+			if (!rawIncoming) return;
+			const incoming = this._humanize(rawIncoming);
+			if (!incoming) return;
+			const current = this.messages();
+			if (current[current.length - 1] === incoming) return;
+			this.messages.set([...current, incoming].slice(-5));
+		});
 		await this._configState.startConfiguring(connectionId);
+		// Let the user read the summary chips before navigating away.
+		await new Promise((resolve) => setTimeout(resolve, 1800));
 		this._router.navigate(['/dashboard', connectionId]);
 	}
+
+	ngOnDestroy(): void {
+		this._progressSub?.unsubscribe();
+	}
+
+	trackByIndex(index: number): number {
+		return index;
+	}
+
+	private _countMessage(text: string): void {
+		const widgetMatch = text.match(/^Added\s+\S+\s+widget for table "([^"]+)"/i);
+		if (widgetMatch) {
+			this.widgetsCount.update((n) => n + 1);
+			this._addConfiguredTable(widgetMatch[1]);
+			return;
+		}
+		const settingMatch = text.match(/^Set up settings for table "([^"]+)",\s+\S+ parameter/i);
+		if (settingMatch) {
+			this.settingsCount.update((n) => n + 1);
+			this._addConfiguredTable(settingMatch[1]);
+			return;
+		}
+		const defaultsMatch = text.match(/^Set up settings for table "([^"]+)" with default parameters/i);
+		if (defaultsMatch) {
+			this._addConfiguredTable(defaultsMatch[1]);
+		}
+	}
+
+	private _addConfiguredTable(name: string): void {
+		const current = this.tablesConfigured();
+		if (current.has(name)) return;
+		const next = new Set(current);
+		next.add(name);
+		this.tablesConfigured.set(next);
+	}
+
+	private _humanize(text: string): string {
+		if (/^Initializing|^Starting configuration|^✓ Setup complete|^All done/i.test(text)) return text;
+		if (/^Starting AI scan/i.test(text)) return 'Looking at your database…';
+		if (/^Fetching tables from database/i.test(text)) return 'Reading your tables…';
+
+		let m = text.match(/^Found (\d+) new (?:table|tables) to scan/i);
+		if (m) return `Found ${m[1]} ${m[1] === '1' ? 'table' : 'tables'} to set up`;
+		if (/^No new tables to scan/i.test(text)) return 'Everything is already set up';
+
+		m = text.match(/^Inspected structure of table "([^"]+)"/i);
+		if (m) return `Read structure of ${m[1]}`;
+
+		m = text.match(/^Generating settings with AI for (\d+)/i);
+		if (m) return `Choosing the best layout for ${m[1]} ${m[1] === '1' ? 'table' : 'tables'}…`;
+
+		m = text.match(/^AI returned settings for (\d+)/i);
+		if (m) return `Recommendations ready for ${m[1]} ${m[1] === '1' ? 'table' : 'tables'}`;
+
+		m = text.match(/^Validation failed for table "([^"]+)"/i);
+		if (m) return `Couldn't configure ${m[1]}, skipped it`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", display_name parameter set to "([^"]+)"/i);
+		if (m) return `Renamed ${m[1]} → ${m[2]}`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", search_fields parameter set to (.+)$/i);
+		if (m) return `Search by ${m[2]} in ${m[1]}`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", readonly_fields parameter set to (.+)$/i);
+		if (m) return `Locked fields in ${m[1]}: ${m[2]}`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", columns_view parameter set to (.+)$/i);
+		if (m) return `Showing ${m[2]} on ${m[1]} overview`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", ordering parameter set to (ASC|DESC)/i);
+		if (m) return `${m[1]} sorted ${m[2].toLowerCase() === 'asc' ? 'ascending' : 'descending'} by default`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", ordering_field parameter set to "([^"]+)"/i);
+		if (m) return `${m[1]} sorts by ${m[2]} by default`;
+
+		m = text.match(/^Set up settings for table "([^"]+)", identity_column parameter set to "([^"]+)"/i);
+		if (m) return `${m[1]} identified by ${m[2]}`;
+
+		m = text.match(/^Set up settings for table "([^"]+)" with default parameters/i);
+		if (m) return `${m[1]} is ready with default setup`;
+
+		m = text.match(/^Added (\S+) widget for table "([^"]+)" on column "([^"]+)"/i);
+		if (m) return this._widgetPhrase(m[1], m[2], m[3]);
+
+		// Generic fallback for any unmatched "Set up settings ... <param> parameter ..." line
+		m = text.match(/^Set up settings for table "([^"]+)", (\S+) parameter/i);
+		if (m) return `${m[1]}: ${m[2].replace(/_/g, ' ')} configured`;
+
+		return text;
+	}
+
+	private _widgetPhrase(kind: string, table: string, column: string): string {
+		const ref = `${table}.${column}`;
+		switch (kind.toLowerCase()) {
+			case 'phone':
+				return `${ref} formatted as phone numbers`;
+			case 'uuid':
+				return `${ref} recognized as ID`;
+			case 'country':
+				return `${ref} shows country flags`;
+			case 'url':
+				return `${ref} shown as clickable link`;
+			case 'color':
+				return `${ref} shows a color swatch`;
+			case 'string':
+				return `${ref} validates email format`;
+			default:
+				return `${kind} widget enabled for ${ref}`;
+		}
+	}
 }
diff --git a/frontend/src/app/services/configuration-state.service.ts b/frontend/src/app/services/configuration-state.service.ts
index 55268e4f2..ac743f933 100644
--- a/frontend/src/app/services/configuration-state.service.ts
+++ b/frontend/src/app/services/configuration-state.service.ts
@@ -1,16 +1,31 @@
 import { inject, Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-import { ApiService } from './api.service';
+import { environment } from '../../environments/environment';
 import { NotificationsService } from './notifications.service';
 
+export interface ConfigProgress {
+	type: 'message' | 'complete' | 'error';
+	text?: string;
+	message?: string;
+}
+
 @Injectable({ providedIn: 'root' })
 export class ConfigurationStateService {
-	private _api = inject(ApiService);
 	private _notifications = inject(NotificationsService);
 	private _configuring = new BehaviorSubject<Set<string>>(new Set());
 
-	/** Start configuring — fires the API and manages state. Returns a promise that resolves when setup completes. */
+	/** Latest progress event from the streaming setup endpoint (null when idle). */
+	public progress$ = new BehaviorSubject<ConfigProgress | null>(null);
+
+	private _queue: ConfigProgress[] = [];
+	private _drainTimer: ReturnType<typeof setInterval> | null = null;
+	private _currentDrainIntervalMs = 400;
+	private readonly _drainIntervalMsNormal = 400;
+	private readonly _drainIntervalMsFast = 80;
+	private readonly _drainCapAfterCompleteMs = 1500;
+
+	/** Start configuring — opens a streaming connection, parses progress events, resolves when complete. */
 	startConfiguring(connectionId: string): Promise<boolean> {
 		if (this._configuring.value.has(connectionId)) return Promise.resolve(false);
 
@@ -27,12 +42,55 @@ export class ConfigurationStateService {
 	}
 
 	private async _runSetup(connectionId: string): Promise<boolean> {
+		this._queue = [];
+		this._stopDrain();
+		this._currentDrainIntervalMs = this._drainIntervalMsNormal;
+		this._enqueue({ type: 'message', text: 'Starting configuration…' });
 		try {
-			await this._api.get<string>(`/ai/v2/setup/${connectionId}`, { responseType: 'text' });
+			const url = `${environment.apiRoot || '/api'}/ai/v2/setup/${connectionId}`;
+			// Bypassing HttpClient (we need ReadableStream for SSE), so we replicate the masterpwd header that TokenInterceptor would normally inject.
+			const masterpwd = localStorage.getItem(`${connectionId}__masterKey`) || '';
+			const response = await fetch(url, {
+				method: 'GET',
+				credentials: 'include',
+				headers: { masterpwd },
+			});
+
+			if (!response.ok) {
+				throw new Error(`Setup failed with status ${response.status}`);
+			}
+
+			if (response.body) {
+				const reader = response.body.getReader();
+				const decoder = new TextDecoder();
+				let buffer = '';
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) {
+						const tail = buffer.trim();
+						if (tail) this._parseAndEnqueue(tail);
+						break;
+					}
+					buffer += decoder.decode(value, { stream: true });
+					let newlineIdx: number;
+					while ((newlineIdx = buffer.indexOf('\n')) >= 0) {
+						const line = buffer.slice(0, newlineIdx).trim();
+						buffer = buffer.slice(newlineIdx + 1);
+						if (!line) continue;
+						this._parseAndEnqueue(line);
+					}
+				}
+			}
+
+			await this._waitForDrain();
 			this._notifications.showSuccessSnackbar('All tables have been configured.');
 			return true;
-		} catch {
-			this._notifications.showSuccessSnackbar('Configuration could not be completed.');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Configuration could not be completed.';
+			this._queue = [];
+			this._stopDrain();
+			this.progress$.next({ type: 'error', message });
+			this._notifications.showErrorSnackbar(message);
 			return false;
 		} finally {
 			const current = this._configuring.value;
@@ -40,4 +98,83 @@ export class ConfigurationStateService {
 			this._configuring.next(current);
 		}
 	}
+
+	private _parseAndEnqueue(line: string): void {
+		// Support SSE-style `data: {...}` lines as well as raw JSON lines.
+		const payload = line.startsWith('data:') ? line.slice(5).trim() : line;
+		if (!payload || payload === '[DONE]') return;
+		try {
+			const parsed = JSON.parse(payload) as ConfigProgress;
+			// `complete` keeps order with the trailing messages but speeds up drain
+			// so the remaining log flushes quickly instead of pacing at the normal rate.
+			if (parsed.type === 'complete') {
+				this._enqueue({ type: 'message', text: '✓ Setup complete' });
+				this._enqueue(parsed);
+				this._switchDrainSpeed(this._drainIntervalMsFast);
+				return;
+			}
+			this._enqueue(parsed);
+		} catch {
+			// Ignore non-JSON keepalive/comment frames.
+		}
+	}
+
+	private _enqueue(p: ConfigProgress): void {
+		this._queue.push(p);
+		this._startDrain();
+	}
+
+	private _startDrain(): void {
+		if (this._drainTimer) return;
+		// Emit first item immediately, then pace the rest.
+		this._drainOne();
+		this._drainTimer = setInterval(() => this._drainOne(), this._currentDrainIntervalMs);
+	}
+
+	private _switchDrainSpeed(intervalMs: number): void {
+		this._currentDrainIntervalMs = intervalMs;
+		if (this._drainTimer) {
+			clearInterval(this._drainTimer);
+			this._drainTimer = setInterval(() => this._drainOne(), intervalMs);
+		}
+	}
+
+	private _drainOne(): void {
+		const next = this._queue.shift();
+		if (!next) {
+			this._stopDrain();
+			return;
+		}
+		this.progress$.next(next);
+	}
+
+	private _stopDrain(): void {
+		if (this._drainTimer) {
+			clearInterval(this._drainTimer);
+			this._drainTimer = null;
+		}
+	}
+
+	private _waitForDrain(): Promise<void> {
+		// Switch to fast drain on stream end so we don't add long display tail.
+		this._switchDrainSpeed(this._drainIntervalMsFast);
+		const start = Date.now();
+		return new Promise((resolve) => {
+			const check = (): void => {
+				if (this._queue.length === 0 && !this._drainTimer) {
+					resolve();
+					return;
+				}
+				if (Date.now() - start >= this._drainCapAfterCompleteMs) {
+					// Cap reached — flush whatever is left so we don't delay navigation further.
+					while (this._queue.length > 0) this._drainOne();
+					this._stopDrain();
+					resolve();
+					return;
+				}
+				setTimeout(check, this._drainIntervalMsFast);
+			};
+			check();
+		});
+	}
 }