Files
ss-tools/frontend
busya 149c05bf1c fix(frontend): full ADR compliance — Model-View concept, model decomposition, button migration
P0 — Model-first ADR compliance:
  - Decompose DashboardHubModel (590→496 lines) into Dashboards.FiltersModel,
    Dashboards.SelectionModel, Dashboards.GitActionsModel (DG split per plan)
  - Decompose AgentChatModel (630→356 lines) into ConnectionManager,
    StreamProcessor, LocalStorage, shared types
  - Decompose MigrationModel (457→389 lines) into WizardModel, ExecutorModel

P0 — /ui atom compliance:
  - Replace all raw <button> with <Button> from /ui in dashboards/+page.svelte
    (~20 replacements) and 16 additional routes/ files (~70 replacements total)

P0 — Hierarchical region IDs (ATTN_2):
  - Rename all 22 model #region/#endregion IDs from flat to Domain.Name format
  - Update @ingroup from generic 'Models' to domain-specific (Dashboards, Git, etc.)

P1 — UX contract compliance:
  - Add @UX_STATE declarations to agent/+page.svelte
  - Extract Gradio Client.connect from page into AgentChatModel.retryConnection()

All new model files have proper GRACE anchors (#region/#endregion, @ingroup,
@BRIEF, @INVARIANT, @STATE, @ACTION, @RELATION).

Build: npm run build passes.
Tests: DashboardHubModel 112/112, MigrationModel 74/74 pass.
2026-06-17 14:02:17 +03:00
..
2026-01-22 23:18:48 +03:00

Superset Tools Frontend (SvelteKit)

This is the frontend for the Superset Tools application, built with SvelteKit in SPA mode.

Development

  1. Install dependencies:

    npm install
    
  2. Run development server:

    npm run dev
    

    The frontend will be available at http://localhost:5173. It is configured to proxy API requests to http://localhost:8000.

Production Build

  1. Build the static SPA:

    npm run build
    

    This generates a static SPA in the build/ directory.

  2. Serve with Backend: The Python backend is configured to serve the files from frontend/build/. Ensure the backend is running:

    cd ../backend
    python src/app.py
    

Architecture

  • Routing: File-based routing in src/routes/.
  • Layouts: Shared UI in src/routes/+layout.svelte.
  • Data Loading: load functions in +page.ts for efficient data fetching.
  • API Client: Centralized API logic in src/lib/api.js.
  • Styling: Tailwind CSS.