# maxjendrall/fluar-clay-clone architecture

> Architecture diagram of the GitHub repository maxjendrall/fluar-clay-clone, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/maxjendrall/fluar-clay-clone
- Repository: https://github.com/maxjendrall/fluar-clay-clone

## Overview

1. **What this repo is**
   - A single-page, browser-based prototype of a Clay/Fluar-style enrichment datagrid.
   - The architecture is intentionally frontend-only: there is no visible backend service, API server, or database layer in the file tree.

2. **Runtime boundary**
   - The app runs as a static React SPA built with **Vite** and **TypeScript**.
   - `index.html` is the host page, and `src/main.tsx` is the bootstrap entry that mounts the app into the DOM.

3. **Primary application surface**
   - `src/App.tsx` is almost certainly the main orchestration point.
   - It likely owns the grid, top controls, floating action bar, cell selection behavior, and the “add AI column” workflow described in the README/chat history.

4. **Core domain model**
   - The app centers on a spreadsheet-like table with:
     - rows representing records,
     - columns representing fields,
     - cell-level state for selected / empty / processing / completed,
     - dynamically added AI-generated columns.
   - A key architectural detail is that selection is cell-based, not row-based, and supports grouped contiguous selections plus disjoint selections.

5. **Interaction and state flow**
   - User input drives all state transitions locally in the browser:
     - clicking selects cells,
     - Ctrl/Cmd adds separate selections,
     - Shift extends ranges,
     - keyboard navigation likely moves the active cell/range.
   - The selection model appears to be managed in React state rather than delegated to a third-party datagrid.

6. **Async enrichment pipeline**
   - The enrichment behavior is simulated as asynchronous per-cell work, and the README/chat history indicates support for concurrent processing.
   - When cells are “run,” their state changes through a processing lifecycle and later resolves with generated values.
   - For AI columns, each cell request includes other processed row values as context, so the data flow is row-context → prompt/value generation → cell update.

7. **AI column creation boundary**
   - “Add AI column” is a dynamic schema mutation feature: the table’s column list changes at runtime.
   - This means the grid is not fixed-schema; the UI must reconcile new columns, their headers, and any existing row data simultaneously.

8. **UI layout and styling**
   - `src/App.css` and `src/index.css` provide the visual system.
   - The design emphasis is a clean, boxy, spreadsheet-like aesthetic with sharp borders, dense rows, sticky headers, and selection outlines that merge across adjacent selected cells.

9. **Supporting files and tooling**
   - `vite.config.ts` defines the dev/build toolchain.
   - `eslint.config.js` and the `tsconfig*.json` files define code quality and TypeScript compilation boundaries.
   - `package.json`/`package-lock.json` indicate a standard Node-based frontend build workflow.

10. **Static assets**
   - `src/assets` and `public` hold any logos, icons, or static imagery used by the prototype.
   - There is no evidence in the tree of server-managed assets or runtime media pipelines.

11. **Documentation vs implementation**
   - `README.md` and `full_chat.md` are important for understanding product intent and the evolution of the UI behavior, but they are not runtime dependencies.
   - The chat transcript suggests the intended behavior includes realistic AI-like enrichment, but the code tree itself suggests this is implemented in-browser or mocked locally unless additional hidden files exist.

12. **Architecture summary for diagramming**
   - Draw this repo as a **single client app** with one main React stateful shell feeding a highly interactive datagrid.
   - The major internal boundaries are: **bootstrap**, **grid/state management**, **selection engine**, **async enrichment/AI column workflow**, and **presentation/styling**.

