ss-tools/specs/015-frontend-nav-redesign/plan.md

Implementation Plan: Frontend Navigation Redesign

Branch: 015-frontend-nav-redesign | Date: 2026-01-26 | Spec: specs/015-frontend-nav-redesign/spec.md Input: Feature specification from specs/015-frontend-nav-redesign/spec.md

Note: This template is filled in by the /speckit.plan command. See .specify/templates/commands/plan.md for the execution workflow.

Summary

This feature redesigns the frontend navigation to shift from a Navbar-heavy approach to a Dashboard-centric model. Key changes include moving tool access (Mapper, Storage, Backups) to the Dashboard, simplifying the Navbar to global contexts (Tasks, Settings), removing deprecated features (Dataset Search, Environments), and implementing a dedicated Backup Management UI based on backend capabilities from feature 009.

Additionally, the navigation architecture is refactored to be backend-driven. Plugins now expose a ui_route property, allowing the frontend to dynamically determine the correct navigation path without hardcoded mapping.

Technical Context

Language/Version: Python 3.9+ (Backend), Node.js 18+ (Frontend) Primary Dependencies: FastAPI (Backend), SvelteKit + Tailwind CSS (Frontend) Storage: N/A (UI reorganization and API integration) Testing: Playwright (E2E - if available), Vitest (Unit) Target Platform: Web Browser Project Type: Web Application (Frontend + Backend) Performance Goals: Instant navigation (<100ms), fast dashboard load Constraints: Must maintain responsive design; Backup UI must interface with existing backend endpoints Scale/Scope: ~5-10 file modifications, 1 new major component (BackupManager)

Constitution Check

GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.

• Semantic Protocol Compliance: All new components will follow Svelte component header standards.
• Causal Validity: Contracts (props/events) will be defined before implementation.
• Immutability of Architecture: No core architectural changes; only UI reorganization.
• Design by Contract: New Backup component will define clear interface contracts.
• Everything is a Plugin: N/A (Frontend changes primarily, backend remains plugin-based).
• Unified Frontend Experience: All new UI components will use standardized components and internationalization (i18n).

Project Structure

Documentation (this feature)

specs/015-frontend-nav-redesign/
├── plan.md              # This file
├── research.md          # Phase 0 output
├── data-model.md        # Phase 1 output
├── quickstart.md        # Phase 1 output
├── contracts/           # Phase 1 output
└── tasks.md             # Phase 2 output

Source Code (repository root)

backend/
├── src/
│   ├── core/
│   │   ├── plugin_base.py          # (Modify: Add ui_route property)
│   │   └── plugin_loader.py        # (Modify: Populate ui_route in PluginConfig)
│   ├── plugins/                    # (Modify: Implement ui_route in all plugins)
│   └── api/routes/      # (Verify backup routes exist)

frontend/
├── src/
│   ├── components/
│   │   ├── Navbar.svelte           # (Modify: Simplify items)
│   │   ├── DashboardGrid.svelte    # (Modify: Add tool links)
│   │   └── backups/                # (New: Backup UI)
│   │       ├── BackupManager.svelte
│   │       └── BackupList.svelte
│   ├── pages/
│   │   └── Dashboard.svelte        # (Modify: Layout updates)
│   └── routes/
│       ├── +layout.svelte          # (Check global nav injection)
│       ├── +page.svelte            # (Modify: Use plugin.ui_route for navigation)
│       └── tools/
│           └── backups/            # (New Route)
│               └── +page.svelte

Structure Decision: Standard SvelteKit structure. New backups component directory for the complex backup UI. Route added under tools/ to match existing pattern (mapper, storage).

Complexity Tracking

Fill ONLY if Constitution Check has violations that must be justified

Violation	Why Needed	Simpler Alternative Rejected Because
N/A