mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-09-14 16:08:41 +00:00
ec0ac474c4
* feat(authz): gate thread-delete and run-cancel UI on effective permissions (Phase 4, #4063) Consume the effective route permissions surfaced by #5228 so the UI hides actions the caller's role cannot perform: - threads:delete hides the sidebar thread-row Delete menu item and the sidecar panel delete button (every useDeleteThread consumer) - runs:cancel disables the composer stop affordance; all three stop entry points converge on one check inside handleStopStreaming hasPermission treats an absent/null/unresolved permission list as permissive, so a mixed old-backend/new-frontend deploy never hides actions the caller can still perform. The Gateway @require_permission guards remain the single enforcement point. * fix(authz): review follow-ups for stop gating (comment accuracy, a11y, tests) - Correct the defense-in-depth comment: the submit-button click is the only live entry into handleStopStreaming (handleSubmit returns early with the pleaseWaitStreaming toast while streaming, so the kind==="stop" branch is unreachable); the handler gate stays as future-proofing. - Explain the disabled stop affordance with aria-label + title (Radix tooltips don't fire on disabled buttons), with en-US/zh-CN strings. - Add the composer stop-gating DOM tests (disabled + onStop never fires + permissive default) and the sidebar delete-menu gating tests, so all gated surfaces carry wiring tests. * fix(authz): stop conditional aria-label from stripping the submit name The stop-gating follow-up (1612855b) explained the disabled stop affordance with aria-label/title but passed explicitly-undefined values in the non-denied case. PromptInputSubmit declares its default aria-label="Submit" before {...props}, so the undefined key landed in the spread and clobbered the default: React omits the attribute entirely and the submit control lost its accessible name in every state, which broke the sidecar e2e layout helper (it locates the button by its "Submit" label). Spread the attributes conditionally so they only attach when stopDenied, and lock the invariant with a DOM test asserting the base "Submit" name survives when stop is not denied (mutation-verified: reverting the conditional spread turns the new test red). * test(authz): drop unused rerenderWith helper, guard accessible name by role query Address the review nit on the stop-gating DOM tests: the rerenderWith helper was never called, and a second render() would append a composer instead of updating the first one anyway — drop it (the sidecar-delete-gating tests already demonstrate the correct rerender pattern if a granted->denied flip test is ever needed). Also resolve the accessible-name regression guard through getByRole("button", { name: "Submit" }) so it fails exactly the way e2e and assistive tech consume the control (mutation-verified: the explicitly-undefined aria-label form turns it red). --------- Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
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.