Main entry points: [`src/App.tsx`](https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/App.tsx) (App shell), [`src/main.tsx`](https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/main.tsx) (Bootstrap), [`index.html`](https://github.com/maxjendrall/fluar-clay-clone/blob/main/index.html) (Host page), [`vite.config.ts`](https://github.com/maxjendrall/fluar-clay-clone/blob/main/vite.config.ts) (Vite config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_index_html["Host page<br/>html shell<br/>[index.html]"]
  node_main_tsx["Bootstrap<br/>React entry<br/>[main.tsx]"]
  node_app_tsx["App shell<br/>React orchestrator<br/>[App.tsx]"]
  node_grid_state[("Grid state<br/>datagrid model")]
  node_selection_engine{{"Selection"}}
  node_enrichment_pipeline["Enrichment<br/>async workflow"]
  node_ai_column_flow["AI columns<br/>schema mutation"]
  node_row_context["Row context<br/>prompt context"]
  node_presentation["Presentation<br/>UI styling"]
  node_app_css["App styles<br/>component css<br/>[App.css]"]
  node_index_css["Global styles<br/>base css<br/>[index.css]"]
  node_assets[("Assets<br/>static media")]
end

subgraph group_tooling["Tooling"]
  node_vite_config["Vite config<br/>build config<br/>[vite.config.ts]"]
  node_tsconfig["TypeScript config<br/>compiler config<br/>[tsconfig.json]"]
  node_eslint["Lint config<br/>[eslint.config.js]"]
end

node_index_html -->|"loads"| node_main_tsx
node_main_tsx -->|"mounts"| node_app_tsx
node_app_tsx -->|"owns"| node_grid_state
node_app_tsx -->|"routes input"| node_selection_engine
node_app_tsx -->|"runs"| node_enrichment_pipeline
node_app_tsx -->|"adds columns"| node_ai_column_flow
node_selection_engine -->|"updates"| node_grid_state
node_enrichment_pipeline -->|"uses context"| node_row_context
node_row_context -->|"reads from"| node_grid_state
node_enrichment_pipeline -->|"writes cells"| node_grid_state
node_ai_column_flow -->|"mutates schema"| node_grid_state
node_app_tsx -->|"coordinates"| node_presentation
node_presentation -->|"styled by"| node_app_css
node_presentation -->|"inherits"| node_index_css
node_presentation -->|"uses"| node_assets
node_vite_config -->|"bundles"| node_main_tsx
node_tsconfig -->|"types"| node_app_tsx
node_eslint -->|"checks"| node_app_tsx

click node_index_html "https://github.com/maxjendrall/fluar-clay-clone/blob/main/index.html"
click node_main_tsx "https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/main.tsx"
click node_app_tsx "https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/App.tsx"
click node_app_css "https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/App.css"
click node_index_css "https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/index.css"
click node_assets "https://github.com/maxjendrall/fluar-clay-clone/tree/main/src/assets"
click node_vite_config "https://github.com/maxjendrall/fluar-clay-clone/blob/main/vite.config.ts"
click node_tsconfig "https://github.com/maxjendrall/fluar-clay-clone/blob/main/tsconfig.json"
click node_eslint "https://github.com/maxjendrall/fluar-clay-clone/blob/main/eslint.config.js"

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_index_html,node_main_tsx,node_app_tsx,node_grid_state,node_selection_engine,node_enrichment_pipeline,node_ai_column_flow,node_row_context,node_presentation,node_app_css,node_index_css,node_assets toneBlue
class node_vite_config,node_tsconfig,node_eslint toneAmber
```

## Components

### Client app

Static React SPA running entirely in the browser

- [Host page](https://github.com/maxjendrall/fluar-clay-clone/blob/main/index.html): html shell · Vite entry document that loads the React app · `index.html`
- [Bootstrap](https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/main.tsx): React entry · Mounts the app into the DOM · `src/main.tsx`
- [App shell](https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/App.tsx): React orchestrator · Main stateful surface coordinating the grid and interactions · `src/App.tsx`
- **Grid state**: datagrid model · Rows, columns, cell states, and runtime schema changes
- **Selection**: cell selection · Handles single, range, and disjoint cell selection behavior
- **Enrichment**: async workflow · Simulated per-cell processing lifecycle for generated values
- **AI columns**: schema mutation · Adds generated columns and reconciles headers with row data
- **Row context**: prompt context · Collects other processed row values used during generation
- **Presentation**: UI styling · Spreadsheet-like layout, sticky headers, borders, and selection outlines
- [App styles](https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/App.css): component css · Component-specific visual rules for the datagrid shell · `src/App.css`
- [Global styles](https://github.com/maxjendrall/fluar-clay-clone/blob/main/src/index.css): base css · Page-level defaults and shared styling foundations · `src/index.css`
- [Assets](https://github.com/maxjendrall/fluar-clay-clone/tree/main/src/assets): static media · Icons and imagery used by the prototype · `src/assets`

### Tooling

Build and type-check configuration for the frontend

- [Vite config](https://github.com/maxjendrall/fluar-clay-clone/blob/main/vite.config.ts): build config · Dev and production build settings · `vite.config.ts`
- [TypeScript config](https://github.com/maxjendrall/fluar-clay-clone/blob/main/tsconfig.json): compiler config · TypeScript compilation boundaries and project settings · `tsconfig.json`
- [Lint config](https://github.com/maxjendrall/fluar-clay-clone/blob/main/eslint.config.js): lint config · Code quality and linting rules · `eslint.config.js`

## Connections

- Host page → Bootstrap: loads · Host document hands control to the React bootstrap
- Bootstrap → App shell: mounts · Bootstrap renders the application shell
- App shell → Grid state: owns · Main component coordinates the table model and runtime mutations
- App shell → Selection: routes input · Cell clicks and modifier-key gestures update selection state
- App shell → Enrichment: runs · Triggers async enrichment for selected cells and rows
- App shell → AI columns: adds columns · Creates AI-generated columns at runtime
- Selection → Grid state: updates · Selection state is applied to the current grid model
- Enrichment → Row context: uses context · Generation reads existing row values before producing output
- Row context → Grid state: reads from · Context is assembled from the current row data
- Enrichment → Grid state: writes cells · Async completion updates processing and completed cell states
- AI columns → Grid state: mutates schema · Column additions reconcile headers and per-row data
- App shell → Presentation: coordinates · Shell drives the spreadsheet-like visual composition
- Presentation → App styles: styled by · Component-level styles define the datagrid look and feel
- Presentation → Global styles: inherits · Global styles provide baseline page presentation
- Presentation → Assets: uses · UI may reference static images or icons
- Vite config → Bootstrap: bundles · Vite resolves the frontend entry during dev and build
- TypeScript config → App shell: types · TypeScript settings govern the React source files
- Lint config → App shell: checks · Linting applies to the application implementation