# krisnasetyadi/doculens-ui architecture

> Architecture diagram of the GitHub repository krisnasetyadi/doculens-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/krisnasetyadi/doculens-ui
- Repository: https://github.com/krisnasetyadi/doculens-ui

## Overview

DocuLens is a Next.js frontend for document-based AI Q&A. Users enter the workspace to ask questions, review answers with source links, and open cited PDFs; they can also manage knowledge sources and browse prior conversations. The app includes authentication, compliance/gap-analysis tools, and subscription/payment flows. The README documents the chat-to-backend request flow and PDF citation behavior; sampled service code confirms authenticated requests, while unsampled route and feature wiring is represented conservatively.

Main entry points: [`services/request-handler.ts`](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/request-handler.ts) (HTTP request handler), [`components/workspace/chat-interface/chat-interface.tsx`](https://github.com/krisnasetyadi/doculens-ui/blob/main/components/workspace/chat-interface/chat-interface.tsx) (Chat interface), [`app/(workspace)/ask/page.tsx`](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/ask/page.tsx) (Ask workspace), [`hooks/use-chat-thread.ts`](https://github.com/krisnasetyadi/doculens-ui/blob/main/hooks/use-chat-thread.ts) (Chat thread state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Workspace experience"]
  node_ask["Ask workspace<br/>[page.tsx]"]
  node_chat["Chat interface<br/>[chat-interface.tsx]"]
  node_thread["Chat thread state<br/>[use-chat-thread.ts]"]
  node_history["History and search<br/>[page.tsx]"]
  node_pdf["PDF viewer"]
end

subgraph group_sources["Knowledge sources"]
  node_sourcepage["Sources workspace<br/>[page.tsx]"]
  node_sourcepanel["Source management<br/>[sources-panel.tsx]"]
  node_sourcehooks["Source data hooks"]
  node_compliance["Compliance runs<br/>[page.tsx]"]
  node_gap["Gap analysis"]
end

subgraph group_identity["Identity and billing"]
  node_login["Login and registration<br/>[page.tsx]"]
  node_authstate["Authentication state<br/>[auth-store.ts]"]
  node_payment["Payment flow<br/>[page.tsx]"]
end

subgraph group_integration["Backend integration"]
  node_request["HTTP request handler<br/>[request-handler.ts]"]
  node_chatapi["Hybrid query API"]
  node_sessionapi["Session API<br/>[sessions-api.ts]"]
  node_pdfapi["PDF collection API"]
  node_dbapi["Database connection API"]
  node_gapapi["Gap analysis API"]
  node_authapi["Authentication API<br/>[auth-api.ts]"]
  node_paymentapi["Payment API<br/>[payment-api.ts]"]
end

node_user(("User"))
node_backend{{"Backend API"}}

node_user -->|"opens workspace"| node_ask
node_ask -->|"renders"| node_chat
node_chat -->|"uses thread state"| node_thread
node_thread -->|"submits questions"| node_chatapi
node_chatapi -->|"uses HTTP client"| node_request
node_request -->|"sends authenticated requests"| node_backend
node_backend -->|"returns responses"| node_request
node_chat -->|"opens citations"| node_pdf
node_pdf -->|"retrieves PDF"| node_pdfapi
node_history -->|"loads conversations"| node_sessionapi
node_sourcepage -->|"renders"| node_sourcepanel
node_sourcepanel -->|"uses source state"| node_sourcehooks
node_sourcehooks -->|"manages connections"| node_dbapi
node_compliance -->|"presents analysis"| node_gap
node_gap -->|"requests analysis"| node_gapapi
node_login -->|"authenticates"| node_authapi
node_authapi -->|"stores session token"| node_authstate
node_payment -->|"starts payment"| node_paymentapi
node_paymentapi -->|"uses HTTP client"| node_request

click node_ask "https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/ask/page.tsx"
click node_chat "https://github.com/krisnasetyadi/doculens-ui/blob/main/components/workspace/chat-interface/chat-interface.tsx"
click node_thread "https://github.com/krisnasetyadi/doculens-ui/blob/main/hooks/use-chat-thread.ts"
click node_history "https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/history/page.tsx"
click node_pdf "https://github.com/krisnasetyadi/doculens-ui/blob/main/components/pdf-viewer-dialog.tsx"
click node_sourcepage "https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/sources/page.tsx"
click node_sourcepanel "https://github.com/krisnasetyadi/doculens-ui/blob/main/components/workspace/sources-panel/sources-panel.tsx"
click node_sourcehooks "https://github.com/krisnasetyadi/doculens-ui/blob/main/hooks/use-source-inventory.ts"
click node_compliance "https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/compliance/%5BrunId%5D/page.tsx"
click node_gap "https://github.com/krisnasetyadi/doculens-ui/blob/main/components/gap-analysis-dialog.tsx"
click node_login "https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(auth)/login/page.tsx"
click node_authstate "https://github.com/krisnasetyadi/doculens-ui/blob/main/stores/auth-store.ts"
click node_payment "https://github.com/krisnasetyadi/doculens-ui/blob/main/app/payment/page.tsx"
click node_request "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/request-handler.ts"
click node_chatapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/hybrid-query-api.ts"
click node_sessionapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/sessions-api.ts"
click node_pdfapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/pdf-collection-api.ts"
click node_dbapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/database-connection-api.ts"
click node_gapapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/gap-analysis-api.ts"
click node_authapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/auth-api.ts"
click node_paymentapi "https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/payment-api.ts"

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_ask,node_chat,node_thread,node_history,node_pdf,node_user toneBlue
class node_sourcepage,node_sourcepanel,node_sourcehooks,node_compliance,node_gap toneAmber
class node_login,node_authstate,node_payment,node_backend toneMint
class node_request,node_chatapi,node_sessionapi,node_pdfapi,node_dbapi,node_gapapi,node_authapi,node_paymentapi toneRose
```

## Components

### Workspace experience

- [Ask workspace](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/ask/page.tsx): `app/(workspace)/ask/page.tsx`
- [Chat interface](https://github.com/krisnasetyadi/doculens-ui/blob/main/components/workspace/chat-interface/chat-interface.tsx): `components/workspace/chat-interface/chat-interface.tsx`
- [Chat thread state](https://github.com/krisnasetyadi/doculens-ui/blob/main/hooks/use-chat-thread.ts): `hooks/use-chat-thread.ts`
- [History and search](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/history/page.tsx): `app/(workspace)/history/page.tsx`
- [PDF viewer](https://github.com/krisnasetyadi/doculens-ui/blob/main/components/pdf-viewer-dialog.tsx): `components/pdf-viewer-dialog.tsx`

### Knowledge sources

- [Sources workspace](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/sources/page.tsx): `app/(workspace)/sources/page.tsx`
- [Source management](https://github.com/krisnasetyadi/doculens-ui/blob/main/components/workspace/sources-panel/sources-panel.tsx): `components/workspace/sources-panel/sources-panel.tsx`
- [Source data hooks](https://github.com/krisnasetyadi/doculens-ui/blob/main/hooks/use-source-inventory.ts): `hooks/use-source-inventory.ts`
- [Compliance runs](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(workspace)/compliance/%5BrunId%5D/page.tsx): `app/(workspace)/compliance/[runId]/page.tsx`
- [Gap analysis](https://github.com/krisnasetyadi/doculens-ui/blob/main/components/gap-analysis-dialog.tsx): `components/gap-analysis-dialog.tsx`

### Identity and billing

- [Login and registration](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/(auth)/login/page.tsx): `app/(auth)/login/page.tsx`
- [Authentication state](https://github.com/krisnasetyadi/doculens-ui/blob/main/stores/auth-store.ts): `stores/auth-store.ts`
- [Payment flow](https://github.com/krisnasetyadi/doculens-ui/blob/main/app/payment/page.tsx): `app/payment/page.tsx`

### Backend integration

- [HTTP request handler](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/request-handler.ts): `services/request-handler.ts`
- [Hybrid query API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/hybrid-query-api.ts): `services/resources/hybrid-query-api.ts`
- [Session API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/sessions-api.ts): `services/resources/sessions-api.ts`
- [PDF collection API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/pdf-collection-api.ts): `services/resources/pdf-collection-api.ts`
- [Database connection API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/database-connection-api.ts): `services/resources/database-connection-api.ts`
- [Gap analysis API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/gap-analysis-api.ts): `services/resources/gap-analysis-api.ts`
- [Authentication API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/auth-api.ts): `services/resources/auth-api.ts`
- [Payment API](https://github.com/krisnasetyadi/doculens-ui/blob/main/services/resources/payment-api.ts): `services/resources/payment-api.ts`

### Other components

- **User**
- **Backend API**

## Connections

- User → Ask workspace: opens workspace
- Ask workspace → Chat interface: renders
- Chat interface → Chat thread state: uses thread state
- Chat thread state → Hybrid query API: submits questions
- Hybrid query API → HTTP request handler: uses HTTP client
- HTTP request handler → Backend API: sends authenticated requests
- Backend API → HTTP request handler: returns responses
- Chat interface → PDF viewer: opens citations
- PDF viewer → PDF collection API: retrieves PDF
- History and search → Session API: loads conversations
- Sources workspace → Source management: renders
- Source management → Source data hooks: uses source state
- Source data hooks → Database connection API: manages connections
- Compliance runs → Gap analysis: presents analysis
- Gap analysis → Gap analysis API: requests analysis
- Login and registration → Authentication API: authenticates
- Authentication API → Authentication state: stores session token
- Payment flow → Payment API: starts payment
- Payment API → HTTP request handler: uses HTTP client