# floci-io/floci-ui architecture

> Architecture diagram of the GitHub repository floci-io/floci-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/floci-io/floci-ui
- Repository: https://github.com/floci-io/floci-ui

## Overview

Floci UI is a web console for exploring and managing resources in local AWS-, Azure-, and GCP-compatible runtimes. Users select a cloud and service, inspect live resources, and perform supported operations; the frontend sends requests through the Cloud Proxy API, which resolves a provider-specific adapter and communicates with the runtime. Separate user workflows cover storage objects, database data, and Kubernetes cluster details. The README documents additional service families exposed through the catalog. Some subsystem links rely on documented capabilities because their implementation was not sampled.

Main entry points: [`packages/frontend/src/api/cloudProxyClient.ts`](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/api/cloudProxyClient.ts) (Proxy client), [`packages/frontend/src/App.tsx`](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/App.tsx) (App routes), [`packages/api/src/service/CloudProxyService.ts`](https://github.com/floci-io/floci-ui/blob/main/packages/api/src/service/CloudProxyService.ts) (Proxy service), [`packages/api/src/registry/CloudAdapterRegistry.ts`](https://github.com/floci-io/floci-ui/blob/main/packages/api/src/registry/CloudAdapterRegistry.ts) (Adapter registry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web console"]
  node_app["App routes<br/>[App.tsx]"]
  node_console["Console home"]
  node_explorer["Cloud Explorer"]
  node_storage["Storage browser"]
  node_database["Database workspace"]
  node_k8s["Kubernetes details"]
  node_logs["Logs query<br/>[LogsQueryPanel.tsx]"]
  node_client["Proxy client"]
  node_other["Other service panels"]
end

subgraph group_api["Cloud API"]
  node_routes["Cloud routes<br/>[clouds.ts]"]
  node_proxy["Proxy service"]
  node_registry["Adapter registry"]
end

subgraph group_spi["Cloud service model"]
  node_catalog["Service catalog<br/>[serviceCatalog.ts]"]
  node_schemas["Service schemas"]
end

subgraph group_adapters["Provider adapters"]
  node_aws["AWS adapters"]
  node_azure["Azure adapters"]
  node_gcp["GCP adapters"]
end

node_user(("Console user"))
node_awsruntime{{"AWS-compatible runtime"}}
node_azureruntime{{"Azure-compatible runtime"}}
node_gcpruntime{{"GCP-compatible runtime"}}

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_console
node_app -->|"routes to"| node_explorer
node_app -->|"routes to"| node_database
node_console -->|"requests data"| node_client
node_explorer -->|"requests resources"| node_client
node_storage -->|"manages objects"| node_client
node_database -->|"reads resource"| node_client
node_k8s -->|"manages cluster"| node_client
node_logs -->|"queries logs"| node_client
node_client -->|"sends requests"| node_routes
node_routes -->|"dispatches"| node_proxy
node_proxy -->|"resolves adapter"| node_registry
node_proxy -->|"reads service metadata"| node_catalog
node_proxy -->|"returns schemas"| node_schemas
node_aws -->|"uses schemas"| node_schemas
node_azure -->|"uses schemas"| node_schemas
node_gcp -->|"uses schemas"| node_schemas
node_registry -->|"dispatches"| node_aws
node_registry -->|"dispatches"| node_azure
node_registry -->|"dispatches"| node_gcp
node_aws -->|"calls runtime"| node_awsruntime
node_azure -->|"calls runtime"| node_azureruntime
node_gcp -->|"calls runtime"| node_gcpruntime

click node_app "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/App.tsx"
click node_console "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/pages/CloudConsoleHomePage.tsx"
click node_explorer "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/pages/CloudExplorerPage.tsx"
click node_storage "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/components/StorageObjectBrowser.tsx"
click node_database "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/pages/DatabaseDataPage.tsx"
click node_k8s "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/features/k8s/K8sEngineDetails.tsx"
click node_logs "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/components/LogsQueryPanel.tsx"
click node_client "https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/api/cloudProxyClient.ts"
click node_routes "https://github.com/floci-io/floci-ui/blob/main/packages/api/src/routes/clouds.ts"
click node_proxy "https://github.com/floci-io/floci-ui/blob/main/packages/api/src/service/CloudProxyService.ts"
click node_registry "https://github.com/floci-io/floci-ui/blob/main/packages/api/src/registry/CloudAdapterRegistry.ts"
click node_catalog "https://github.com/floci-io/floci-ui/blob/main/packages/api/src/cloud-spi/serviceCatalog.ts"
click node_schemas "https://github.com/floci-io/floci-ui/tree/main/packages/api/src/cloud-spi"
click node_aws "https://github.com/floci-io/floci-ui/tree/main/packages/api/src/adapter-aws"
click node_azure "https://github.com/floci-io/floci-ui/tree/main/packages/api/src/adapter-azure"
click node_gcp "https://github.com/floci-io/floci-ui/tree/main/packages/api/src/adapter-gcp"
click node_other "https://github.com/floci-io/floci-ui/tree/main/packages/frontend/src/components"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_console,node_explorer,node_storage,node_database,node_k8s,node_logs,node_client,node_other,node_user toneBlue
class node_routes,node_proxy,node_registry toneAmber
class node_catalog,node_schemas toneMint
class node_aws,node_azure,node_gcp toneRose
class node_awsruntime,node_azureruntime,node_gcpruntime toneIndigo
```

## Components

### Web console

- [App routes](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/App.tsx): `packages/frontend/src/App.tsx`
- [Console home](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/pages/CloudConsoleHomePage.tsx): `packages/frontend/src/pages/CloudConsoleHomePage.tsx`
- [Cloud Explorer](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/pages/CloudExplorerPage.tsx): `packages/frontend/src/pages/CloudExplorerPage.tsx`
- [Storage browser](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/components/StorageObjectBrowser.tsx): `packages/frontend/src/components/StorageObjectBrowser.tsx`
- [Database workspace](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/pages/DatabaseDataPage.tsx): `packages/frontend/src/pages/DatabaseDataPage.tsx`
- [Kubernetes details](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/features/k8s/K8sEngineDetails.tsx): `packages/frontend/src/features/k8s/K8sEngineDetails.tsx`
- [Logs query](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/components/LogsQueryPanel.tsx): `packages/frontend/src/components/LogsQueryPanel.tsx`
- [Proxy client](https://github.com/floci-io/floci-ui/blob/main/packages/frontend/src/api/cloudProxyClient.ts): `packages/frontend/src/api/cloudProxyClient.ts`
- [Other service panels](https://github.com/floci-io/floci-ui/tree/main/packages/frontend/src/components): `packages/frontend/src/components`

### Cloud API

- [Cloud routes](https://github.com/floci-io/floci-ui/blob/main/packages/api/src/routes/clouds.ts): `packages/api/src/routes/clouds.ts`
- [Proxy service](https://github.com/floci-io/floci-ui/blob/main/packages/api/src/service/CloudProxyService.ts): `packages/api/src/service/CloudProxyService.ts`
- [Adapter registry](https://github.com/floci-io/floci-ui/blob/main/packages/api/src/registry/CloudAdapterRegistry.ts): `packages/api/src/registry/CloudAdapterRegistry.ts`

### Cloud service model

- [Service catalog](https://github.com/floci-io/floci-ui/blob/main/packages/api/src/cloud-spi/serviceCatalog.ts): `packages/api/src/cloud-spi/serviceCatalog.ts`
- [Service schemas](https://github.com/floci-io/floci-ui/tree/main/packages/api/src/cloud-spi): `packages/api/src/cloud-spi`

### Provider adapters

- [AWS adapters](https://github.com/floci-io/floci-ui/tree/main/packages/api/src/adapter-aws): `packages/api/src/adapter-aws`
- [Azure adapters](https://github.com/floci-io/floci-ui/tree/main/packages/api/src/adapter-azure): `packages/api/src/adapter-azure`
- [GCP adapters](https://github.com/floci-io/floci-ui/tree/main/packages/api/src/adapter-gcp): `packages/api/src/adapter-gcp`

### Other components

- **Console user**
- **AWS-compatible runtime**
- **Azure-compatible runtime**
- **GCP-compatible runtime**

## Connections

- Console user → App routes: uses
- App routes → Console home: routes to
- App routes → Cloud Explorer: routes to
- App routes → Database workspace: routes to
- Console home → Proxy client: requests data
- Cloud Explorer → Proxy client: requests resources
- Storage browser → Proxy client: manages objects
- Database workspace → Proxy client: reads resource
- Kubernetes details → Proxy client: manages cluster
- Logs query → Proxy client: queries logs
- Proxy client → Cloud routes: sends requests
- Cloud routes → Proxy service: dispatches
- Proxy service → Adapter registry: resolves adapter
- Proxy service → Service catalog: reads service metadata
- Proxy service → Service schemas: returns schemas
- AWS adapters → Service schemas: uses schemas
- Azure adapters → Service schemas: uses schemas
- GCP adapters → Service schemas: uses schemas
- Adapter registry → AWS adapters: dispatches
- Adapter registry → Azure adapters: dispatches
- Adapter registry → GCP adapters: dispatches
- AWS adapters → AWS-compatible runtime: calls runtime
- Azure adapters → Azure-compatible runtime: calls runtime
- GCP adapters → GCP-compatible runtime: calls runtime