# mdyeasinsamadarnob/bfiu_app_web architecture

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

- Interactive diagram: https://gitdiagram.com/mdyeasinsamadarnob/bfiu_app_web
- Repository: https://github.com/mdyeasinsamadarnob/bfiu_app_web

## Overview

1. This is a Next.js App Router application, not just a static site. The top-level shell is in `app/layout.tsx`, global styling is in `app/globals.css`, and theme support is wired through `components/ThemeProvider.tsx` and `components/ThemeToggle.tsx`.

2. The app has three main user-facing surfaces: the landing page at `app/page.tsx`, an architecture browser at `app/architecture/page.tsx`, and a timeline view at `app/timeline/page.tsx`. These pages are mostly composition layers that assemble reusable components around preloaded content.

3. The architecture content is file-backed and organized as structured datasets under `data/architecture.json`, `data/architecture_eaip-langgraph.json`, `data/architecture_eaip-orch.json`, and `data/architecture_eaip-rag.json`, with TypeScript helpers in `data/architectureData.ts`. This suggests multiple architecture variants or scenarios are first-class in the UI.

4. The architecture visualization itself is componentized in `components/architecture/ArchitectureNode.tsx`, `ArchitectureGroupNode.tsx`, and likely uses `components/HighlightableText.tsx` for emphasis/search highlighting. The architectural diagram is therefore a presentational tree/group rendering layer over static model data, rather than a live modeling backend.

5. The timeline subsystem is similarly data-driven: `data/timeline.json` and `data/timelineData.ts` feed `components/TimelineView.tsx` and the `app/timeline` route. This is a separate content domain from the architecture model, but the same app shell and styling system are reused.

6. There is a chat assistant subsystem exposed through `components/ChatInterface.tsx` and `app/api/chat/route.ts`. That route is a server boundary for message processing, so the UI can talk to backend logic without embedding model calls directly in the client.

7. The presence of `app/api/ollama-status/route.ts` and `lib/config.ts` indicates the chat layer depends on an Ollama runtime being reachable and configurable. In architecture terms, Ollama is an external local/sidecar AI service that the app probes and likely uses for generation.

8. Additional API routes expose structured content to the frontend: `app/api/architecture/route.ts`, `app/api/timeline/route.ts`, and `app/api/rules/route.ts`. This makes the content model available through server endpoints as well as direct imports, creating a clear separation between content storage and UI consumption.

9. The repo also includes extraction and parsing tooling: `extract-docx.js`, `extract-pdf.js`, `parse-rules.js`, and `extracted-content.txt`. These scripts imply an ingestion pipeline that converts source documents into normalized text/rules, which then feed the app’s rule or architecture datasets.

10. Supporting content is modeled as reusable domain widgets: `components/UseCaseCard.tsx` plus `data/useCases.json`/`data/useCases.ts`. This suggests the app presents curated use cases alongside architecture and timeline information, likely as part of the same storytelling or knowledge-exploration flow.

11. The overall boundary pattern is: static/domain data and extracted content in `data/` and scripts, server API routes in `app/api/`, and interactive presentation in `components/` and `app/*` pages. There is no evidence of a traditional database or auth layer; the architecture is centered on file-based content, serverless route handlers, and a local AI backend.

12. Tooling is standard Next.js/TypeScript/Tailwind: `next.config.ts`, `tailwind.config.ts`, `postcss.config.mjs`, `eslint.config.mjs`, and `tsconfig.json`. These affect implementation, but the architecture is dominated by content-driven UI, lightweight server routes, and an external Ollama model service.

Main entry points: [`app/layout.tsx`](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/layout.tsx) (Layout), [`app/architecture/page.tsx`](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/architecture/page.tsx) (Architecture), [`components/TimelineView.tsx`](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/TimelineView.tsx) (Timeline view), [`parse-rules.js`](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/parse-rules.js) (Rules parse)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app_shell["App shell"]
  node_app_layout["Layout<br/>[layout.tsx]"]
  node_app_home["Landing<br/>Route page<br/>[page.tsx]"]
  node_app_arch_page["Architecture<br/>Route page<br/>[page.tsx]"]
  node_app_timeline_page["Timeline<br/>Route page<br/>[page.tsx]"]
  node_globals_css["Global CSS<br/>Stylesheet<br/>[globals.css]"]
