25fbd25b05
* fix(frontend): cap deeply nested list indentation to prevent render crash Deeply nested lists make marked's recursive list tokenizer overflow the call stack during Streamdown's lexing useMemo, throwing an uncaught "RangeError: Maximum call stack size exceeded" that replaces the chat route with an error page (issue #3393); on larger stacks the same input exhausts the heap, which the render error boundary cannot catch. Mirror the existing capBlockquoteNesting guard with capListNesting, which clamps leading whitespace to 200 columns (~100 nesting levels) only when pathologically deep indentation is present, leaving normal content and fenced code untouched. Wire both through capMarkdownNesting. * fix(frontend): satisfy prettier format check in preprocess test * fix(frontend): exempt indented code from list-indent cap (PR #3570 review) * fix(frontend): keep capping all deep indentation outside fenced code Revert the indented-code exemption from the PR #3570 review nit. Taken literally the suggested guard (insideFence || INDENTED_CODE_RE.test(line)) no-ops capListNesting, because INDENTED_CODE_RE matches every line with 4+ leading spaces — i.e. exactly the deep-indent lines the cap targets. A context-aware exemption (only treat 4+-space lines as code after a blank line) instead reopens the crash: blank-separated deeply nested list items get exempted and still blow up marked (verified: OOM at depth ~1.5k). Unlike blockquotes (markers take <=3 leading spaces, so deep-quote lines never look like indented code), list vs. indented-code indentation is ambiguous line-by-line, so any exemption is exploitable. Keep capping all deep indentation outside fenced code; the only cost is mild corruption of a >200-column indented-code line, which never occurs in real content and is strictly preferable to a render crash. Add a regression test locking the blank-line case. |
||
|---|---|---|
| .. | ||
| .vscode | ||
| public | ||
| scripts | ||
| src | ||
| tests | ||
| .env.example | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| AGENTS.md | ||
| CLAUDE.md | ||
| components.json | ||
| Dockerfile | ||
| eslint.config.js | ||
| Makefile | ||
| next.config.js | ||
| package.json | ||
| playwright.config.ts | ||
| playwright.real-backend.config.ts | ||
| playwright.record.config.ts | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| postcss.config.js | ||
| prettier.config.js | ||
| README.md | ||
| tsconfig.json | ||
| vitest.config.ts | ||
DeerFlow Frontend
Like the original DeerFlow 1.0, we would love to give the community a minimalistic and easy-to-use web interface with a more modern and flexible architecture.
Tech Stack
- Framework: Next.js 16 with App Router
- UI: React 19, Tailwind CSS 4, Shadcn UI, MagicUI and React Bits
- AI Integration: LangGraph SDK and Vercel AI Elements
Quick Start
Prerequisites
- Node.js 22+
- pnpm 10.26.2+
Installation
# Install dependencies
pnpm install
# Copy environment variables
cp .env.example .env
# Edit .env with your configuration
Development
# Start development server
pnpm dev
# The app will be available at http://localhost:3000
Build & Test
# Type check
pnpm typecheck
# Check formatting
pnpm format
# Apply formatting
pnpm format:write
# Lint
pnpm lint
# Run unit tests
pnpm test
# One-time setup: install Playwright Chromium browser
pnpm exec playwright install chromium
# Run E2E tests (builds and starts production server automatically)
pnpm test:e2e
# Build for production
pnpm build
# Start production server
pnpm start
Site Map
├── / # Landing page
├── /chats # Chat list
├── /chats/new # New chat page
└── /chats/[thread_id] # A specific chat page
Configuration
Environment Variables
Key environment variables (see .env.example for full list):
# Backend API URL (optional, uses local Next.js/nginx proxy by default)
NEXT_PUBLIC_BACKEND_BASE_URL="http://localhost:8001"
# LangGraph-compatible API URL (optional, uses local Next.js/nginx proxy by default)
NEXT_PUBLIC_LANGGRAPH_BASE_URL="http://localhost:8001/api"
Project Structure
tests/
├── e2e/ # E2E tests (Playwright, Chromium, mocked backend)
└── unit/ # Unit tests (mirrors src/ layout)
src/
├── app/ # Next.js App Router pages
│ ├── api/ # API routes
│ ├── workspace/ # Main workspace pages
│ └── mock/ # Mock/demo pages
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── workspace/ # Workspace-specific components
│ ├── landing/ # Landing page components
│ └── ai-elements/ # AI-related UI elements
├── core/ # Core business logic
│ ├── api/ # API client & data fetching
│ ├── artifacts/ # Artifact management
│ ├── config/ # App configuration
│ ├── i18n/ # Internationalization
│ ├── mcp/ # MCP integration
│ ├── messages/ # Message handling
│ ├── models/ # Data models & types
│ ├── settings/ # User settings
│ ├── skills/ # Skills system
│ ├── threads/ # Thread management
│ ├── todos/ # Todo system
│ └── utils/ # Utility functions
├── hooks/ # Custom React hooks
├── lib/ # Shared libraries & utilities
├── server/ # Server-side code
│ └── better-auth/ # Authentication setup and session helpers
└── styles/ # Global styles
Scripts
| Command | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm test |
Run unit tests with Vitest |
pnpm test:e2e |
Run E2E tests with Playwright |
pnpm format |
Check formatting with Prettier |
pnpm format:write |
Apply formatting with Prettier |
pnpm lint |
Run ESLint |
pnpm lint:fix |
Fix ESLint issues |
pnpm typecheck |
Run TypeScript type checking |
pnpm check |
Run both lint and typecheck |
Development Notes
- Uses pnpm workspaces (see
packageManagerin package.json) - Turbopack enabled by default in development for faster builds
- Environment validation can be skipped with
SKIP_ENV_VALIDATION=1(useful for Docker) - Backend API URLs are optional; nginx proxy is used by default in development
License
MIT License. See LICENSE for details.