From 88b1e94ef0e223fe702ccbfbbe7c7d4eb14abdd8 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Mon, 1 Jun 2026 14:18:02 +0300 Subject: [PATCH 1/3] wip(auto-configure): scaffold streaming progress UI (awaiting backend) - ConfigurationStateService: replace the blocking GET on /ai/v2/setup/:id with a fetch + ReadableStream consumer that parses newline-delimited JSON or SSE-style "data:" lines and pushes typed ConfigProgress events to a progress$ BehaviorSubject. Falls back cleanly when the body is empty (current backend behavior). - AutoConfigureComponent: subscribes to progress$ and exposes a signal + computed percent; renders the current step / table name and a determinate progress bar fill when total is known, otherwise keeps the indeterminate look. - Template shows "Configuring " with a "X of N" counter once the backend starts streaming events. Backend endpoint update pending. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../auto-configure.component.html | 17 +++++- .../auto-configure.component.ts | 24 ++++++-- .../services/configuration-state.service.ts | 61 +++++++++++++++++-- 3 files changed, 92 insertions(+), 10 deletions(-) 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..7383cd366 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.html +++ b/frontend/src/app/components/auto-configure/auto-configure.component.html @@ -7,8 +7,21 @@

Configuring your database

We're analyzing your structure and applying the best settings. This is running in the background.

-
-
+ +

+ + {{ p.step || 'Configuring' }} + {{ p.table }} + + {{ p.message }} + + · {{ p.current }} of {{ p.total }} + +

+ +
+
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..ddde8ef08 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,32 @@ -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(null); + protected progress = signal(null); + private _progressSub?: Subscription; + + protected percent = computed(() => { + const p = this.progress(); + if (!p || !p.total || p.total <= 0) return null; + const pct = ((p.current ?? 0) / p.total) * 100; + return Math.min(100, Math.max(0, Math.round(pct))); + }); async ngOnInit(): Promise { const connectionId = this._route.snapshot.paramMap.get('connection-id'); @@ -25,7 +36,12 @@ export class AutoConfigureComponent implements OnInit { } this.connectionId.set(connectionId); + this._progressSub = this._configState.progress$.subscribe((p) => this.progress.set(p)); await this._configState.startConfiguring(connectionId); this._router.navigate(['/dashboard', connectionId]); } + + ngOnDestroy(): void { + this._progressSub?.unsubscribe(); + } } diff --git a/frontend/src/app/services/configuration-state.service.ts b/frontend/src/app/services/configuration-state.service.ts index 55268e4f2..068ea69e2 100644 --- a/frontend/src/app/services/configuration-state.service.ts +++ b/frontend/src/app/services/configuration-state.service.ts @@ -1,16 +1,27 @@ 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 { + current?: number; + total?: number; + table?: string; + step?: string; + message?: string; + done?: boolean; +} + @Injectable({ providedIn: 'root' }) export class ConfigurationStateService { - private _api = inject(ApiService); private _notifications = inject(NotificationsService); private _configuring = new BehaviorSubject>(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(null); + + /** Start configuring — opens a streaming connection, parses progress events, resolves when complete. */ startConfiguring(connectionId: string): Promise { if (this._configuring.value.has(connectionId)) return Promise.resolve(false); @@ -27,8 +38,37 @@ export class ConfigurationStateService { } private async _runSetup(connectionId: string): Promise { + this.progress$.next({ message: 'Starting configuration…' }); try { - await this._api.get(`/ai/v2/setup/${connectionId}`, { responseType: 'text' }); + const url = `${environment.apiRoot || '/api'}/ai/v2/setup/${connectionId}`; + const response = await fetch(url, { method: 'GET', credentials: 'include' }); + + 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._parseAndEmit(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._parseAndEmit(line); + } + } + } + this._notifications.showSuccessSnackbar('All tables have been configured.'); return true; } catch { @@ -38,6 +78,19 @@ export class ConfigurationStateService { const current = this._configuring.value; current.delete(connectionId); this._configuring.next(current); + this.progress$.next(null); + } + } + + private _parseAndEmit(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; + this.progress$.next(parsed); + } catch { + // Ignore non-JSON keepalive/comment frames. } } } From 02c547bc4dea0548ed120cdb5c51774811bc08cd Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Tue, 2 Jun 2026 11:21:46 +0300 Subject: [PATCH 2/3] feat(auto-configure): live humanized progress log + success summary - Consume streaming /ai/v2/setup with masterpwd header (bypasses HttpClient for ReadableStream access) - Throttle log display at 400ms; fast-drain (80ms) once backend signals complete, capped at 1.5s - Translate backend messages to user-facing phrases (renamed X, search by Y, widget for table.column, etc.) - Replace spinner with animated stroke-draw checkmark on complete - Title swap to "Your database is ready" + green chips with tables/widgets/settings counts - Stable popup size via min-height on the status log and the subtitle/chips area so rows don't push the card - 1.8s settle delay before navigating so the summary is readable - Lighter, smaller done-item text in light theme for clearer current-vs-done hierarchy Co-Authored-By: Claude Opus 4.7 (1M context) --- .../auto-configure.component.css | 206 ++++++++++++++++-- .../auto-configure.component.html | 50 +++-- .../auto-configure.component.ts | 142 +++++++++++- .../services/configuration-state.service.ts | 112 ++++++++-- 4 files changed, 455 insertions(+), 55 deletions(-) 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..b8ac93497 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.css +++ b/frontend/src/app/components/auto-configure/auto-configure.component.css @@ -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; @@ -191,33 +201,193 @@ to { transform: rotate(-360deg); } } -/* ── Indeterminate progress bar ── */ +/* ── Success checkmark (replaces spinner on complete) ── */ + +.success-mark { + width: 72px; + height: 72px; + margin-bottom: 8px; +} -.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; } +} + +/* ── Live status log ── */ + +.status-log { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + max-width: 360px; + min-height: 132px; + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 8px; +} + +.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; } } -@keyframes indeterminate { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(350%); } +.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 7383cd366..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,28 +1,42 @@
-