mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-09-09 21:49:37 +00:00
05432f4b43
* test(threads): add red R3/R4 merge ordering regressions * fix(threads): preserve trusted seq positions through content merge (R3/R4) Extract the message ordering/identity logic into a pure core/threads/message-order.ts module. Each normalized identity now tracks latest visible content and trusted position separately: content replacement no longer drops deerflow_seq/run_id/turn_duration (R3), and a seq-carrying live message is placed by the ascending seq skeleton instead of the next shared identity anchor (R4: 1,3,2,5 -> 1,2,3,5). buildVisibleHistoryMessages converges repeated identities to the earliest visible feed row (mirroring backend get_message_seqs), and the summarization transient bridge plus rendered ledger share the same position priority: trusted seq outranks anchor weaving, bridge refreshes keep known seqs, and hidden control copies never contribute a visible position. * test(e2e): add long-thread ordering regression with compaction and pagination Add tests/e2e/thread-ordering.spec.ts: a deterministic 68-row, 33-turn fixture with two hidden compaction summaries, a paginated /messages/page mock, and a live compaction during submit (real SSE frame shapes). Asserts DOM group order at stage barriers, outline/scroll navigation across the virtualized list, tool-card association, and order stability across reload. Also close three mock gaps in mockLangGraphAPI (token-usage, mcp-tasks, workspace-changes): unmocked they fell through to the absent gateway and the 401 redirected thread pages to /login, breaking every thread-page spec in a gateway-less Playwright environment. * test(threads): address review on ordering regression coverage - e2e: actually expand the collapsed web_search step and assert the intermediate result payload (realistic JSON array fixture); assert the new turn's DOM relative order via compareDocumentPosition instead of racing viewport coordinates; add a Custom Agent route regression sharing the same paginated fixture. - Add a unit test for the hidden-control-only seq fallback path. - Keep isNonEmptyString in hooks.ts (message-order.ts does not use it). - Document the seq-first position authority contract in frontend/src/AGENTS.md. * test(threads): type run_id fixtures via getMessageRunId accessor * test(e2e): exercise the real collapsed-steps region for the tool payload check The previous toolStep.click() was a no-op: as the last tool call, the web_search step rendered unconditionally. Add a second tool call to the turn-30 fixture so web_search falls into the collapsed moreSteps region, assert the intermediate result payload is hidden while collapsed, then click the "1 more step" button and assert it becomes visible. * docs(frontend): prettier-format AGENTS.md merge contract * fix(frontend): anchor mixed-sequence message segments * test(auth): include project permissions in me contracts * fix(frontend): anchor trailing steps to positioned live results * fix(frontend): preserve prefixes before rescued sequence anchors
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
│ ├── showcase/ # Allowlisted public read-only demos
│ ├── 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 Webpack |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm test |
Run unit tests with Rstest |
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) - Webpack is the default development bundler until the upstream Turbopack PostCSS worker leak is fixed in a stable Next.js release (#5132). Set
DEER_FLOW_DEV_BUNDLER=turboto opt in to Turbopack for local diagnosis, orDEER_FLOW_DEV_BUNDLER=webpackto select Webpack explicitly. Reconsider the default after the stable fix is verified on macOS arm64 and Linux. - 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.