end

subgraph group_content["Content data"]
  node_arch_data[("Architecture data<br/>JSON model<br/>[architecture.json]")]
  node_arch_data_ts["Arch helpers<br/>Data helpers"]
  node_timeline_data[("Timeline data<br/>JSON model<br/>[timeline.json]")]
  node_timeline_data_ts["Timeline helpers<br/>Data helpers<br/>[timelineData.ts]"]
  node_use_cases_data[("Use cases<br/>JSON model<br/>[useCases.json]")]
  node_use_cases_ts["Use case helpers<br/>Data helpers<br/>[useCases.ts]"]
end

subgraph group_ui["UI components"]
  node_theme_provider["Theme provider<br/>Theme context<br/>[ThemeProvider.tsx]"]
  node_theme_toggle["Theme toggle<br/>Theme control<br/>[ThemeToggle.tsx]"]
  node_chat_ui["Chat UI<br/>Client component<br/>[ChatInterface.tsx]"]
  node_arch_node["Arch node<br/>Diagram node"]
  node_arch_group_node["Group node<br/>Diagram group"]
  node_highlight_text["Highlight text<br/>Text utility"]
  node_timeline_view["Timeline view<br/>Viewer<br/>[TimelineView.tsx]"]
  node_use_case_card["Use case card<br/>Content card<br/>[UseCaseCard.tsx]"]
end

subgraph group_api["API routes"]
  node_api_architecture["Arch API<br/>Route handler<br/>[route.ts]"]
  node_api_timeline["Timeline API<br/>Route handler<br/>[route.ts]"]
  node_api_rules["Rules API<br/>Route handler<br/>[route.ts]"]
  node_api_chat["Chat API<br/>Route handler<br/>[route.ts]"]
  node_api_ollama["Ollama status<br/>Route handler<br/>[route.ts]"]
  node_lib_config["Config<br/>[config.ts]"]
end

subgraph group_ingest["Ingestion"]
  node_extract_docx{{"DOCX extract<br/>Script<br/>[extract-docx.js]"}}
  node_extract_pdf{{"PDF extract<br/>Script<br/>[extract-pdf.js]"}}
  node_parse_rules{{"Rules parse<br/>Script<br/>[parse-rules.js]"}}
  node_extracted_content["Extracted text<br/>Source text"]
end

node_app_layout -->|"wraps"| node_theme_provider
node_app_layout -->|"loads"| node_globals_css
node_app_layout -->|"hosts"| node_app_home
node_app_layout -->|"hosts"| node_app_arch_page
node_app_layout -->|"hosts"| node_app_timeline_page
node_theme_provider -->|"enables"| node_theme_toggle
node_app_home -->|"composes"| node_chat_ui
node_app_arch_page -->|"composes"| node_arch_node
node_app_arch_page -->|"composes"| node_arch_group_node
node_app_arch_page -->|"uses"| node_highlight_text
node_app_timeline_page -->|"composes"| node_timeline_view
node_timeline_view -->|"reuses"| node_use_case_card
node_arch_node -->|"reads"| node_arch_data
node_arch_group_node -->|"reads"| node_arch_data
node_arch_data_ts -->|"maps"| node_arch_data
node_timeline_view -->|"reads"| node_timeline_data
node_timeline_data_ts -->|"maps"| node_timeline_data
node_use_case_card -->|"reads"| node_use_cases_data
node_use_cases_ts -->|"maps"| node_use_cases_data
node_api_architecture -->|"serves"| node_arch_data_ts
node_api_timeline -->|"serves"| node_timeline_data_ts
node_api_rules -->|"serves"| node_parse_rules
node_api_chat -->|"uses"| node_lib_config
node_api_chat -->|"checks"| node_api_ollama
node_api_ollama -->|"uses"| node_lib_config
node_extract_docx -->|"produces"| node_extracted_content
node_extract_pdf -->|"produces"| node_extracted_content
node_parse_rules -->|"consumes"| node_extracted_content
node_parse_rules -->|"feeds"| node_api_rules

