Product Surface & Navigation

Relevant source files

• src/app.html
• src/lib/checks.svelte.ts
• src/lib/domains.svelte.ts
• src/lib/styles/index.css
• src/lib/styles/layout/app.css
• src/lib/styles/reset.css
• src/routes/+layout.svelte
• src/routes/+layout.ts
• src/routes/+page.svelte

Lodestar is structured as a Single Page Application (SPA) src/routes/+layout.ts#1-6 hosted within a Tauri v2 shell. The interface is organized around a persistent navigation rail and a dynamic content area driven by SvelteKit routing. The application state and UI are fundamentally driven by the vaultPath, which determines the data context for all surfaces src/routes/+layout.svelte#20-30

Root Layout & Navigation Rail

The application's root layout is defined in +layout.svelte, which implements a two-column grid: a fixed-width navigation rail (.rail) and a flexible content area (.app__content) src/lib/styles/layout/app.css#10-14

Navigation Rail

The rail serves as the primary navigation hub, categorizing surfaces into functional areas and diagnostic tools src/routes/+layout.svelte#41-53

• Brand: Displays "Lodestar" using the display font src/lib/styles/layout/app.css#21-29
• Active Links: Current routes are highlighted using the .on class, which inverts the rail's color scheme src/lib/styles/layout/app.css#41-45
• Future Surfaces: Placeholders for planned features (Today, Triage, Pipeline, Network, Patterns) are styled with the .future class to indicate they are currently non-functional src/lib/styles/layout/app.css#49-52
• Diagnostics: A secondary section containing the Checks and Settings surfaces src/routes/+layout.svelte#50-52

Navigation Logic

Route detection is handled via SvelteKit's page store, which drives the active state of navigation links src/routes/+layout.svelte#33-37

Surface	Path Pattern	Code Entity / Route
Companies	/ or /companies/*	src/routes/+page.svelte
Checks	/checks/*	src/routes/checks/ (Planned)
Settings	/settings/*	src/routes/settings/ (Planned)

Sources:src/routes/+layout.svelte#32-53src/lib/styles/layout/app.css#1-77

The Vault-Driven Architecture

The entire UI lifecycle is tied to the selection and monitoring of a local Obsidian vault.

Vault Initialization

When the app starts or a vault is changed, the +layout.svelte component triggers a global synchronization effect src/routes/+layout.svelte#20-30 This calls startVaultSync(path), which establishes a bridge between the Rust file watcher and the Svelte stores src/lib/vaultSync.ts

Data Flow & Store Loading

Individual surfaces are responsible for ensuring their respective stores are populated based on the companiesStore.vaultPath.

• Companies Surface: On mount, it checks if companiesStore and domainsStore have been loaded for the current path src/routes/+page.svelte#28-31
• Reactivity: Stores use Svelte 5 runes ($state, $derived) to provide reactive access to vault data src/lib/companies.svelte.tssrc/lib/domains.svelte.ts

UI State Machine: Vault Path

The following diagram illustrates how the vaultPath flows from the backend through the frontend stores to drive the UI surfaces.

Diagram: Vault Data Flow

flowchart TD
    subgraph subGraph2 ["UI Surfaces"]
        H["Companies (+page.svelte)"]
        I["Checks Surface"]
    end
    subgraph subGraph1 ["Frontend Stores (Svelte 5)"]
        D["vaultSync.ts"]
        E["companiesStore"]
        F["domainsStore"]
        G["checksStore"]
    end
    subgraph subGraph0 ["Backend (Rust)"]
        A["Config/Keychain"]
        B["Tauri Commands"]
        C["Watcher (watcher.rs)"]
    end
    A --> B
    C --> B
    B --> D
    D --> E
    D --> F
    D --> G
    E --> H
    F --> H
    G --> I

Loading

Sources:src/routes/+layout.svelte#20-30src/lib/companies.svelte.ts#1-30src/lib/domains.svelte.ts#1-47src/lib/checks.svelte.ts#1-36

Surface: Companies (The Main Workspace)

The Companies surface (/) is the primary interface for managing the job search pipeline. It features a complex filtering and search system.

Search and Keyboard Navigation

The search input src/routes/+page.svelte#150-163 supports advanced keyboard interactions for rapid navigation:

• ArrowUp/Down: Move activeIndex through the view.ranked list src/routes/+page.svelte#111-120
• Enter: Opens the currently selected company slug src/routes/+page.svelte#131-136
• Escape: Clears the query and resets focus src/routes/+page.svelte#103-107

View Filtering (applyView)

The UI state (filters, sort, query) is passed to applyView, which computes the visible subset of companies src/routes/+page.svelte#50-68

• Tabs: Users can toggle between Queue, All, By domain, and Best prospectssrc/routes/+page.svelte#171-180
• Comboboxes: Multi-select filters for Status, Domain, Remote, Size, and Stagesrc/routes/+page.svelte#183-187

Diagram: Search & Filter Logic

flowchart LR
    subgraph subGraph2 ["Output Components"]
        L["List Rendering"]
        K["Keyboard Nav"]
        D["Domain Grouping"]
    end
    subgraph Computation
        CS["companiesStore.companies"]
        AV["applyView()"]
        V["view ($derived)"]
    end
    subgraph subGraph0 ["Input State"]
        Q["query ($state)"]
        F["filters ($state)"]
        S["sortKey ($state)"]
    end
    CS --> AV
    Q --> AV
    F --> AV
    S --> AV
    AV --> V
    V --> L
    V --> K
    V --> D

Loading

Sources:src/routes/+page.svelte#50-88src/routes/+page.svelte#101-138src/routes/+page.svelte#171-189

Surface: Checks (Diagnostics)

The Checks surface provides visibility into the background job-fetch pipeline. It tracks execution history, costs, and telemetry.

• Implementation: Driven by checksStoresrc/lib/checks.svelte.ts#7-36
• Data Model: Loads CheckSummary objects which aggregate costs (credits and USD) and execution status src/lib/checks.svelte.ts#1-3
• Navigation: Accessed via /checks in the rail src/routes/+layout.svelte#51

Sources:src/lib/checks.svelte.ts#1-36src/routes/+layout.svelte#51

Planned Surfaces

The application includes placeholders for several specialized surfaces intended to complete the job search lifecycle:

1. Today: A daily dashboard for scheduled tasks and follow-ups src/routes/+layout.svelte#43
2. Triage: High-speed interface for processing new job listings src/routes/+layout.svelte#44
3. Pipeline: Visual Kanban or list view of active applications src/routes/+layout.svelte#45
4. Network: CRM for managing professional contacts and referrals src/routes/+layout.svelte#47
5. Patterns: Analytics on market trends and personal performance src/routes/+layout.svelte#48

Sources:src/routes/+layout.svelte#43-48