Skip to content

Frontend Integration and Types

  • Generated Types Only

    web/src/types/generated.ts is the only source for API interfaces.

  • Zustand Stores

    Stores consume generated types; hooks expose typed accessors.

  • Components

    Props derive from hooks; no custom interfaces without Pydantic ancestry.

Get started Configuration API

Generate Early

Run uv run scripts/generate_types.py before starting the frontend. Hot reload relies on correct types.

Traceability

Every UI element (slider, toggle, input) must map to a Pydantic field. Tooltips come from data/glossary.json.

No Hand-Written Interfaces

Interfaces like interface SearchResponse { ... } are forbidden. Import from generated.ts.

Store and Hook Structure

File Purpose
web/src/stores/useConfigStore.ts Holds TriBridConfig and patch helpers
web/src/hooks/useConfig.ts Read/update config
web/src/hooks/useFusion.ts Fusion-related derived state
web/src/hooks/useReranker.ts Reranker configuration and status 
flowchart TB
    G[generated.ts] --> S[stores]
    S --> H[hooks]
    H --> C[components]

Example Usage

# Backend reference: see dev/pydantic.md for generation step (1)

# Frontend consumes API; see api.md for routes (2)

import { TriBridConfig, SearchResponse } from '../web/src/types/generated';

function useConfig() {
  // typed fetch
  const [cfg, setCfg] = React.useState<TriBridConfig | null>(null);
  React.useEffect(() => { fetch('/config').then(r => r.json()).then(setCfg); }, []); // (3)
  return cfg;
}
  1. Types generation step is mandatory
  2. API is the contract; no local mocks of shapes
  3. Fetch returns the Pydantic-driven shape of config

Tooltip Integration

data/glossary.json drives hover help via TooltipIcon in the UI. Keep term keys stable.

  • Use generated types across stores, hooks, and components
  • Remove any legacy custom interfaces
  • Validate prop chains map back to Pydantic fields
flowchart LR
    Glossary[data/glossary.json] --> Tooltip[TooltipIcon]
    Tooltip --> UI
Component Inventory
  • DockerStatusCard.tsx, HealthStatusCard.tsx show system state
  • RepoSelector.tsx binds UI to corpus_id
  • RAGTab.tsx, GrafanaTab.tsx, AdminTab.tsx orchestrate panels using typed hooks