click node_app_layout "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/layout.tsx"
click node_app_home "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/page.tsx"
click node_app_arch_page "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/architecture/page.tsx"
click node_app_timeline_page "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/timeline/page.tsx"
click node_globals_css "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/globals.css"
click node_theme_provider "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/ThemeProvider.tsx"
click node_theme_toggle "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/ThemeToggle.tsx"
click node_chat_ui "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/ChatInterface.tsx"
click node_arch_node "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/architecture/ArchitectureNode.tsx"
click node_arch_group_node "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/architecture/ArchitectureGroupNode.tsx"
click node_highlight_text "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/HighlightableText.tsx"
click node_timeline_view "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/TimelineView.tsx"
click node_use_case_card "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/UseCaseCard.tsx"
click node_arch_data "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/architecture.json"
click node_arch_data_ts "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/architectureData.ts"
click node_timeline_data "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/timeline.json"
click node_timeline_data_ts "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/timelineData.ts"
click node_use_cases_data "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/useCases.json"
click node_use_cases_ts "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/useCases.ts"
click node_api_architecture "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/architecture/route.ts"
click node_api_timeline "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/timeline/route.ts"
click node_api_rules "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/rules/route.ts"
click node_api_chat "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/chat/route.ts"
click node_api_ollama "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/ollama-status/route.ts"
click node_lib_config "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/lib/config.ts"
click node_extract_docx "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/extract-docx.js"
click node_extract_pdf "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/extract-pdf.js"
click node_parse_rules "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/parse-rules.js"
click node_extracted_content "https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/extracted-content.txt"

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_layout,node_app_home,node_app_arch_page,node_app_timeline_page,node_globals_css toneBlue
class node_arch_data,node_arch_data_ts,node_timeline_data,node_timeline_data_ts,node_use_cases_data,node_use_cases_ts toneAmber
class node_theme_provider,node_theme_toggle,node_chat_ui,node_arch_node,node_arch_group_node,node_highlight_text,node_timeline_view,node_use_case_card toneMint
class node_api_architecture,node_api_timeline,node_api_rules,node_api_chat,node_api_ollama,node_lib_config toneRose
class node_extract_docx,node_extract_pdf,node_parse_rules,node_extracted_content toneIndigo
```

## Components

### App shell

Next.js routes, global layout, and theme/styling foundation.

- [Layout](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/layout.tsx): Next layout · Root application shell and providers. · `app/layout.tsx`
- [Landing](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/page.tsx): Route page · Top-level landing page. · `app/page.tsx`
- [Architecture](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/architecture/page.tsx): Route page · Architecture browser page. · `app/architecture/page.tsx`
- [Timeline](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/timeline/page.tsx): Route page · Timeline view page. · `app/timeline/page.tsx`
- [Global CSS](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/globals.css): Stylesheet · Global styling for the app. · `app/globals.css`

### Content data

File-backed domain datasets and helpers.

- [Architecture data](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/architecture.json): JSON model · Primary architecture dataset and variants. · `data/architecture.json`
- [Arch helpers](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/architectureData.ts): Data helpers · TypeScript accessors and transforms for architecture data. · `data/architectureData.ts`
- [Timeline data](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/timeline.json): JSON model · Timeline dataset. · `data/timeline.json`
- [Timeline helpers](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/timelineData.ts): Data helpers · TypeScript accessors for timeline data. · `data/timelineData.ts`
- [Use cases](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/useCases.json): JSON model · Curated use case content. · `data/useCases.json`
- [Use case helpers](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/data/useCases.ts): Data helpers · TypeScript accessors for use case content. · `data/useCases.ts`

### UI components

Reusable presentation components and views.

- [Theme provider](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/ThemeProvider.tsx): Theme context · Wires theme state into the app. · `components/ThemeProvider.tsx`
- [Theme toggle](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/ThemeToggle.tsx): Theme control · UI control for switching theme. · `components/ThemeToggle.tsx`
- [Chat UI](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/ChatInterface.tsx): Client component · Interactive assistant interface. · `components/ChatInterface.tsx`
- [Arch node](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/architecture/ArchitectureNode.tsx): Diagram node · Renders an architecture node. · `components/architecture/ArchitectureNode.tsx`
- [Group node](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/architecture/ArchitectureGroupNode.tsx): Diagram group · Renders grouped architecture structure. · `components/architecture/ArchitectureGroupNode.tsx`
- [Highlight text](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/HighlightableText.tsx): Text utility · Emphasis and search highlighting for labels. · `components/HighlightableText.tsx`
- [Timeline view](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/TimelineView.tsx): Viewer · Renders timeline content. · `components/TimelineView.tsx`
- [Use case card](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/components/UseCaseCard.tsx): Content card · Reusable card for curated use cases. · `components/UseCaseCard.tsx`

### API routes

Server boundaries exposing content and chat capabilities.

- [Arch API](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/architecture/route.ts): Route handler · Serves architecture content to the frontend. · `app/api/architecture/route.ts`
- [Timeline API](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/timeline/route.ts): Route handler · Serves timeline content to the frontend. · `app/api/timeline/route.ts`
- [Rules API](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/rules/route.ts): Route handler · Serves parsed rules or policy content. · `app/api/rules/route.ts`
- [Chat API](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/chat/route.ts): Route handler · Server boundary for assistant messaging. · `app/api/chat/route.ts`
- [Ollama status](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/app/api/ollama-status/route.ts): Route handler · Probes availability of the local AI runtime. · `app/api/ollama-status/route.ts`
- [Config](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/lib/config.ts): Runtime config · Shared configuration for backend connectivity. · `lib/config.ts`

### Ingestion

Scripts and extracted source content used to build normalized data.

- [DOCX extract](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/extract-docx.js): Script · Converts Word documents to text. · `extract-docx.js`
- [PDF extract](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/extract-pdf.js): Script · Converts PDFs to text. · `extract-pdf.js`
- [Rules parse](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/parse-rules.js): Script · Parses extracted text into normalized rules. · `parse-rules.js`
- [Extracted text](https://github.com/mdyeasinsamadarnob/bfiu_app_web/blob/main/extracted-content.txt): Source text · Intermediate normalized content produced by ingestion. · `extracted-content.txt`

## Connections

- Layout → Theme provider: wraps · Provides theme context to the app.
- Layout → Global CSS: loads · Applies global styling.
- Layout → Landing: hosts · Serves the landing route inside the root shell.
- Layout → Architecture: hosts · Serves the architecture browser route.
- Layout → Timeline: hosts · Serves the timeline route.
- Theme provider → Theme toggle: enables · Provides theme state for user switching.
- Landing → Chat UI: composes · Landing page can surface the assistant interface.
- Architecture → Arch node: composes · Page assembles architecture node rendering.
- Architecture → Group node: composes · Page assembles grouped architecture rendering.
- Architecture → Highlight text: uses · Supports emphasis and matching in architecture labels.
- Timeline → Timeline view: composes · Page assembles the timeline viewer.
- Timeline view → Use case card: reuses · Timeline-related content cards share presentation patterns.
- Arch node → Architecture data: reads · Architecture nodes are driven by dataset content.
- Group node → Architecture data: reads · Grouped rendering is based on architecture data.
- Arch helpers → Architecture data: maps · Helpers normalize and expose architecture records.
- Timeline view → Timeline data: reads · Timeline view renders file-backed timeline content.
- Timeline helpers → Timeline data: maps · Helpers normalize timeline records.
- Use case card → Use cases: reads · Use case cards render curated content.
- Use case helpers → Use cases: maps · Helpers expose use case records.
- Arch API → Arch helpers: serves · API exposes architecture content from helpers.
- Timeline API → Timeline helpers: serves · API exposes timeline content from helpers.
- Rules API → Rules parse: serves · Rules endpoint is backed by parsed rule content.
- Chat API → Config: uses · Chat route depends on shared runtime configuration.
- Chat API → Ollama status: checks · Chat flow depends on Ollama availability.
- Ollama status → Config: uses · Status probe uses runtime configuration.
- DOCX extract → Extracted text: produces · DOCX ingestion contributes to normalized text.
- PDF extract → Extracted text: produces · PDF ingestion contributes to normalized text.
- Rules parse → Extracted text: consumes · Rules parsing consumes extracted text.
- Rules parse → Rules API: feeds · Parsed rule content powers the rules endpoint.