feat: agent workflow builder (#2264)

* feat: implement WorkflowAgent and GraphExecutor for workflow management and execution

* refactor: workflow schemas and introduce WorkflowEngine

- Updated schemas in `schemas.py` to include new agent types and configurations.
- Created `WorkflowEngine` class in `workflow_engine.py` to manage workflow execution.
- Enhanced `StreamProcessor` to handle workflow-related data.
- Added new routes and utilities for managing workflows in the user API.
- Implemented validation and serialization functions for workflows.
- Established MongoDB collections and indexes for workflows and related entities.

* refactor: improve WorkflowAgent documentation and update type hints in WorkflowEngine

* feat: workflow builder and managing in frontend

- Added new endpoints for workflows in `endpoints.ts`.
- Implemented `getWorkflow`, `createWorkflow`, and `updateWorkflow` methods in `userService.ts`.
- Introduced new UI components for alerts, buttons, commands, dialogs, multi-select, popovers, and selects.
- Enhanced styling in `index.css` with new theme variables and animations.
- Refactored modal components for better layout and styling.
- Configured TypeScript paths and Vite aliases for cleaner imports.

* feat: add workflow preview component and related state management

- Implemented WorkflowPreview component for displaying workflow execution.
- Created WorkflowPreviewSlice for managing workflow preview state, including queries and execution steps.
- Added WorkflowMiniMap for visual representation of workflow nodes and their statuses.
- Integrated conversation handling with the ability to fetch answers and manage query states.
- Introduced reusable Sheet component for UI overlays.
- Updated Redux store to include workflowPreview reducer.

* feat: enhance workflow execution details and state management in WorkflowEngine and WorkflowPreview

* feat: enhance workflow components with improved UI and functionality

- Updated WorkflowPreview to allow text truncation for better display of long names.
- Enhanced BaseNode with connectable handles and improved styling for better visibility.
- Added MobileBlocker component to inform users about desktop requirements for the Workflow Builder.
- Introduced PromptTextArea component for improved variable insertion and search functionality, including upstream variable extraction and context addition.

* feat(workflow): add owner validation and graph version support

* fix: ruff lint

---------

Co-authored-by: Alex <a@tushynski.me>

application/agents/agent_creator.py

@@ -1,6 +1,8 @@
+import logging
+
 from application.agents.classic_agent import ClassicAgent
 from application.agents.react_agent import ReActAgent
-import logging
+from application.agents.workflow_agent import WorkflowAgent
 
 logger = logging.getLogger(__name__)
 
@@ -9,6 +11,7 @@ class AgentCreator:
     agents = {
         "classic": ClassicAgent,
         "react": ReActAgent,
+        "workflow": WorkflowAgent,
     }
 
     @classmethod
@@ -16,5 +19,4 @@ class AgentCreator:
         agent_class = cls.agents.get(type.lower())
         if not agent_class:
             raise ValueError(f"No agent class found for type {type}")
-        
         return agent_class(*args, **kwargs)

application/agents/base.py

@@ -367,7 +367,9 @@ class BaseAgent(ABC):
                 f"Context at limit: {current_tokens:,}/{context_limit:,} tokens "
                 f"({percentage:.1f}%). Model: {self.model_id}"
             )
-        elif current_tokens >= int(context_limit * settings.COMPRESSION_THRESHOLD_PERCENTAGE):
+        elif current_tokens >= int(
+            context_limit * settings.COMPRESSION_THRESHOLD_PERCENTAGE
+        ):
             logger.info(
                 f"Context approaching limit: {current_tokens:,}/{context_limit:,} tokens "
                 f"({percentage:.1f}%)"

application/agents/workflow_agent.py

@@ -0,0 +1,218 @@
+import logging
+from datetime import datetime, timezone
+from typing import Any, Dict, Generator, Optional
+
+from application.agents.base import BaseAgent
+from application.agents.workflows.schemas import (
+    ExecutionStatus,
+    Workflow,
+    WorkflowEdge,
+    WorkflowGraph,
+    WorkflowNode,
+    WorkflowRun,
+)
+from application.agents.workflows.workflow_engine import WorkflowEngine
+from application.core.mongo_db import MongoDB
+from application.core.settings import settings
+from application.logging import log_activity, LogContext
+
+logger = logging.getLogger(__name__)
+
+
+class WorkflowAgent(BaseAgent):
+    """A specialized agent that executes predefined workflows."""
+
+    def __init__(
+        self,
+        *args,
+        workflow_id: Optional[str] = None,
+        workflow: Optional[Dict[str, Any]] = None,
+        workflow_owner: Optional[str] = None,
+        **kwargs,
+    ):
+        super().__init__(*args, **kwargs)
+        self.workflow_id = workflow_id
+        self.workflow_owner = workflow_owner
+        self._workflow_data = workflow
+        self._engine: Optional[WorkflowEngine] = None
+
+    @log_activity()
+    def gen(
+        self, query: str, log_context: LogContext = None
+    ) -> Generator[Dict[str, str], None, None]:
+        yield from self._gen_inner(query, log_context)
+
+    def _gen_inner(
+        self, query: str, log_context: LogContext
+    ) -> Generator[Dict[str, str], None, None]:
+        graph = self._load_workflow_graph()
+        if not graph:
+            yield {"type": "error", "error": "Failed to load workflow configuration."}
+            return
+        self._engine = WorkflowEngine(graph, self)
+        yield from self._engine.execute({}, query)
+        self._save_workflow_run(query)
+
+    def _load_workflow_graph(self) -> Optional[WorkflowGraph]:
+        if self._workflow_data:
+            return self._parse_embedded_workflow()
+        if self.workflow_id:
+            return self._load_from_database()
+        return None
+
+    def _parse_embedded_workflow(self) -> Optional[WorkflowGraph]:
+        try:
+            nodes_data = self._workflow_data.get("nodes", [])
+            edges_data = self._workflow_data.get("edges", [])
+
+            workflow = Workflow(
+                name=self._workflow_data.get("name", "Embedded Workflow"),
+                description=self._workflow_data.get("description"),
+            )
+
+            nodes = []
+            for n in nodes_data:
+                node_config = n.get("data", {})
+                nodes.append(
+                    WorkflowNode(
+                        id=n["id"],
+                        workflow_id=self.workflow_id or "embedded",
+                        type=n["type"],
+                        title=n.get("title", "Node"),
+                        description=n.get("description"),
+                        position=n.get("position", {"x": 0, "y": 0}),
+                        config=node_config,
+                    )
+                )
+            edges = []
+            for e in edges_data:
+                edges.append(
+                    WorkflowEdge(
+                        id=e["id"],
+                        workflow_id=self.workflow_id or "embedded",
+                        source=e.get("source") or e.get("source_id"),
+                        target=e.get("target") or e.get("target_id"),
+                        sourceHandle=e.get("sourceHandle") or e.get("source_handle"),
+                        targetHandle=e.get("targetHandle") or e.get("target_handle"),
+                    )
+                )
+            return WorkflowGraph(workflow=workflow, nodes=nodes, edges=edges)
+        except Exception as e:
+            logger.error(f"Invalid embedded workflow: {e}")
+            return None
+
+    def _load_from_database(self) -> Optional[WorkflowGraph]:
+        try:
+            from bson.objectid import ObjectId
+
+            if not self.workflow_id or not ObjectId.is_valid(self.workflow_id):
+                logger.error(f"Invalid workflow ID: {self.workflow_id}")
+                return None
+            owner_id = self.workflow_owner
+            if not owner_id and isinstance(self.decoded_token, dict):
+                owner_id = self.decoded_token.get("sub")
+            if not owner_id:
+                logger.error(
+                    f"Workflow owner not available for workflow load: {self.workflow_id}"
+                )
+                return None
+
+            mongo = MongoDB.get_client()
+            db = mongo[settings.MONGO_DB_NAME]
+
+            workflows_coll = db["workflows"]
+            workflow_nodes_coll = db["workflow_nodes"]
+            workflow_edges_coll = db["workflow_edges"]
+
+            workflow_doc = workflows_coll.find_one(
+                {"_id": ObjectId(self.workflow_id), "user": owner_id}
+            )
+            if not workflow_doc:
+                logger.error(
+                    f"Workflow {self.workflow_id} not found or inaccessible for user {owner_id}"
+                )
+                return None
+            workflow = Workflow(**workflow_doc)
+            graph_version = workflow_doc.get("current_graph_version", 1)
+            try:
+                graph_version = int(graph_version)
+                if graph_version <= 0:
+                    graph_version = 1
+            except (ValueError, TypeError):
+                graph_version = 1
+
+            nodes_docs = list(
+                workflow_nodes_coll.find(
+                    {"workflow_id": self.workflow_id, "graph_version": graph_version}
+                )
+            )
+            if not nodes_docs and graph_version == 1:
+                nodes_docs = list(
+                    workflow_nodes_coll.find(
+                        {
+                            "workflow_id": self.workflow_id,
+                            "graph_version": {"$exists": False},
+                        }
+                    )
+                )
+            nodes = [WorkflowNode(**doc) for doc in nodes_docs]
+
+            edges_docs = list(
+                workflow_edges_coll.find(
+                    {"workflow_id": self.workflow_id, "graph_version": graph_version}
+                )
+            )
+            if not edges_docs and graph_version == 1:
+                edges_docs = list(
+                    workflow_edges_coll.find(
+                        {
+                            "workflow_id": self.workflow_id,
+                            "graph_version": {"$exists": False},
+                        }
+                    )
+                )
+            edges = [WorkflowEdge(**doc) for doc in edges_docs]
+
+            return WorkflowGraph(workflow=workflow, nodes=nodes, edges=edges)
+        except Exception as e:
+            logger.error(f"Failed to load workflow from database: {e}")
+            return None
+
+    def _save_workflow_run(self, query: str) -> None:
+        if not self._engine:
+            return
+        try:
+            mongo = MongoDB.get_client()
+            db = mongo[settings.MONGO_DB_NAME]
+            workflow_runs_coll = db["workflow_runs"]
+
+            run = WorkflowRun(
+                workflow_id=self.workflow_id or "unknown",
+                status=self._determine_run_status(),
+                inputs={"query": query},
+                outputs=self._serialize_state(self._engine.state),
+                steps=self._engine.get_execution_summary(),
+                created_at=datetime.now(timezone.utc),
+                completed_at=datetime.now(timezone.utc),
+            )
+
+            workflow_runs_coll.insert_one(run.to_mongo_doc())
+        except Exception as e:
+            logger.error(f"Failed to save workflow run: {e}")
+
+    def _determine_run_status(self) -> ExecutionStatus:
+        if not self._engine or not self._engine.execution_log:
+            return ExecutionStatus.COMPLETED
+        for log in self._engine.execution_log:
+            if log.get("status") == ExecutionStatus.FAILED.value:
+                return ExecutionStatus.FAILED
+        return ExecutionStatus.COMPLETED
+
+    def _serialize_state(self, state: Dict[str, Any]) -> Dict[str, Any]:
+        serialized: Dict[str, Any] = {}
+        for key, value in state.items():
+            if isinstance(value, (str, int, float, bool, type(None))):
+                serialized[key] = value
+            else:
+                serialized[key] = str(value)
+        return serialized

application/agents/workflows/node_agent.py

@@ -0,0 +1,109 @@
+"""Workflow Node Agents - defines specialized agents for workflow nodes."""
+
+from typing import Any, Dict, List, Optional, Type
+
+from application.agents.base import BaseAgent
+from application.agents.classic_agent import ClassicAgent
+from application.agents.react_agent import ReActAgent
+from application.agents.workflows.schemas import AgentType
+
+
+class ToolFilterMixin:
+    """Mixin that filters fetched tools to only those specified in tool_ids."""
+
+    _allowed_tool_ids: List[str]
+
+    def _get_user_tools(self, user: str = "local") -> Dict[str, Dict[str, Any]]:
+        all_tools = super()._get_user_tools(user)
+        if not self._allowed_tool_ids:
+            return {}
+        filtered_tools = {
+            tool_id: tool
+            for tool_id, tool in all_tools.items()
+            if str(tool.get("_id", "")) in self._allowed_tool_ids
+        }
+        return filtered_tools
+
+    def _get_tools(self, api_key: str = None) -> Dict[str, Dict[str, Any]]:
+        all_tools = super()._get_tools(api_key)
+        if not self._allowed_tool_ids:
+            return {}
+        filtered_tools = {
+            tool_id: tool
+            for tool_id, tool in all_tools.items()
+            if str(tool.get("_id", "")) in self._allowed_tool_ids
+        }
+        return filtered_tools
+
+
+class WorkflowNodeClassicAgent(ToolFilterMixin, ClassicAgent):
+
+    def __init__(
+        self,
+        endpoint: str,
+        llm_name: str,
+        model_id: str,
+        api_key: str,
+        tool_ids: Optional[List[str]] = None,
+        **kwargs,
+    ):
+        super().__init__(
+            endpoint=endpoint,
+            llm_name=llm_name,
+            model_id=model_id,
+            api_key=api_key,
+            **kwargs,
+        )
+        self._allowed_tool_ids = tool_ids or []
+
+
+class WorkflowNodeReActAgent(ToolFilterMixin, ReActAgent):
+
+    def __init__(
+        self,
+        endpoint: str,
+        llm_name: str,
+        model_id: str,
+        api_key: str,
+        tool_ids: Optional[List[str]] = None,
+        **kwargs,
+    ):
+        super().__init__(
+            endpoint=endpoint,
+            llm_name=llm_name,
+            model_id=model_id,
+            api_key=api_key,
+            **kwargs,
+        )
+        self._allowed_tool_ids = tool_ids or []
+
+
+class WorkflowNodeAgentFactory:
+
+    _agents: Dict[AgentType, Type[BaseAgent]] = {
+        AgentType.CLASSIC: WorkflowNodeClassicAgent,
+        AgentType.REACT: WorkflowNodeReActAgent,
+    }
+
+    @classmethod
+    def create(
+        cls,
+        agent_type: AgentType,
+        endpoint: str,
+        llm_name: str,
+        model_id: str,
+        api_key: str,
+        tool_ids: Optional[List[str]] = None,
+        **kwargs,
+    ) -> BaseAgent:
+        agent_class = cls._agents.get(agent_type)
+        if not agent_class:
+            raise ValueError(f"Unsupported agent type: {agent_type}")
+        return agent_class(
+            endpoint=endpoint,
+            llm_name=llm_name,
+            model_id=model_id,
+            api_key=api_key,
+            tool_ids=tool_ids,
+            **kwargs,
+        )

application/agents/workflows/schemas.py

@@ -0,0 +1,215 @@
+from datetime import datetime, timezone
+from enum import Enum
+from typing import Any, Dict, List, Optional, Union
+
+from bson import ObjectId
+from pydantic import BaseModel, ConfigDict, Field, field_validator
+
+
+class NodeType(str, Enum):
+    START = "start"
+    END = "end"
+    AGENT = "agent"
+    NOTE = "note"
+    STATE = "state"
+
+
+class AgentType(str, Enum):
+    CLASSIC = "classic"
+    REACT = "react"
+
+
+class ExecutionStatus(str, Enum):
+    PENDING = "pending"
+    RUNNING = "running"
+    COMPLETED = "completed"
+    FAILED = "failed"
+
+
+class Position(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+    x: float = 0.0
+    y: float = 0.0
+
+
+class AgentNodeConfig(BaseModel):
+    model_config = ConfigDict(extra="allow")
+    agent_type: AgentType = AgentType.CLASSIC
+    llm_name: Optional[str] = None
+    system_prompt: str = "You are a helpful assistant."
+    prompt_template: str = ""
+    output_variable: Optional[str] = None
+    stream_to_user: bool = True
+    tools: List[str] = Field(default_factory=list)
+    sources: List[str] = Field(default_factory=list)
+    chunks: str = "2"
+    retriever: str = ""
+    model_id: Optional[str] = None
+    json_schema: Optional[Dict[str, Any]] = None
+
+
+class WorkflowEdgeCreate(BaseModel):
+    model_config = ConfigDict(populate_by_name=True)
+    id: str
+    workflow_id: str
+    source_id: str = Field(..., alias="source")
+    target_id: str = Field(..., alias="target")
+    source_handle: Optional[str] = Field(None, alias="sourceHandle")
+    target_handle: Optional[str] = Field(None, alias="targetHandle")
+
+
+class WorkflowEdge(WorkflowEdgeCreate):
+    mongo_id: Optional[str] = Field(None, alias="_id")
+
+    @field_validator("mongo_id", mode="before")
+    @classmethod
+    def convert_objectid(cls, v: Any) -> Optional[str]:
+        if isinstance(v, ObjectId):
+            return str(v)
+        return v
+
+    def to_mongo_doc(self) -> Dict[str, Any]:
+        return {
+            "id": self.id,
+            "workflow_id": self.workflow_id,
+            "source_id": self.source_id,
+            "target_id": self.target_id,
+            "source_handle": self.source_handle,
+            "target_handle": self.target_handle,
+        }
+
+
+class WorkflowNodeCreate(BaseModel):
+    model_config = ConfigDict(extra="allow")
+    id: str
+    workflow_id: str
+    type: NodeType
+    title: str = "Node"
+    description: Optional[str] = None
+    position: Position = Field(default_factory=Position)
+    config: Dict[str, Any] = Field(default_factory=dict)
+
+    @field_validator("position", mode="before")
+    @classmethod
+    def parse_position(cls, v: Union[Dict[str, float], Position]) -> Position:
+        if isinstance(v, dict):
+            return Position(**v)
+        return v
+
+
+class WorkflowNode(WorkflowNodeCreate):
+    mongo_id: Optional[str] = Field(None, alias="_id")
+
+    @field_validator("mongo_id", mode="before")
+    @classmethod
+    def convert_objectid(cls, v: Any) -> Optional[str]:
+        if isinstance(v, ObjectId):
+            return str(v)
+        return v
+
+    def to_mongo_doc(self) -> Dict[str, Any]:
+        return {
+            "id": self.id,
+            "workflow_id": self.workflow_id,
+            "type": self.type.value,
+            "title": self.title,
+            "description": self.description,
+            "position": self.position.model_dump(),
+            "config": self.config,
+        }
+
+
+class WorkflowCreate(BaseModel):
+    model_config = ConfigDict(extra="allow")
+    name: str = "New Workflow"
+    description: Optional[str] = None
+    user: Optional[str] = None
+
+
+class Workflow(WorkflowCreate):
+    id: Optional[str] = Field(None, alias="_id")
+    created_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+    updated_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+
+    @field_validator("id", mode="before")
+    @classmethod
+    def convert_objectid(cls, v: Any) -> Optional[str]:
+        if isinstance(v, ObjectId):
+            return str(v)
+        return v
+
+    def to_mongo_doc(self) -> Dict[str, Any]:
+        return {
+            "name": self.name,
+            "description": self.description,
+            "user": self.user,
+            "created_at": self.created_at,
+            "updated_at": self.updated_at,
+        }
+
+
+class WorkflowGraph(BaseModel):
+    workflow: Workflow
+    nodes: List[WorkflowNode] = Field(default_factory=list)
+    edges: List[WorkflowEdge] = Field(default_factory=list)
+
+    def get_node_by_id(self, node_id: str) -> Optional[WorkflowNode]:
+        for node in self.nodes:
+            if node.id == node_id:
+                return node
+        return None
+
+    def get_start_node(self) -> Optional[WorkflowNode]:
+        for node in self.nodes:
+            if node.type == NodeType.START:
+                return node
+        return None
+
+    def get_outgoing_edges(self, node_id: str) -> List[WorkflowEdge]:
+        return [edge for edge in self.edges if edge.source_id == node_id]
+
+
+class NodeExecutionLog(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+    node_id: str
+    node_type: str
+    status: ExecutionStatus
+    started_at: datetime
+    completed_at: Optional[datetime] = None
+    error: Optional[str] = None
+    state_snapshot: Dict[str, Any] = Field(default_factory=dict)
+
+
+class WorkflowRunCreate(BaseModel):
+    workflow_id: str
+    inputs: Dict[str, str] = Field(default_factory=dict)
+
+
+class WorkflowRun(BaseModel):
+    model_config = ConfigDict(extra="allow")
+    id: Optional[str] = Field(None, alias="_id")
+    workflow_id: str
+    status: ExecutionStatus = ExecutionStatus.PENDING
+    inputs: Dict[str, str] = Field(default_factory=dict)
+    outputs: Dict[str, Any] = Field(default_factory=dict)
+    steps: List[NodeExecutionLog] = Field(default_factory=list)
+    created_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+    completed_at: Optional[datetime] = None
+
+    @field_validator("id", mode="before")
+    @classmethod
+    def convert_objectid(cls, v: Any) -> Optional[str]:
+        if isinstance(v, ObjectId):
+            return str(v)
+        return v
+
+    def to_mongo_doc(self) -> Dict[str, Any]:
+        return {
+            "workflow_id": self.workflow_id,
+            "status": self.status.value,
+            "inputs": self.inputs,
+            "outputs": self.outputs,
+            "steps": [step.model_dump() for step in self.steps],
+            "created_at": self.created_at,
+            "completed_at": self.completed_at,
+        }

application/agents/workflows/workflow_engine.py

@@ -0,0 +1,276 @@
+import logging
+from datetime import datetime, timezone
+from typing import Any, Dict, Generator, List, Optional, TYPE_CHECKING
+
+from application.agents.workflows.node_agent import WorkflowNodeAgentFactory
+from application.agents.workflows.schemas import (
+    AgentNodeConfig,
+    ExecutionStatus,
+    NodeExecutionLog,
+    NodeType,
+    WorkflowGraph,
+    WorkflowNode,
+)
+
+if TYPE_CHECKING:
+    from application.agents.base import BaseAgent
+logger = logging.getLogger(__name__)
+
+StateValue = Any
+WorkflowState = Dict[str, StateValue]
+
+
+class WorkflowEngine:
+    MAX_EXECUTION_STEPS = 50
+
+    def __init__(self, graph: WorkflowGraph, agent: "BaseAgent"):
+        self.graph = graph
+        self.agent = agent
+        self.state: WorkflowState = {}
+        self.execution_log: List[Dict[str, Any]] = []
+
+    def execute(
+        self, initial_inputs: WorkflowState, query: str
+    ) -> Generator[Dict[str, str], None, None]:
+        self._initialize_state(initial_inputs, query)
+
+        start_node = self.graph.get_start_node()
+        if not start_node:
+            yield {"type": "error", "error": "No start node found in workflow."}
+            return
+        current_node_id: Optional[str] = start_node.id
+        steps = 0
+
+        while current_node_id and steps < self.MAX_EXECUTION_STEPS:
+            node = self.graph.get_node_by_id(current_node_id)
+            if not node:
+                yield {"type": "error", "error": f"Node {current_node_id} not found."}
+                break
+            log_entry = self._create_log_entry(node)
+
+            yield {
+                "type": "workflow_step",
+                "node_id": node.id,
+                "node_type": node.type.value,
+                "node_title": node.title,
+                "status": "running",
+            }
+
+            try:
+                yield from self._execute_node(node)
+                log_entry["status"] = ExecutionStatus.COMPLETED.value
+                log_entry["completed_at"] = datetime.now(timezone.utc)
+
+                output_key = f"node_{node.id}_output"
+                node_output = self.state.get(output_key)
+
+                yield {
+                    "type": "workflow_step",
+                    "node_id": node.id,
+                    "node_type": node.type.value,
+                    "node_title": node.title,
+                    "status": "completed",
+                    "state_snapshot": dict(self.state),
+                    "output": node_output,
+                }
+            except Exception as e:
+                logger.error(f"Error executing node {node.id}: {e}", exc_info=True)
+                log_entry["status"] = ExecutionStatus.FAILED.value
+                log_entry["error"] = str(e)
+                log_entry["completed_at"] = datetime.now(timezone.utc)
+                log_entry["state_snapshot"] = dict(self.state)
+                self.execution_log.append(log_entry)
+
+                yield {
+                    "type": "workflow_step",
+                    "node_id": node.id,
+                    "node_type": node.type.value,
+                    "node_title": node.title,
+                    "status": "failed",
+                    "state_snapshot": dict(self.state),
+                    "error": str(e),
+                }
+                yield {"type": "error", "error": str(e)}
+                break
+            log_entry["state_snapshot"] = dict(self.state)
+            self.execution_log.append(log_entry)
+
+            if node.type == NodeType.END:
+                break
+            current_node_id = self._get_next_node_id(current_node_id)
+            steps += 1
+        if steps >= self.MAX_EXECUTION_STEPS:
+            logger.warning(
+                f"Workflow reached max steps limit ({self.MAX_EXECUTION_STEPS})"
+            )
+
+    def _initialize_state(self, initial_inputs: WorkflowState, query: str) -> None:
+        self.state.update(initial_inputs)
+        self.state["query"] = query
+        self.state["chat_history"] = str(self.agent.chat_history)
+
+    def _create_log_entry(self, node: WorkflowNode) -> Dict[str, Any]:
+        return {
+            "node_id": node.id,
+            "node_type": node.type.value,
+            "started_at": datetime.now(timezone.utc),
+            "completed_at": None,
+            "status": ExecutionStatus.RUNNING.value,
+            "error": None,
+            "state_snapshot": {},
+        }
+
+    def _get_next_node_id(self, current_node_id: str) -> Optional[str]:
+        edges = self.graph.get_outgoing_edges(current_node_id)
+        if edges:
+            return edges[0].target_id
+        return None
+
+    def _execute_node(
+        self, node: WorkflowNode
+    ) -> Generator[Dict[str, str], None, None]:
+        logger.info(f"Executing node {node.id} ({node.type.value})")
+
+        node_handlers = {
+            NodeType.START: self._execute_start_node,
+            NodeType.NOTE: self._execute_note_node,
+            NodeType.AGENT: self._execute_agent_node,
+            NodeType.STATE: self._execute_state_node,
+            NodeType.END: self._execute_end_node,
+        }
+
+        handler = node_handlers.get(node.type)
+        if handler:
+            yield from handler(node)
+
+    def _execute_start_node(
+        self, node: WorkflowNode
+    ) -> Generator[Dict[str, str], None, None]:
+        yield from ()
+
+    def _execute_note_node(
+        self, node: WorkflowNode
+    ) -> Generator[Dict[str, str], None, None]:
+        yield from ()
+
+    def _execute_agent_node(
+        self, node: WorkflowNode
+    ) -> Generator[Dict[str, str], None, None]:
+        from application.core.model_utils import get_api_key_for_provider
+
+        node_config = AgentNodeConfig(**node.config)
+
+        if node_config.prompt_template:
+            formatted_prompt = self._format_template(node_config.prompt_template)
+        else:
+            formatted_prompt = self.state.get("query", "")
+        node_llm_name = node_config.llm_name or self.agent.llm_name
+        node_api_key = get_api_key_for_provider(node_llm_name) or self.agent.api_key
+
+        node_agent = WorkflowNodeAgentFactory.create(
+            agent_type=node_config.agent_type,
+            endpoint=self.agent.endpoint,
+            llm_name=node_llm_name,
+            model_id=node_config.model_id or self.agent.model_id,
+            api_key=node_api_key,
+            tool_ids=node_config.tools,
+            prompt=node_config.system_prompt,
+            chat_history=self.agent.chat_history,
+            decoded_token=self.agent.decoded_token,
+            json_schema=node_config.json_schema,
+        )
+
+        full_response = ""
+        first_chunk = True
+        for event in node_agent.gen(formatted_prompt):
+            if "answer" in event:
+                full_response += event["answer"]
+                if node_config.stream_to_user:
+                    if first_chunk and hasattr(self, "_has_streamed"):
+                        yield {"answer": "\n\n"}
+                        first_chunk = False
+                    yield event
+
+        if node_config.stream_to_user:
+            self._has_streamed = True
+
+        output_key = node_config.output_variable or f"node_{node.id}_output"
+        self.state[output_key] = full_response
+
+    def _execute_state_node(
+        self, node: WorkflowNode
+    ) -> Generator[Dict[str, str], None, None]:
+        config = node.config
+        operations = config.get("operations", [])
+
+        if operations:
+            for op in operations:
+                key = op.get("key")
+                operation = op.get("operation", "set")
+                value = op.get("value")
+
+                if not key:
+                    continue
+                if operation == "set":
+                    formatted_value = (
+                        self._format_template(str(value))
+                        if isinstance(value, str)
+                        else value
+                    )
+                    self.state[key] = formatted_value
+                elif operation == "increment":
+                    current = self.state.get(key, 0)
+                    try:
+                        self.state[key] = int(current) + int(value or 1)
+                    except (ValueError, TypeError):
+                        self.state[key] = 1
+                elif operation == "append":
+                    if key not in self.state:
+                        self.state[key] = []
+                    if isinstance(self.state[key], list):
+                        self.state[key].append(value)
+        else:
+            updates = config.get("updates", {})
+            if not updates:
+                var_name = config.get("variable")
+                var_value = config.get("value")
+                if var_name and isinstance(var_name, str):
+                    updates = {var_name: var_value or ""}
+            if isinstance(updates, dict):
+                for key, value in updates.items():
+                    if isinstance(value, str):
+                        self.state[key] = self._format_template(value)
+                    else:
+                        self.state[key] = value
+        yield from ()
+
+    def _execute_end_node(
+        self, node: WorkflowNode
+    ) -> Generator[Dict[str, str], None, None]:
+        config = node.config
+        output_template = str(config.get("output_template", ""))
+        if output_template:
+            formatted_output = self._format_template(output_template)
+            yield {"answer": formatted_output}
+
+    def _format_template(self, template: str) -> str:
+        formatted = template
+        for key, value in self.state.items():
+            placeholder = f"{{{{{key}}}}}"
+            if placeholder in formatted and value is not None:
+                formatted = formatted.replace(placeholder, str(value))
+        return formatted
+
+    def get_execution_summary(self) -> List[NodeExecutionLog]:
+        return [
+            NodeExecutionLog(
+                node_id=log["node_id"],
+                node_type=log["node_type"],
+                status=ExecutionStatus(log["status"]),
+                started_at=log["started_at"],
+                completed_at=log.get("completed_at"),
+                error=log.get("error"),
+                state_snapshot=log.get("state_snapshot", {}),
+            )
+            for log in self.execution_log
+        ]

application/api/answer/services/stream_processor.py

@@ -150,9 +150,7 @@ class StreamProcessor:
             )
 
             if not result.success:
-                logger.error(
-                    f"Compression failed: {result.error}, using full history"
-                )
+                logger.error(f"Compression failed: {result.error}, using full history")
                 self.history = [
                     {"prompt": query["prompt"], "response": query["response"]}
                     for query in conversation.get("queries", [])
@@ -225,7 +223,11 @@ class StreamProcessor:
                 raise ValueError(
                     f"Invalid model_id '{requested_model}'. "
                     f"Available models: {', '.join(available_models[:5])}"
-                    + (f" and {len(available_models) - 5} more" if len(available_models) > 5 else "")
+                    + (
+                        f" and {len(available_models) - 5} more"
+                        if len(available_models) > 5
+                        else ""
+                    )
                 )
             self.model_id = requested_model
         else:
@@ -370,6 +372,9 @@ class StreamProcessor:
             self.decoded_token = {"sub": data_key.get("user")}
             if data_key.get("source"):
                 self.source = {"active_docs": data_key["source"]}
+            if data_key.get("workflow"):
+                self.agent_config["workflow"] = data_key["workflow"]
+                self.agent_config["workflow_owner"] = data_key.get("user")
             if data_key.get("retriever"):
                 self.retriever_config["retriever_name"] = data_key["retriever"]
             if data_key.get("chunks") is not None:
@@ -398,6 +403,9 @@ class StreamProcessor:
             )
             if data_key.get("source"):
                 self.source = {"active_docs": data_key["source"]}
+            if data_key.get("workflow"):
+                self.agent_config["workflow"] = data_key["workflow"]
+                self.agent_config["workflow_owner"] = data_key.get("user")
             if data_key.get("retriever"):
                 self.retriever_config["retriever_name"] = data_key["retriever"]
             if data_key.get("chunks") is not None:
@@ -409,10 +417,19 @@ class StreamProcessor:
                     )
                     self.retriever_config["chunks"] = 2
         else:
+            agent_type = settings.AGENT_NAME
+            if self.data.get("workflow") and isinstance(
+                self.data.get("workflow"), dict
+            ):
+                agent_type = "workflow"
+                self.agent_config["workflow"] = self.data["workflow"]
+                if isinstance(self.decoded_token, dict):
+                    self.agent_config["workflow_owner"] = self.decoded_token.get("sub")
+
             self.agent_config.update(
                 {
                     "prompt_id": self.data.get("prompt_id", "default"),
-                    "agent_type": settings.AGENT_NAME,
+                    "agent_type": agent_type,
                     "user_api_key": None,
                     "json_schema": None,
                     "default_model_id": "",
@@ -420,9 +437,7 @@ class StreamProcessor:
             )
 
     def _configure_retriever(self):
-        doc_token_limit = calculate_doc_token_budget(
-            model_id=self.model_id
-        )
+        doc_token_limit = calculate_doc_token_budget(model_id=self.model_id)
 
         self.retriever_config = {
             "retriever_name": self.data.get("retriever", "classic"),
@@ -731,21 +746,36 @@ class StreamProcessor:
         )
         system_api_key = get_api_key_for_provider(provider or settings.LLM_PROVIDER)
 
-        agent = AgentCreator.create_agent(
-            self.agent_config["agent_type"],
-            endpoint="stream",
-            llm_name=provider or settings.LLM_PROVIDER,
-            model_id=self.model_id,
-            api_key=system_api_key,
-            user_api_key=self.agent_config["user_api_key"],
-            prompt=rendered_prompt,
-            chat_history=self.history,
-            retrieved_docs=self.retrieved_docs,
-            decoded_token=self.decoded_token,
-            attachments=self.attachments,
-            json_schema=self.agent_config.get("json_schema"),
-            compressed_summary=self.compressed_summary,
-        )
+        agent_type = self.agent_config["agent_type"]
+
+        # Base agent kwargs
+        agent_kwargs = {
+            "endpoint": "stream",
+            "llm_name": provider or settings.LLM_PROVIDER,
+            "model_id": self.model_id,
+            "api_key": system_api_key,
+            "user_api_key": self.agent_config["user_api_key"],
+            "prompt": rendered_prompt,
+            "chat_history": self.history,
+            "retrieved_docs": self.retrieved_docs,
+            "decoded_token": self.decoded_token,
+            "attachments": self.attachments,
+            "json_schema": self.agent_config.get("json_schema"),
+            "compressed_summary": self.compressed_summary,
+        }
+
+        # Workflow-specific kwargs for workflow agents
+        if agent_type == "workflow":
+            workflow_config = self.agent_config.get("workflow")
+            if isinstance(workflow_config, str):
+                agent_kwargs["workflow_id"] = workflow_config
+            elif isinstance(workflow_config, dict):
+                agent_kwargs["workflow"] = workflow_config
+            workflow_owner = self.agent_config.get("workflow_owner")
+            if workflow_owner:
+                agent_kwargs["workflow_owner"] = workflow_owner
+
+        agent = AgentCreator.create_agent(agent_type, **agent_kwargs)
 
         agent.conversation_id = self.conversation_id
         agent.initial_user_id = self.initial_user_id

application/api/user/agents/routes.py

@@ -19,6 +19,9 @@ from application.api.user.base import (
     resolve_tool_details,
     storage,
     users_collection,
+    workflow_edges_collection,
+    workflow_nodes_collection,
+    workflows_collection,
 )
 from application.core.settings import settings
 from application.utils import (
@@ -31,6 +34,189 @@ from application.utils import (
 agents_ns = Namespace("agents", description="Agent management operations", path="/api")
 
 
+AGENT_TYPE_SCHEMAS = {
+    "classic": {
+        "required_published": [
+            "name",
+            "description",
+            "chunks",
+            "retriever",
+            "prompt_id",
+        ],
+        "required_draft": ["name"],
+        "validate_published": ["name", "description", "prompt_id"],
+        "validate_draft": [],
+        "require_source": True,
+        "fields": [
+            "user",
+            "name",
+            "description",
+            "agent_type",
+            "status",
+            "key",
+            "image",
+            "source",
+            "sources",
+            "chunks",
+            "retriever",
+            "prompt_id",
+            "tools",
+            "json_schema",
+            "models",
+            "default_model_id",
+            "folder_id",
+            "limited_token_mode",
+            "token_limit",
+            "limited_request_mode",
+            "request_limit",
+            "createdAt",
+            "updatedAt",
+            "lastUsedAt",
+        ],
+    },
+    "workflow": {
+        "required_published": ["name", "workflow"],
+        "required_draft": ["name"],
+        "validate_published": ["name", "workflow"],
+        "validate_draft": [],
+        "fields": [
+            "user",
+            "name",
+            "description",
+            "agent_type",
+            "status",
+            "key",
+            "workflow",
+            "folder_id",
+            "limited_token_mode",
+            "token_limit",
+            "limited_request_mode",
+            "request_limit",
+            "createdAt",
+            "updatedAt",
+            "lastUsedAt",
+        ],
+    },
+}
+
+AGENT_TYPE_SCHEMAS["react"] = AGENT_TYPE_SCHEMAS["classic"]
+AGENT_TYPE_SCHEMAS["openai"] = AGENT_TYPE_SCHEMAS["classic"]
+
+
+def normalize_workflow_reference(workflow_value):
+    """Normalize workflow references from form/json payloads."""
+    if workflow_value is None:
+        return None
+    if isinstance(workflow_value, dict):
+        return (
+            workflow_value.get("id")
+            or workflow_value.get("_id")
+            or workflow_value.get("workflow_id")
+        )
+    if isinstance(workflow_value, str):
+        value = workflow_value.strip()
+        if not value:
+            return ""
+        try:
+            parsed = json.loads(value)
+            if isinstance(parsed, str):
+                return parsed.strip()
+            if isinstance(parsed, dict):
+                return (
+                    parsed.get("id") or parsed.get("_id") or parsed.get("workflow_id")
+                )
+        except json.JSONDecodeError:
+            pass
+        return value
+    return str(workflow_value)
+
+
+def validate_workflow_access(workflow_value, user, required=False):
+    """Validate workflow reference and ensure ownership."""
+    workflow_id = normalize_workflow_reference(workflow_value)
+    if not workflow_id:
+        if required:
+            return None, make_response(
+                jsonify({"success": False, "message": "Workflow is required"}), 400
+            )
+        return None, None
+    if not ObjectId.is_valid(workflow_id):
+        return None, make_response(
+            jsonify({"success": False, "message": "Invalid workflow ID format"}), 400
+        )
+    workflow = workflows_collection.find_one({"_id": ObjectId(workflow_id), "user": user})
+    if not workflow:
+        return None, make_response(
+            jsonify({"success": False, "message": "Workflow not found"}), 404
+        )
+    return workflow_id, None
+
+
+def build_agent_document(
+    data, user, key, agent_type, image_url=None, source_field=None, sources_list=None
+):
+    """Build agent document based on agent type schema."""
+
+    if not agent_type or agent_type not in AGENT_TYPE_SCHEMAS:
+        agent_type = "classic"
+    schema = AGENT_TYPE_SCHEMAS.get(agent_type, AGENT_TYPE_SCHEMAS["classic"])
+    allowed_fields = set(schema["fields"])
+
+    now = datetime.datetime.now(datetime.timezone.utc)
+    base_doc = {
+        "user": user,
+        "name": data.get("name"),
+        "description": data.get("description", ""),
+        "agent_type": agent_type,
+        "status": data.get("status"),
+        "key": key,
+        "createdAt": now,
+        "updatedAt": now,
+        "lastUsedAt": None,
+    }
+
+    if agent_type == "workflow":
+        base_doc["workflow"] = data.get("workflow")
+        base_doc["folder_id"] = data.get("folder_id")
+    else:
+        base_doc.update(
+            {
+                "image": image_url or "",
+                "source": source_field or "",
+                "sources": sources_list or [],
+                "chunks": data.get("chunks", ""),
+                "retriever": data.get("retriever", ""),
+                "prompt_id": data.get("prompt_id", ""),
+                "tools": data.get("tools", []),
+                "json_schema": data.get("json_schema"),
+                "models": data.get("models", []),
+                "default_model_id": data.get("default_model_id", ""),
+                "folder_id": data.get("folder_id"),
+            }
+        )
+    if "limited_token_mode" in allowed_fields:
+        base_doc["limited_token_mode"] = (
+            data.get("limited_token_mode") == "True"
+            if isinstance(data.get("limited_token_mode"), str)
+            else bool(data.get("limited_token_mode", False))
+        )
+    if "token_limit" in allowed_fields:
+        base_doc["token_limit"] = int(
+            data.get("token_limit", settings.DEFAULT_AGENT_LIMITS["token_limit"])
+        )
+    if "limited_request_mode" in allowed_fields:
+        base_doc["limited_request_mode"] = (
+            data.get("limited_request_mode") == "True"
+            if isinstance(data.get("limited_request_mode"), str)
+            else bool(data.get("limited_request_mode", False))
+        )
+    if "request_limit" in allowed_fields:
+        base_doc["request_limit"] = int(
+            data.get("request_limit", settings.DEFAULT_AGENT_LIMITS["request_limit"])
+        )
+    return {k: v for k, v in base_doc.items() if k in allowed_fields}
+
+
 @agents_ns.route("/get_agent")
 class GetAgent(Resource):
     @api.doc(params={"id": "Agent ID"}, description="Get agent by ID")
@@ -68,7 +254,7 @@ class GetAgent(Resource):
                     if (isinstance(source_ref, DBRef) and db.dereference(source_ref))
                     or source_ref == "default"
                 ],
-                "chunks": agent["chunks"],
+                "chunks": agent.get("chunks", "2"),
                 "retriever": agent.get("retriever", ""),
                 "prompt_id": agent.get("prompt_id", ""),
                 "tools": agent.get("tools", []),
@@ -99,6 +285,7 @@ class GetAgent(Resource):
                 "models": agent.get("models", []),
                 "default_model_id": agent.get("default_model_id", ""),
                 "folder_id": agent.get("folder_id"),
+                "workflow": agent.get("workflow"),
             }
             return make_response(jsonify(data), 200)
         except Exception as e:
@@ -148,7 +335,7 @@ class GetAgents(Resource):
                             isinstance(source_ref, DBRef) and db.dereference(source_ref)
                         )
                     ],
-                    "chunks": agent["chunks"],
+                    "chunks": agent.get("chunks", "2"),
                     "retriever": agent.get("retriever", ""),
                     "prompt_id": agent.get("prompt_id", ""),
                     "tools": agent.get("tools", []),
@@ -179,9 +366,12 @@ class GetAgents(Resource):
                     "models": agent.get("models", []),
                     "default_model_id": agent.get("default_model_id", ""),
                     "folder_id": agent.get("folder_id"),
+                    "workflow": agent.get("workflow"),
                 }
                 for agent in agents
-                if "source" in agent or "retriever" in agent
+                if "source" in agent
+                or "retriever" in agent
+                or agent.get("agent_type") == "workflow"
             ]
         except Exception as err:
             current_app.logger.error(f"Error retrieving agents: {err}", exc_info=True)
@@ -209,16 +399,22 @@ class CreateAgent(Resource):
                 required=False,
                 description="List of source identifiers for multiple sources",
             ),
-            "chunks": fields.Integer(required=True, description="Chunks count"),
-            "retriever": fields.String(required=True, description="Retriever ID"),
-            "prompt_id": fields.String(required=True, description="Prompt ID"),
+            "chunks": fields.Integer(required=False, description="Chunks count"),
+            "retriever": fields.String(required=False, description="Retriever ID"),
+            "prompt_id": fields.String(required=False, description="Prompt ID"),
             "tools": fields.List(
                 fields.String, required=False, description="List of tool identifiers"
             ),
-            "agent_type": fields.String(required=True, description="Type of the agent"),
+            "agent_type": fields.String(
+                required=False,
+                description="Type of the agent (classic, react, workflow). Defaults to 'classic' for backwards compatibility.",
+            ),
             "status": fields.String(
                 required=True, description="Status of the agent (draft or published)"
             ),
+            "workflow": fields.String(
+                required=False, description="Workflow ID for workflow-type agents"
+            ),
             "json_schema": fields.Raw(
                 required=False,
                 description="JSON schema for enforcing structured output format",
@@ -330,18 +526,34 @@ class CreateAgent(Resource):
                 ),
                 400,
             )
-        if data.get("status") == "published":
-            required_fields = [
-                "name",
-                "description",
-                "chunks",
-                "retriever",
-                "prompt_id",
-                "agent_type",
-            ]
-            # Require either source or sources (but not both)
+        agent_type = data.get("agent_type", "")
+        # Default to classic schema for empty or unknown agent types
 
-            if not data.get("source") and not data.get("sources"):
+        if not agent_type or agent_type not in AGENT_TYPE_SCHEMAS:
+            schema = AGENT_TYPE_SCHEMAS["classic"]
+            # Set agent_type to classic if it was empty
+
+            if not agent_type:
+                agent_type = "classic"
+        else:
+            schema = AGENT_TYPE_SCHEMAS[agent_type]
+        is_published = data.get("status") == "published"
+        if agent_type == "workflow":
+            workflow_id, workflow_error = validate_workflow_access(
+                data.get("workflow"), user, required=is_published
+            )
+            if workflow_error:
+                return workflow_error
+            data["workflow"] = workflow_id
+        if data.get("status") == "published":
+            required_fields = schema["required_published"]
+            validate_fields = schema["validate_published"]
+
+            if (
+                schema.get("require_source")
+                and not data.get("source")
+                and not data.get("sources")
+            ):
                 return make_response(
                     jsonify(
                         {
@@ -351,10 +563,9 @@ class CreateAgent(Resource):
                     ),
                     400,
                 )
-            validate_fields = ["name", "description", "prompt_id", "agent_type"]
         else:
-            required_fields = ["name"]
-            validate_fields = []
+            required_fields = schema["required_draft"]
+            validate_fields = schema["validate_draft"]
         missing_fields = check_required_fields(data, required_fields)
         invalid_fields = validate_required_fields(data, validate_fields)
         if missing_fields:
@@ -366,7 +577,6 @@ class CreateAgent(Resource):
             return make_response(
                 jsonify({"success": False, "message": "Image upload failed"}), 400
             )
-
         folder_id = data.get("folder_id")
         if folder_id:
             if not ObjectId.is_valid(folder_id):
@@ -381,76 +591,36 @@ class CreateAgent(Resource):
                 return make_response(
                     jsonify({"success": False, "message": "Folder not found"}), 404
                 )
-
         try:
             key = str(uuid.uuid4()) if data.get("status") == "published" else ""
 
             sources_list = []
+            source_field = ""
             if data.get("sources") and len(data.get("sources", [])) > 0:
                 for source_id in data.get("sources", []):
                     if source_id == "default":
                         sources_list.append("default")
                     elif ObjectId.is_valid(source_id):
                         sources_list.append(DBRef("sources", ObjectId(source_id)))
-                source_field = ""
             else:
                 source_value = data.get("source", "")
                 if source_value == "default":
                     source_field = "default"
                 elif ObjectId.is_valid(source_value):
                     source_field = DBRef("sources", ObjectId(source_value))
-                else:
-                    source_field = ""
-            new_agent = {
-                "user": user,
-                "name": data.get("name"),
-                "description": data.get("description", ""),
-                "image": image_url,
-                "source": source_field,
-                "sources": sources_list,
-                "chunks": data.get("chunks", ""),
-                "retriever": data.get("retriever", ""),
-                "prompt_id": data.get("prompt_id", ""),
-                "tools": data.get("tools", []),
-                "agent_type": data.get("agent_type", ""),
-                "status": data.get("status"),
-                "json_schema": data.get("json_schema"),
-                "limited_token_mode": (
-                    data.get("limited_token_mode") == "True"
-                    if isinstance(data.get("limited_token_mode"), str)
-                    else bool(data.get("limited_token_mode", False))
-                ),
-                "token_limit": int(
-                    data.get(
-                        "token_limit", settings.DEFAULT_AGENT_LIMITS["token_limit"]
-                    )
-                ),
-                "limited_request_mode": (
-                    data.get("limited_request_mode") == "True"
-                    if isinstance(data.get("limited_request_mode"), str)
-                    else bool(data.get("limited_request_mode", False))
-                ),
-                "request_limit": int(
-                    data.get(
-                        "request_limit", settings.DEFAULT_AGENT_LIMITS["request_limit"]
-                    )
-                ),
-                "createdAt": datetime.datetime.now(datetime.timezone.utc),
-                "updatedAt": datetime.datetime.now(datetime.timezone.utc),
-                "lastUsedAt": None,
-                "key": key,
-                "models": data.get("models", []),
-                "default_model_id": data.get("default_model_id", ""),
-                "folder_id": data.get("folder_id"),
-            }
-            if new_agent["chunks"] == "":
-                new_agent["chunks"] = "2"
-            if (
-                new_agent["source"] == ""
-                and new_agent["retriever"] == ""
-                and not new_agent["sources"]
-            ):
-                new_agent["retriever"] = "classic"
+            new_agent = build_agent_document(
+                data, user, key, agent_type, image_url, source_field, sources_list
+            )
+
+            if agent_type != "workflow":
+                if new_agent.get("chunks") == "":
+                    new_agent["chunks"] = "2"
+                if (
+                    new_agent.get("source") == ""
+                    and new_agent.get("retriever") == ""
+                    and not new_agent.get("sources")
+                ):
+                    new_agent["retriever"] = "classic"
             resp = agents_collection.insert_one(new_agent)
             new_id = str(resp.inserted_id)
         except Exception as err:
@@ -479,16 +649,22 @@ class UpdateAgent(Resource):
                 required=False,
                 description="List of source identifiers for multiple sources",
             ),
-            "chunks": fields.Integer(required=True, description="Chunks count"),
-            "retriever": fields.String(required=True, description="Retriever ID"),
-            "prompt_id": fields.String(required=True, description="Prompt ID"),
+            "chunks": fields.Integer(required=False, description="Chunks count"),
+            "retriever": fields.String(required=False, description="Retriever ID"),
+            "prompt_id": fields.String(required=False, description="Prompt ID"),
             "tools": fields.List(
                 fields.String, required=False, description="List of tool identifiers"
             ),
-            "agent_type": fields.String(required=True, description="Type of the agent"),
+            "agent_type": fields.String(
+                required=False,
+                description="Type of the agent (classic, react, workflow). Defaults to 'classic' for backwards compatibility.",
+            ),
             "status": fields.String(
                 required=True, description="Status of the agent (draft or published)"
             ),
+            "workflow": fields.String(
+                required=False, description="Workflow ID for workflow-type agents"
+            ),
             "json_schema": fields.Raw(
                 required=False,
                 description="JSON schema for enforcing structured output format",
@@ -612,6 +788,7 @@ class UpdateAgent(Resource):
             "models",
             "default_model_id",
             "folder_id",
+            "workflow",
         ]
 
         for field in allowed_fields:
@@ -768,10 +945,10 @@ class UpdateAgent(Resource):
                     )
             elif field == "token_limit":
                 token_limit = data.get("token_limit")
-                # Convert to int and store
                 update_fields[field] = int(token_limit) if token_limit else 0
 
                 # Validate consistency with mode
+
                 if update_fields[field] > 0 and not data.get("limited_token_mode"):
                     return make_response(
                         jsonify(
@@ -814,14 +991,24 @@ class UpdateAgent(Resource):
                     )
                     if not folder:
                         return make_response(
-                            jsonify(
-                                {"success": False, "message": "Folder not found"}
-                            ),
+                            jsonify({"success": False, "message": "Folder not found"}),
                             404,
                         )
                     update_fields[field] = folder_id
                 else:
                     update_fields[field] = None
+            elif field == "workflow":
+                workflow_required = (
+                    data.get("status", existing_agent.get("status")) == "published"
+                    and data.get("agent_type", existing_agent.get("agent_type"))
+                    == "workflow"
+                )
+                workflow_id, workflow_error = validate_workflow_access(
+                    data.get("workflow"), user, required=workflow_required
+                )
+                if workflow_error:
+                    return workflow_error
+                update_fields[field] = workflow_id
             else:
                 value = data[field]
                 if field in ["name", "description", "prompt_id", "agent_type"]:
@@ -850,46 +1037,82 @@ class UpdateAgent(Resource):
             )
         newly_generated_key = None
         final_status = update_fields.get("status", existing_agent.get("status"))
+        agent_type = update_fields.get("agent_type", existing_agent.get("agent_type"))
 
         if final_status == "published":
-            required_published_fields = {
-                "name": "Agent name",
-                "description": "Agent description",
-                "chunks": "Chunks count",
-                "prompt_id": "Prompt",
-                "agent_type": "Agent type",
-            }
+            if agent_type == "workflow":
+                required_published_fields = {
+                    "name": "Agent name",
+                }
+                missing_published_fields = []
+                for req_field, field_label in required_published_fields.items():
+                    final_value = update_fields.get(
+                        req_field, existing_agent.get(req_field)
+                    )
+                    if not final_value:
+                        missing_published_fields.append(field_label)
 
-            missing_published_fields = []
-            for req_field, field_label in required_published_fields.items():
-                final_value = update_fields.get(
-                    req_field, existing_agent.get(req_field)
+                workflow_id = update_fields.get("workflow", existing_agent.get("workflow"))
+                if not workflow_id:
+                    missing_published_fields.append("Workflow")
+                elif not ObjectId.is_valid(workflow_id):
+                    missing_published_fields.append("Valid workflow")
+                else:
+                    workflow = workflows_collection.find_one(
+                        {"_id": ObjectId(workflow_id), "user": user}
+                    )
+                    if not workflow:
+                        missing_published_fields.append("Workflow access")
+
+                if missing_published_fields:
+                    return make_response(
+                        jsonify(
+                            {
+                                "success": False,
+                                "message": f"Cannot publish workflow agent. Missing required fields: {', '.join(missing_published_fields)}",
+                            }
+                        ),
+                        400,
+                    )
+            else:
+                required_published_fields = {
+                    "name": "Agent name",
+                    "description": "Agent description",
+                    "chunks": "Chunks count",
+                    "prompt_id": "Prompt",
+                    "agent_type": "Agent type",
+                }
+
+                missing_published_fields = []
+                for req_field, field_label in required_published_fields.items():
+                    final_value = update_fields.get(
+                        req_field, existing_agent.get(req_field)
+                    )
+                    if not final_value:
+                        missing_published_fields.append(field_label)
+                source_val = update_fields.get("source", existing_agent.get("source"))
+                sources_val = update_fields.get(
+                    "sources", existing_agent.get("sources", [])
                 )
-                if not final_value:
-                    missing_published_fields.append(field_label)
-            source_val = update_fields.get("source", existing_agent.get("source"))
-            sources_val = update_fields.get(
-                "sources", existing_agent.get("sources", [])
-            )
 
-            has_valid_source = (
-                isinstance(source_val, DBRef)
-                or source_val == "default"
-                or (isinstance(sources_val, list) and len(sources_val) > 0)
-            )
-
-            if not has_valid_source:
-                missing_published_fields.append("Source")
-            if missing_published_fields:
-                return make_response(
-                    jsonify(
-                        {
-                            "success": False,
-                            "message": f"Cannot publish agent. Missing or invalid required fields: {', '.join(missing_published_fields)}",
-                        }
-                    ),
-                    400,
+                has_valid_source = (
+                    isinstance(source_val, DBRef)
+                    or source_val == "default"
+                    or (isinstance(sources_val, list) and len(sources_val) > 0)
                 )
+
+                if not has_valid_source:
+                    missing_published_fields.append("Source")
+                if missing_published_fields:
+                    return make_response(
+                        jsonify(
+                            {
+                                "success": False,
+                                "message": f"Cannot publish agent. Missing or invalid required fields: {', '.join(missing_published_fields)}",
+                            }
+                        ),
+                        400,
+                    )
             if not existing_agent.get("key"):
                 newly_generated_key = str(uuid.uuid4())
                 update_fields["key"] = newly_generated_key
@@ -961,6 +1184,29 @@ class DeleteAgent(Resource):
                     jsonify({"success": False, "message": "Agent not found"}), 404
                 )
             deleted_id = str(deleted_agent["_id"])
+
+            if deleted_agent.get("agent_type") == "workflow" and deleted_agent.get(
+                "workflow"
+            ):
+                workflow_id = normalize_workflow_reference(deleted_agent.get("workflow"))
+                if workflow_id and ObjectId.is_valid(workflow_id):
+                    workflow_oid = ObjectId(workflow_id)
+                    owned_workflow = workflows_collection.find_one(
+                        {"_id": workflow_oid, "user": user}, {"_id": 1}
+                    )
+                    if owned_workflow:
+                        workflow_nodes_collection.delete_many({"workflow_id": workflow_id})
+                        workflow_edges_collection.delete_many({"workflow_id": workflow_id})
+                        workflows_collection.delete_one({"_id": workflow_oid, "user": user})
+                    else:
+                        current_app.logger.warning(
+                            f"Skipping workflow cleanup for non-owned workflow {workflow_id}"
+                        )
+                elif workflow_id:
+                    current_app.logger.warning(
+                        f"Skipping workflow cleanup for invalid workflow id {workflow_id}"
+                    )
+
         except Exception as err:
             current_app.logger.error(f"Error deleting agent: {err}", exc_info=True)
             return make_response(jsonify({"success": False}), 400)
@@ -1069,19 +1315,16 @@ class AdoptAgent(Resource):
     def post(self):
         if not (decoded_token := request.decoded_token):
             return make_response(jsonify({"success": False}), 401)
-
         if not (agent_id := request.args.get("id")):
             return make_response(
                 jsonify({"success": False, "message": "ID required"}), 400
             )
-
         try:
             agent = agents_collection.find_one(
                 {"_id": ObjectId(agent_id), "user": "system"}
             )
             if not agent:
                 return make_response(jsonify({"status": "Not found"}), 404)
-
             new_agent = agent.copy()
             new_agent.pop("_id", None)
             new_agent["user"] = decoded_token["sub"]

application/api/user/base.py

@@ -38,6 +38,10 @@ users_collection = db["users"]
 user_logs_collection = db["user_logs"]
 user_tools_collection = db["user_tools"]
 attachments_collection = db["attachments"]
+workflow_runs_collection = db["workflow_runs"]
+workflows_collection = db["workflows"]
+workflow_nodes_collection = db["workflow_nodes"]
+workflow_edges_collection = db["workflow_edges"]
 
 
 try:
@@ -47,6 +51,25 @@ try:
         background=True,
     )
     users_collection.create_index("user_id", unique=True)
+    workflows_collection.create_index(
+        [("user", 1)], name="workflow_user_index", background=True
+    )
+    workflow_nodes_collection.create_index(
+        [("workflow_id", 1)], name="node_workflow_index", background=True
+    )
+    workflow_nodes_collection.create_index(
+        [("workflow_id", 1), ("graph_version", 1)],
+        name="node_workflow_graph_version_index",
+        background=True,
+    )
+    workflow_edges_collection.create_index(
+        [("workflow_id", 1)], name="edge_workflow_index", background=True
+    )
+    workflow_edges_collection.create_index(
+        [("workflow_id", 1), ("graph_version", 1)],
+        name="edge_workflow_graph_version_index",
+        background=True,
+    )
 except Exception as e:
     print("Error creating indexes:", e)
 current_dir = os.path.dirname(

application/api/user/routes.py

@@ -6,7 +6,6 @@ from flask import Blueprint
 
 from application.api import api
 from .agents import agents_ns, agents_sharing_ns, agents_webhooks_ns, agents_folders_ns
-
 from .analytics import analytics_ns
 from .attachments import attachments_ns
 from .conversations import conversations_ns
@@ -15,6 +14,7 @@ from .prompts import prompts_ns
 from .sharing import sharing_ns
 from .sources import sources_chunks_ns, sources_ns, sources_upload_ns
 from .tools import tools_mcp_ns, tools_ns
+from .workflows import workflows_ns
 
 
 user = Blueprint("user", __name__)
@@ -51,3 +51,6 @@ api.add_namespace(sources_upload_ns)
 # Tools (main, MCP)
 api.add_namespace(tools_ns)
 api.add_namespace(tools_mcp_ns)
+
+# Workflows
+api.add_namespace(workflows_ns)

application/api/user/utils.py

@@ -0,0 +1,378 @@
+"""Centralized utilities for API routes."""
+
+from functools import wraps
+from typing import Any, Callable, Dict, List, Optional, Tuple
+
+from bson.errors import InvalidId
+from bson.objectid import ObjectId
+from flask import jsonify, make_response, request, Response
+from pymongo.collection import Collection
+
+
+def get_user_id() -> Optional[str]:
+    """
+    Extract user ID from decoded JWT token.
+
+    Returns:
+        User ID string or None if not authenticated
+    """
+    decoded_token = getattr(request, "decoded_token", None)
+    return decoded_token.get("sub") if decoded_token else None
+
+
+def require_auth(func: Callable) -> Callable:
+    """
+    Decorator to require authentication for route handlers.
+
+    Usage:
+        @require_auth
+        def get(self):
+            user_id = get_user_id()
+            ...
+    """
+
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        user_id = get_user_id()
+        if not user_id:
+            return error_response("Unauthorized", 401)
+        return func(*args, **kwargs)
+
+    return wrapper
+
+
+def success_response(
+    data: Optional[Dict[str, Any]] = None, status: int = 200
+) -> Response:
+    """
+    Create a standardized success response.
+
+    Args:
+        data: Optional data dictionary to include in response
+        status: HTTP status code (default: 200)
+
+    Returns:
+        Flask Response object
+
+    Example:
+        return success_response({"users": [...], "total": 10})
+    """
+    response = {"success": True}
+    if data:
+        response.update(data)
+    return make_response(jsonify(response), status)
+
+
+def error_response(message: str, status: int = 400, **kwargs) -> Response:
+    """
+    Create a standardized error response.
+
+    Args:
+        message: Error message string
+        status: HTTP status code (default: 400)
+        **kwargs: Additional fields to include in response
+
+    Returns:
+        Flask Response object
+
+    Example:
+        return error_response("Resource not found", 404)
+        return error_response("Invalid input", 400, errors=["field1", "field2"])
+    """
+    response = {"success": False, "message": message}
+    response.update(kwargs)
+    return make_response(jsonify(response), status)
+
+
+def validate_object_id(
+    id_string: str, resource_name: str = "Resource"
+) -> Tuple[Optional[ObjectId], Optional[Response]]:
+    """
+    Validate and convert string to ObjectId.
+
+    Args:
+        id_string: String to convert
+        resource_name: Name of resource for error message
+
+    Returns:
+        Tuple of (ObjectId or None, error_response or None)
+
+    Example:
+        obj_id, error = validate_object_id(workflow_id, "Workflow")
+        if error:
+            return error
+    """
+    try:
+        return ObjectId(id_string), None
+    except (InvalidId, TypeError):
+        return None, error_response(f"Invalid {resource_name} ID format")
+
+
+def validate_pagination(
+    default_limit: int = 20, max_limit: int = 100
+) -> Tuple[int, int, Optional[Response]]:
+    """
+    Extract and validate pagination parameters from request.
+
+    Args:
+        default_limit: Default items per page
+        max_limit: Maximum allowed items per page
+
+    Returns:
+        Tuple of (limit, skip, error_response or None)
+
+    Example:
+        limit, skip, error = validate_pagination()
+        if error:
+            return error
+    """
+    try:
+        limit = min(int(request.args.get("limit", default_limit)), max_limit)
+        skip = int(request.args.get("skip", 0))
+        if limit < 1 or skip < 0:
+            return 0, 0, error_response("Invalid pagination parameters")
+        return limit, skip, None
+    except ValueError:
+        return 0, 0, error_response("Invalid pagination parameters")
+
+
+def check_resource_ownership(
+    collection: Collection,
+    resource_id: ObjectId,
+    user_id: str,
+    resource_name: str = "Resource",
+) -> Tuple[Optional[Dict], Optional[Response]]:
+    """
+    Check if resource exists and belongs to user.
+
+    Args:
+        collection: MongoDB collection
+        resource_id: Resource ObjectId
+        user_id: User ID string
+        resource_name: Name of resource for error messages
+
+    Returns:
+        Tuple of (resource_dict or None, error_response or None)
+
+    Example:
+        workflow, error = check_resource_ownership(
+            workflows_collection,
+            workflow_id,
+            user_id,
+            "Workflow"
+        )
+        if error:
+            return error
+    """
+    resource = collection.find_one({"_id": resource_id, "user": user_id})
+    if not resource:
+        return None, error_response(f"{resource_name} not found", 404)
+    return resource, None
+
+
+def serialize_object_id(
+    obj: Dict[str, Any], id_field: str = "_id", new_field: str = "id"
+) -> Dict[str, Any]:
+    """
+    Convert ObjectId to string in a dictionary.
+
+    Args:
+        obj: Dictionary containing ObjectId
+        id_field: Field name containing ObjectId
+        new_field: New field name for string ID
+
+    Returns:
+        Modified dictionary
+
+    Example:
+        user = serialize_object_id(user_doc)
+        # user["id"] = "507f1f77bcf86cd799439011"
+    """
+    if id_field in obj:
+        obj[new_field] = str(obj[id_field])
+        if id_field != new_field:
+            obj.pop(id_field, None)
+    return obj
+
+
+def serialize_list(items: List[Dict], serializer: Callable[[Dict], Dict]) -> List[Dict]:
+    """
+    Apply serializer function to list of items.
+
+    Args:
+        items: List of dictionaries
+        serializer: Function to apply to each item
+
+    Returns:
+        List of serialized items
+
+    Example:
+        workflows = serialize_list(workflow_docs, serialize_workflow)
+    """
+    return [serializer(item) for item in items]
+
+
+def paginated_response(
+    collection: Collection,
+    query: Dict[str, Any],
+    serializer: Callable[[Dict], Dict],
+    limit: int,
+    skip: int,
+    sort_field: str = "created_at",
+    sort_order: int = -1,
+    response_key: str = "items",
+) -> Response:
+    """
+    Create paginated response for collection query.
+
+    Args:
+        collection: MongoDB collection
+        query: Query dictionary
+        serializer: Function to serialize each item
+        limit: Items per page
+        skip: Number of items to skip
+        sort_field: Field to sort by
+        sort_order: Sort order (1=asc, -1=desc)
+        response_key: Key name for items in response
+
+    Returns:
+        Flask Response with paginated data
+
+    Example:
+        return paginated_response(
+            workflows_collection,
+            {"user": user_id},
+            serialize_workflow,
+            limit, skip,
+            response_key="workflows"
+        )
+    """
+    items = list(
+        collection.find(query).sort(sort_field, sort_order).skip(skip).limit(limit)
+    )
+    total = collection.count_documents(query)
+
+    return success_response(
+        {
+            response_key: serialize_list(items, serializer),
+            "total": total,
+            "limit": limit,
+            "skip": skip,
+        }
+    )
+
+
+def require_fields(required: List[str]) -> Callable:
+    """
+    Decorator to validate required fields in request JSON.
+
+    Args:
+        required: List of required field names
+
+    Returns:
+        Decorator function
+
+    Example:
+        @require_fields(["name", "description"])
+        def post(self):
+            data = request.get_json()
+            ...
+    """
+
+    def decorator(func: Callable) -> Callable:
+        @wraps(func)
+        def wrapper(*args, **kwargs):
+            data = request.get_json()
+            if not data:
+                return error_response("Request body required")
+            missing = [field for field in required if not data.get(field)]
+            if missing:
+                return error_response(f"Missing required fields: {', '.join(missing)}")
+            return func(*args, **kwargs)
+
+        return wrapper
+
+    return decorator
+
+
+def safe_db_operation(
+    operation: Callable, error_message: str = "Database operation failed"
+) -> Tuple[Any, Optional[Response]]:
+    """
+    Safely execute database operation with error handling.
+
+    Args:
+        operation: Function to execute
+        error_message: Error message if operation fails
+
+    Returns:
+        Tuple of (result or None, error_response or None)
+
+    Example:
+        result, error = safe_db_operation(
+            lambda: collection.insert_one(doc),
+            "Failed to create resource"
+        )
+        if error:
+            return error
+    """
+    try:
+        result = operation()
+        return result, None
+    except Exception as e:
+        return None, error_response(f"{error_message}: {str(e)}")
+
+
+def validate_enum(
+    value: Any, allowed: List[Any], field_name: str
+) -> Optional[Response]:
+    """
+    Validate that value is in allowed list.
+
+    Args:
+        value: Value to validate
+        allowed: List of allowed values
+        field_name: Field name for error message
+
+    Returns:
+        error_response if invalid, None if valid
+
+    Example:
+        error = validate_enum(status, ["draft", "published"], "status")
+        if error:
+            return error
+    """
+    if value not in allowed:
+        allowed_str = ", ".join(f"'{v}'" for v in allowed)
+        return error_response(f"Invalid {field_name}. Must be one of: {allowed_str}")
+    return None
+
+
+def extract_sort_params(
+    default_field: str = "created_at",
+    default_order: str = "desc",
+    allowed_fields: Optional[List[str]] = None,
+) -> Tuple[str, int]:
+    """
+    Extract and validate sort parameters from request.
+
+    Args:
+        default_field: Default sort field
+        default_order: Default sort order ("asc" or "desc")
+        allowed_fields: List of allowed sort fields (None = no validation)
+
+    Returns:
+        Tuple of (sort_field, sort_order)
+
+    Example:
+        sort_field, sort_order = extract_sort_params(
+            allowed_fields=["name", "date", "status"]
+        )
+    """
+    sort_field = request.args.get("sort", default_field)
+    sort_order_str = request.args.get("order", default_order).lower()
+
+    if allowed_fields and sort_field not in allowed_fields:
+        sort_field = default_field
+    sort_order = -1 if sort_order_str == "desc" else 1
+    return sort_field, sort_order

application/api/user/workflows/__init__.py

@@ -0,0 +1,3 @@
+from .routes import workflows_ns
+
+__all__ = ["workflows_ns"]

application/api/user/workflows/routes.py

@@ -0,0 +1,353 @@
+"""Workflow management routes."""
+
+from datetime import datetime, timezone
+from typing import Dict, List
+
+from flask import current_app, request
+from flask_restx import Namespace, Resource
+
+from application.api.user.base import (
+    workflow_edges_collection,
+    workflow_nodes_collection,
+    workflows_collection,
+)
+from application.api.user.utils import (
+    check_resource_ownership,
+    error_response,
+    get_user_id,
+    require_auth,
+    require_fields,
+    safe_db_operation,
+    success_response,
+    validate_object_id,
+)
+
+workflows_ns = Namespace("workflows", path="/api")
+
+
+def serialize_workflow(w: Dict) -> Dict:
+    """Serialize workflow document to API response format."""
+    return {
+        "id": str(w["_id"]),
+        "name": w.get("name"),
+        "description": w.get("description"),
+        "created_at": w["created_at"].isoformat() if w.get("created_at") else None,
+        "updated_at": w["updated_at"].isoformat() if w.get("updated_at") else None,
+    }
+
+
+def serialize_node(n: Dict) -> Dict:
+    """Serialize workflow node document to API response format."""
+    return {
+        "id": n["id"],
+        "type": n["type"],
+        "title": n.get("title"),
+        "description": n.get("description"),
+        "position": n.get("position"),
+        "data": n.get("config", {}),
+    }
+
+
+def serialize_edge(e: Dict) -> Dict:
+    """Serialize workflow edge document to API response format."""
+    return {
+        "id": e["id"],
+        "source": e.get("source_id"),
+        "target": e.get("target_id"),
+        "sourceHandle": e.get("source_handle"),
+        "targetHandle": e.get("target_handle"),
+    }
+
+
+def get_workflow_graph_version(workflow: Dict) -> int:
+    """Get current graph version with legacy fallback."""
+    raw_version = workflow.get("current_graph_version", 1)
+    try:
+        version = int(raw_version)
+        return version if version > 0 else 1
+    except (ValueError, TypeError):
+        return 1
+
+
+def fetch_graph_documents(collection, workflow_id: str, graph_version: int) -> List[Dict]:
+    """Fetch graph docs for active version, with fallback for legacy unversioned data."""
+    docs = list(
+        collection.find({"workflow_id": workflow_id, "graph_version": graph_version})
+    )
+    if docs:
+        return docs
+    if graph_version == 1:
+        return list(
+            collection.find(
+                {"workflow_id": workflow_id, "graph_version": {"$exists": False}}
+            )
+        )
+    return docs
+
+
+def validate_workflow_structure(nodes: List[Dict], edges: List[Dict]) -> List[str]:
+    """Validate workflow graph structure."""
+    errors = []
+
+    if not nodes:
+        errors.append("Workflow must have at least one node")
+        return errors
+
+    start_nodes = [n for n in nodes if n.get("type") == "start"]
+    if len(start_nodes) != 1:
+        errors.append("Workflow must have exactly one start node")
+
+    end_nodes = [n for n in nodes if n.get("type") == "end"]
+    if not end_nodes:
+        errors.append("Workflow must have at least one end node")
+
+    node_ids = {n.get("id") for n in nodes}
+    for edge in edges:
+        source_id = edge.get("source")
+        target_id = edge.get("target")
+        if source_id not in node_ids:
+            errors.append(f"Edge references non-existent source: {source_id}")
+        if target_id not in node_ids:
+            errors.append(f"Edge references non-existent target: {target_id}")
+
+    if start_nodes:
+        start_id = start_nodes[0].get("id")
+        if not any(e.get("source") == start_id for e in edges):
+            errors.append("Start node must have at least one outgoing edge")
+
+    for node in nodes:
+        if not node.get("id"):
+            errors.append("All nodes must have an id")
+        if not node.get("type"):
+            errors.append(f"Node {node.get('id', 'unknown')} must have a type")
+
+    return errors
+
+
+def create_workflow_nodes(
+    workflow_id: str, nodes_data: List[Dict], graph_version: int
+) -> None:
+    """Insert workflow nodes into database."""
+    if nodes_data:
+        workflow_nodes_collection.insert_many(
+            [
+                {
+                    "id": n["id"],
+                    "workflow_id": workflow_id,
+                    "graph_version": graph_version,
+                    "type": n["type"],
+                    "title": n.get("title", ""),
+                    "description": n.get("description", ""),
+                    "position": n.get("position", {"x": 0, "y": 0}),
+                    "config": n.get("data", {}),
+                }
+                for n in nodes_data
+            ]
+        )
+
+
+def create_workflow_edges(
+    workflow_id: str, edges_data: List[Dict], graph_version: int
+) -> None:
+    """Insert workflow edges into database."""
+    if edges_data:
+        workflow_edges_collection.insert_many(
+            [
+                {
+                    "id": e["id"],
+                    "workflow_id": workflow_id,
+                    "graph_version": graph_version,
+                    "source_id": e.get("source"),
+                    "target_id": e.get("target"),
+                    "source_handle": e.get("sourceHandle"),
+                    "target_handle": e.get("targetHandle"),
+                }
+                for e in edges_data
+            ]
+        )
+
+
+@workflows_ns.route("/workflows")
+class WorkflowList(Resource):
+
+    @require_auth
+    @require_fields(["name"])
+    def post(self):
+        """Create a new workflow with nodes and edges."""
+        user_id = get_user_id()
+        data = request.get_json()
+
+        name = data.get("name", "").strip()
+        nodes_data = data.get("nodes", [])
+        edges_data = data.get("edges", [])
+
+        validation_errors = validate_workflow_structure(nodes_data, edges_data)
+        if validation_errors:
+            return error_response(
+                "Workflow validation failed", errors=validation_errors
+            )
+
+        now = datetime.now(timezone.utc)
+        workflow_doc = {
+            "name": name,
+            "description": data.get("description", ""),
+            "user": user_id,
+            "created_at": now,
+            "updated_at": now,
+            "current_graph_version": 1,
+        }
+
+        result, error = safe_db_operation(
+            lambda: workflows_collection.insert_one(workflow_doc),
+            "Failed to create workflow",
+        )
+        if error:
+            return error
+
+        workflow_id = str(result.inserted_id)
+
+        try:
+            create_workflow_nodes(workflow_id, nodes_data, 1)
+            create_workflow_edges(workflow_id, edges_data, 1)
+        except Exception as e:
+            workflow_nodes_collection.delete_many({"workflow_id": workflow_id})
+            workflow_edges_collection.delete_many({"workflow_id": workflow_id})
+            workflows_collection.delete_one({"_id": result.inserted_id})
+            return error_response(f"Failed to create workflow structure: {str(e)}")
+
+        return success_response({"id": workflow_id}, 201)
+
+
+@workflows_ns.route("/workflows/<string:workflow_id>")
+class WorkflowDetail(Resource):
+
+    @require_auth
+    def get(self, workflow_id: str):
+        """Get workflow details with nodes and edges."""
+        user_id = get_user_id()
+        obj_id, error = validate_object_id(workflow_id, "Workflow")
+        if error:
+            return error
+
+        workflow, error = check_resource_ownership(
+            workflows_collection, obj_id, user_id, "Workflow"
+        )
+        if error:
+            return error
+
+        graph_version = get_workflow_graph_version(workflow)
+        nodes = fetch_graph_documents(
+            workflow_nodes_collection, workflow_id, graph_version
+        )
+        edges = fetch_graph_documents(
+            workflow_edges_collection, workflow_id, graph_version
+        )
+
+        return success_response(
+            {
+                "workflow": serialize_workflow(workflow),
+                "nodes": [serialize_node(n) for n in nodes],
+                "edges": [serialize_edge(e) for e in edges],
+            }
+        )
+
+    @require_auth
+    @require_fields(["name"])
+    def put(self, workflow_id: str):
+        """Update workflow and replace nodes/edges."""
+        user_id = get_user_id()
+        obj_id, error = validate_object_id(workflow_id, "Workflow")
+        if error:
+            return error
+
+        workflow, error = check_resource_ownership(
+            workflows_collection, obj_id, user_id, "Workflow"
+        )
+        if error:
+            return error
+
+        data = request.get_json()
+        name = data.get("name", "").strip()
+        nodes_data = data.get("nodes", [])
+        edges_data = data.get("edges", [])
+
+        validation_errors = validate_workflow_structure(nodes_data, edges_data)
+        if validation_errors:
+            return error_response(
+                "Workflow validation failed", errors=validation_errors
+            )
+
+        current_graph_version = get_workflow_graph_version(workflow)
+        next_graph_version = current_graph_version + 1
+        try:
+            create_workflow_nodes(workflow_id, nodes_data, next_graph_version)
+            create_workflow_edges(workflow_id, edges_data, next_graph_version)
+        except Exception as e:
+            workflow_nodes_collection.delete_many(
+                {"workflow_id": workflow_id, "graph_version": next_graph_version}
+            )
+            workflow_edges_collection.delete_many(
+                {"workflow_id": workflow_id, "graph_version": next_graph_version}
+            )
+            return error_response(f"Failed to update workflow structure: {str(e)}")
+
+        now = datetime.now(timezone.utc)
+        _, error = safe_db_operation(
+            lambda: workflows_collection.update_one(
+                {"_id": obj_id},
+                {
+                    "$set": {
+                        "name": name,
+                        "description": data.get("description", ""),
+                        "updated_at": now,
+                        "current_graph_version": next_graph_version,
+                    }
+                },
+            ),
+            "Failed to update workflow",
+        )
+        if error:
+            workflow_nodes_collection.delete_many(
+                {"workflow_id": workflow_id, "graph_version": next_graph_version}
+            )
+            workflow_edges_collection.delete_many(
+                {"workflow_id": workflow_id, "graph_version": next_graph_version}
+            )
+            return error
+
+        try:
+            workflow_nodes_collection.delete_many(
+                {"workflow_id": workflow_id, "graph_version": {"$ne": next_graph_version}}
+            )
+            workflow_edges_collection.delete_many(
+                {"workflow_id": workflow_id, "graph_version": {"$ne": next_graph_version}}
+            )
+        except Exception as cleanup_err:
+            current_app.logger.warning(
+                f"Failed to clean old workflow graph versions for {workflow_id}: {cleanup_err}"
+            )
+
+        return success_response()
+
+    @require_auth
+    def delete(self, workflow_id: str):
+        """Delete workflow and its graph."""
+        user_id = get_user_id()
+        obj_id, error = validate_object_id(workflow_id, "Workflow")
+        if error:
+            return error
+
+        workflow, error = check_resource_ownership(
+            workflows_collection, obj_id, user_id, "Workflow"
+        )
+        if error:
+            return error
+
+        try:
+            workflow_nodes_collection.delete_many({"workflow_id": workflow_id})
+            workflow_edges_collection.delete_many({"workflow_id": workflow_id})
+            workflows_collection.delete_one({"_id": workflow["_id"], "user": user_id})
+        except Exception as e:
+            return error_response(f"Failed to delete workflow: {str(e)}")
+
+        return success_response()

frontend/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

frontend/package.json

@@ -19,13 +19,20 @@
     ]
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
     "@reduxjs/toolkit": "^2.10.1",
     "chart.js": "^4.4.4",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "copy-to-clipboard": "^3.3.3",
     "i18next": "^25.5.3",
     "i18next-browser-languagedetector": "^8.2.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.562.0",
     "mermaid": "^11.12.1",
     "prop-types": "^15.8.1",
     "react": "^19.1.0",
@@ -38,10 +45,11 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.6.1",
     "react-syntax-highlighter": "^15.6.1",
+    "reactflow": "^11.11.4",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.10",
@@ -66,6 +74,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.8.3",
     "vite": "^7.2.0",
     "vite-plugin-svgr": "^4.3.0"

frontend/src/agents/AgentCard.tsx

@@ -83,7 +83,11 @@ export default function AgentCard({
         label: 'Edit',
         onClick: (e: SyntheticEvent) => {
           e.stopPropagation();
-          navigate(`/agents/edit/${agent.id}`);
+          if (agent.agent_type === 'workflow') {
+            navigate(`/agents/workflow/edit/${agent.id}`);
+          } else {
+            navigate(`/agents/edit/${agent.id}`);
+          }
         },
         variant: 'primary',
         iconWidth: 14,

frontend/src/agents/AgentPreview.tsx

@@ -5,6 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import MessageInput from '../components/MessageInput';
 import ConversationMessages from '../conversation/ConversationMessages';
 import { Query } from '../conversation/conversationModels';
+import { selectSelectedAgent } from '../preferences/preferenceSlice';
+import { AppDispatch } from '../store';
 import {
   addQuery,
   fetchPreviewAnswer,
@@ -14,8 +16,6 @@ import {
   selectPreviewQueries,
   selectPreviewStatus,
 } from './agentPreviewSlice';
-import { selectSelectedAgent } from '../preferences/preferenceSlice';
-import { AppDispatch } from '../store';
 
 export default function AgentPreview() {
   const { t } = useTranslation();
@@ -112,7 +112,7 @@ export default function AgentPreview() {
   }, [queries]);
   return (
     <div className="relative h-full w-full">
-      <div className="scrollbar-thin absolute inset-0 bottom-[180px] overflow-hidden px-4 pt-4 [&>div>div]:!w-full [&>div>div]:!max-w-none">
+      <div className="scrollbar-thin absolute inset-0 bottom-[180px] overflow-hidden px-4 pt-4 [&>div>div]:w-full! [&>div>div]:max-w-none!">
         <ConversationMessages
           handleQuestion={handleQuestion}
           handleQuestionSubmission={handleQuestionSubmission}

frontend/src/agents/AgentsList.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -19,6 +19,7 @@ import {
 } from '../preferences/preferenceSlice';
 import AgentCard from './AgentCard';
 import { AgentSectionId, agentSectionsConfig } from './agents.config';
+import AgentTypeModal from './components/AgentTypeModal';
 import FolderCard from './FolderCard';
 import { AgentFilterTab, useAgentSearch } from './hooks/useAgentSearch';
 import { useAgentsFetch } from './hooks/useAgentsFetch';
@@ -43,14 +44,19 @@ export default function AgentsList() {
     const folderIdFromUrl = searchParams.get('folder');
     return folderIdFromUrl ? [folderIdFromUrl] : [];
   });
+  const [showAgentTypeModal, setShowAgentTypeModal] = useState(false);
+  const [modalFolderId, setModalFolderId] = useState<string | null>(null);
 
   // Sync folder path with URL
   useEffect(() => {
     const currentFolderInUrl = searchParams.get('folder');
-    const currentFolderId = folderPath.length > 0 ? folderPath[folderPath.length - 1] : null;
+    const currentFolderId =
+      folderPath.length > 0 ? folderPath[folderPath.length - 1] : null;
 
     if (currentFolderId !== currentFolderInUrl) {
-      const newUrl = currentFolderId ? `/agents?folder=${currentFolderId}` : '/agents';
+      const newUrl = currentFolderId
+        ? `/agents?folder=${currentFolderId}`
+        : '/agents';
       navigate(newUrl, { replace: true });
     }
   }, [folderPath, searchParams, navigate]);
@@ -212,6 +218,8 @@ export default function AgentsList() {
           onCreateFolder={handleSubmitNewFolder}
           onDeleteFolder={handleDeleteFolder}
           onRenameFolder={handleRenameFolder}
+          setModalFolderId={setModalFolderId}
+          setShowAgentTypeModal={setShowAgentTypeModal}
         />
       ))}
 
@@ -221,6 +229,12 @@ export default function AgentsList() {
           <p className="text-sm">{t('agents.tryDifferentSearch')}</p>
         </div>
       )}
+
+      <AgentTypeModal
+        isOpen={showAgentTypeModal}
+        onClose={() => setShowAgentTypeModal(false)}
+        folderId={modalFolderId}
+      />
     </div>
   );
 }
@@ -238,6 +252,8 @@ interface AgentSectionProps {
   onCreateFolder: (name: string, parentId?: string) => void;
   onDeleteFolder: (id: string) => Promise<boolean>;
   onRenameFolder: (id: string, name: string) => void;
+  setModalFolderId: (folderId: string | null) => void;
+  setShowAgentTypeModal: (show: boolean) => void;
 }
 
 function AgentSection({
@@ -253,6 +269,8 @@ function AgentSection({
   onCreateFolder,
   onDeleteFolder,
   onRenameFolder,
+  setModalFolderId,
+  setShowAgentTypeModal,
 }: AgentSectionProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -280,13 +298,17 @@ function AgentSection({
   const updateAgents = (updatedAgents: Agent[]) => {
     dispatch(config.updateAction(updatedAgents));
   };
-  
+
   const currentFolderDescendantIds = useMemo(() => {
-    if (config.id !== 'user' || !folders || currentFolderId === null) return null;
+    if (config.id !== 'user' || !folders || currentFolderId === null)
+      return null;
 
     const getDescendants = (folderId: string): string[] => {
       const children = folders.filter((f) => f.parent_id === folderId);
-      return children.flatMap((child) => [child.id, ...getDescendants(child.id)]);
+      return children.flatMap((child) => [
+        child.id,
+        ...getDescendants(child.id),
+      ]);
     };
 
     return new Set([currentFolderId, ...getDescendants(currentFolderId)]);
@@ -294,7 +316,9 @@ function AgentSection({
 
   const folderHasMatchingAgents = useCallback(
     (folderId: string): boolean => {
-      const directMatches = filteredAgents.some((a) => a.folder_id === folderId);
+      const directMatches = filteredAgents.some(
+        (a) => a.folder_id === folderId,
+      );
       if (directMatches) return true;
       const childFolders = (folders || []).filter(
         (f) => f.parent_id === folderId,
@@ -314,7 +338,13 @@ function AgentSection({
       return foldersAtLevel.filter((f) => folderHasMatchingAgents(f.id));
     }
     return foldersAtLevel;
-  }, [folders, currentFolderId, config.id, searchQuery, folderHasMatchingAgents]);
+  }, [
+    folders,
+    currentFolderId,
+    config.id,
+    searchQuery,
+    folderHasMatchingAgents,
+  ]);
 
   const unfolderedAgents = useMemo(() => {
     if (config.id !== 'user' || !folders) return filteredAgents;
@@ -334,7 +364,14 @@ function AgentSection({
     return filteredAgents.filter(
       (a) => (a.folder_id || null) === currentFolderId,
     );
-  }, [filteredAgents, folders, config.id, currentFolderId, searchQuery, currentFolderDescendantIds]);
+  }, [
+    filteredAgents,
+    folders,
+    config.id,
+    currentFolderId,
+    searchQuery,
+    currentFolderDescendantIds,
+  ]);
 
   const getAgentsForFolder = (folderId: string) => {
     return filteredAgents.filter((a) => a.folder_id === folderId);
@@ -376,7 +413,10 @@ function AgentSection({
         {config.showNewAgentButton && (
           <button
             className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-4 py-2 text-sm text-white"
-            onClick={() => navigate('/agents/new')}
+            onClick={() => {
+              setModalFolderId(null);
+              setShowAgentTypeModal(true);
+            }}
           >
             {t('agents.newAgent')}
           </button>
@@ -478,7 +518,7 @@ function AgentSection({
               />
             ) : (
               <button
-                className="shrink-0 whitespace-nowrap rounded-full border border-[#E5E5E5] bg-white px-4 py-2 text-sm text-[#18181B] hover:bg-[#F5F5F5] dark:border-[#3A3A3A] dark:bg-[#2C2C2C] dark:text-white dark:hover:bg-[#383838]"
+                className="shrink-0 rounded-full border border-[#E5E5E5] bg-white px-4 py-2 text-sm whitespace-nowrap text-[#18181B] hover:bg-[#F5F5F5] dark:border-[#3A3A3A] dark:bg-[#2C2C2C] dark:text-white dark:hover:bg-[#383838]"
                 onClick={() => {
                   setIsCreatingFolder(true);
                   setTimeout(() => newFolderInputRef.current?.focus(), 0);
@@ -489,14 +529,11 @@ function AgentSection({
             ))}
           {config.showNewAgentButton && (
             <button
-              className="bg-purple-30 hover:bg-violets-are-blue shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm text-white"
-              onClick={() =>
-                navigate(
-                  currentFolderId
-                    ? `/agents/new?folder_id=${currentFolderId}`
-                    : '/agents/new',
-                )
-              }
+              className="bg-purple-30 hover:bg-violets-are-blue shrink-0 rounded-full px-4 py-2 text-sm whitespace-nowrap text-white"
+              onClick={() => {
+                setModalFolderId(currentFolderId);
+                setShowAgentTypeModal(true);
+              }}
             >
               {t('agents.newAgent')}
             </button>
@@ -551,13 +588,10 @@ function AgentSection({
                 {config.showNewAgentButton && !currentFolderId && (
                   <button
                     className="bg-purple-30 hover:bg-violets-are-blue ml-2 rounded-full px-4 py-2 text-sm text-white"
-                    onClick={() =>
-                      navigate(
-                        currentFolderId
-                          ? `/agents/new?folder_id=${currentFolderId}`
-                          : '/agents/new',
-                      )
-                    }
+                    onClick={() => {
+                      setModalFolderId(currentFolderId);
+                      setShowAgentTypeModal(true);
+                    }}
                   >
                     {t('agents.newAgent')}
                   </button>

frontend/src/agents/FolderCard.tsx

@@ -125,4 +125,3 @@ export default function FolderCard({
     </>
   );
 }
-

frontend/src/agents/NewAgent.tsx

@@ -30,6 +30,7 @@ import Prompts from '../settings/Prompts';
 import { UserToolType } from '../settings/types';
 import AgentPreview from './AgentPreview';
 import { Agent, ToolSummary } from './types';
+import WorkflowBuilder from './workflow/WorkflowBuilder';
 
 import type { Model } from '../models/types';
 
@@ -48,7 +49,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   const prompts = useSelector(selectPrompts);
   const agentFolders = useSelector(selectAgentFolders);
 
-  const [validatedFolderId, setValidatedFolderId] = useState<string | null>(null);
+  const [validatedFolderId, setValidatedFolderId] = useState<string | null>(
+    null,
+  );
 
   const [effectiveMode, setEffectiveMode] = useState(mode);
   const [agent, setAgent] = useState<Agent>({
@@ -252,6 +255,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     if (agent.default_model_id) {
       formData.append('default_model_id', agent.default_model_id);
     }
+    if (agent.agent_type === 'workflow' && agent.workflow) {
+      formData.append('workflow', JSON.stringify(agent.workflow));
+    }
 
     if (effectiveMode === 'new' && validatedFolderId) {
       formData.append('folder_id', validatedFolderId);
@@ -359,6 +365,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     if (agent.default_model_id) {
       formData.append('default_model_id', agent.default_model_id);
     }
+    if (agent.agent_type === 'workflow' && agent.workflow) {
+      formData.append('workflow', JSON.stringify(agent.workflow));
+    }
 
     if (effectiveMode === 'new' && validatedFolderId) {
       formData.append('folder_id', validatedFolderId);
@@ -664,6 +673,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
         <h1 className="text-eerie-black m-0 text-[32px] font-bold lg:text-[40px] dark:text-white">
           {modeConfig[effectiveMode].heading}
         </h1>
+        {agent.agent_type === 'workflow' && (
+          <div className="mt-4 w-full">
+            <WorkflowBuilder />
+          </div>
+        )}
         <div className="flex flex-wrap items-center gap-1">
           <button
             className="text-purple-30 dark:text-light-gray mr-4 rounded-3xl py-2 text-sm font-medium dark:bg-transparent"

frontend/src/agents/components/AgentTypeModal.tsx

@@ -0,0 +1,93 @@
+import { Bot, Workflow, X } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+interface AgentTypeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  folderId?: string | null;
+}
+
+export default function AgentTypeModal({
+  isOpen,
+  onClose,
+  folderId,
+}: AgentTypeModalProps) {
+  const navigate = useNavigate();
+
+  if (!isOpen) return null;
+
+  const handleSelect = (type: 'normal' | 'workflow') => {
+    if (type === 'workflow') {
+      navigate(
+        `/agents/workflow/new${folderId ? `?folder_id=${folderId}` : ''}`,
+      );
+    } else {
+      navigate(`/agents/new${folderId ? `?folder_id=${folderId}` : ''}`);
+    }
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-lg rounded-xl bg-white p-8 shadow-2xl dark:bg-[#1e1e1e]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-5 right-5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-200"
+        >
+          <X size={20} />
+        </button>
+
+        <h2 className="text-jet dark:text-bright-gray mb-3 text-2xl font-bold">
+          Create New Agent
+        </h2>
+        <p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
+          Choose the type of agent you want to create
+        </p>
+
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={() => handleSelect('normal')}
+            className="hover:border-purple-30 hover:bg-purple-30/5 dark:hover:border-purple-30 dark:hover:bg-purple-30/10 group flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all dark:border-[#2E2F34]"
+          >
+            <div className="dark:bg-purple-30/20 bg-purple-30/10 text-purple-30 group-hover:bg-purple-30 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
+              <Bot size={28} />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-jet dark:text-bright-gray mb-2 text-lg font-semibold">
+                Classic Agent
+              </h3>
+              <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+                Create a standard AI agent with a single model, tools, and
+                knowledge sources
+              </p>
+            </div>
+          </button>
+
+          <button
+            onClick={() => handleSelect('workflow')}
+            className="hover:border-violets-are-blue hover:bg-violets-are-blue/5 dark:hover:border-violets-are-blue dark:hover:bg-violets-are-blue/10 group flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all dark:border-[#2E2F34]"
+          >
+            <div className="dark:bg-violets-are-blue/20 bg-violets-are-blue/10 text-violets-are-blue group-hover:bg-violets-are-blue flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
+              <Workflow size={28} />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-jet dark:text-bright-gray mb-2 text-lg font-semibold">
+                Workflow Agent
+              </h3>
+              <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+                Design complex multi-step workflows with different models,
+                conditional logic, and state management
+              </p>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/agents/index.tsx

@@ -4,6 +4,7 @@ import AgentLogs from './AgentLogs';
 import AgentsList from './AgentsList';
 import NewAgent from './NewAgent';
 import SharedAgent from './SharedAgent';
+import WorkflowBuilder from './workflow/WorkflowBuilder';
 
 export default function Agents() {
   return (
@@ -13,6 +14,8 @@ export default function Agents() {
       <Route path="/edit/:agentId" element={<NewAgent mode="edit" />} />
       <Route path="/logs/:agentId" element={<AgentLogs />} />
       <Route path="/shared/:agentId" element={<SharedAgent />} />
+      <Route path="/workflow/new" element={<WorkflowBuilder />} />
+      <Route path="/workflow/edit/:agentId" element={<WorkflowBuilder />} />
     </Routes>
   );
 }

frontend/src/agents/types/index.ts

@@ -35,6 +35,7 @@ export type Agent = {
   models?: string[];
   default_model_id?: string;
   folder_id?: string;
+  workflow?: string;
 };
 
 export type AgentFolder = {
@@ -44,3 +45,5 @@ export type AgentFolder = {
   created_at?: string;
   updated_at?: string;
 };
+
+export * from './workflow';

frontend/src/agents/types/workflow.ts

@@ -0,0 +1,49 @@
+export type NodeType = 'start' | 'end' | 'agent' | 'note' | 'state';
+
+export interface WorkflowEdge {
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
+}
+
+export interface WorkflowNode {
+  id: string;
+  type: NodeType;
+  title: string;
+  description?: string;
+  position: { x: number; y: number };
+  data: Record<string, any>;
+}
+
+export interface WorkflowDefinition {
+  id?: string;
+  name: string;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  created_at?: string;
+  updated_at?: string;
+}
+
+export type ExecutionStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+export interface NodeExecutionLog {
+  node_id: string;
+  status: ExecutionStatus;
+  input_state: Record<string, any>;
+  output_state: Record<string, any>;
+  error?: string;
+  started_at: number;
+  completed_at?: number;
+  logs: string[];
+}
+
+export interface WorkflowRun {
+  workflow_id: string;
+  status: ExecutionStatus;
+  state: Record<string, any>;
+  node_logs: NodeExecutionLog[];
+  created_at: number;
+  completed_at?: number;
+}

frontend/src/agents/workflow/WorkflowPreview.tsx

@@ -0,0 +1,611 @@
+import {
+  Bot,
+  CheckCircle2,
+  Circle,
+  Database,
+  Flag,
+  Loader2,
+  MessageSquare,
+  Play,
+  StickyNote,
+  Workflow,
+  XCircle,
+} from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { cn } from '@/lib/utils';
+
+import ChevronDownIcon from '../../assets/chevron-down.svg';
+import MessageInput from '../../components/MessageInput';
+import ConversationBubble from '../../conversation/ConversationBubble';
+import { Query } from '../../conversation/conversationModels';
+import { AppDispatch } from '../../store';
+import { WorkflowEdge, WorkflowNode } from '../types/workflow';
+import {
+  addQuery,
+  fetchWorkflowPreviewAnswer,
+  handleWorkflowPreviewAbort,
+  resendQuery,
+  resetWorkflowPreview,
+  selectActiveNodeId,
+  selectWorkflowExecutionSteps,
+  selectWorkflowPreviewQueries,
+  selectWorkflowPreviewStatus,
+  WorkflowExecutionStep,
+  WorkflowQuery,
+} from './workflowPreviewSlice';
+
+interface WorkflowData {
+  name: string;
+  description?: string;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+}
+
+interface WorkflowPreviewProps {
+  workflowData: WorkflowData;
+}
+
+const NODE_ICONS: Record<string, React.ReactNode> = {
+  start: <Play className="h-3 w-3" />,
+  agent: <Bot className="h-3 w-3" />,
+  end: <Flag className="h-3 w-3" />,
+  note: <StickyNote className="h-3 w-3" />,
+  state: <Database className="h-3 w-3" />,
+};
+
+const NODE_COLORS: Record<string, string> = {
+  start: 'text-green-600 dark:text-green-400',
+  agent: 'text-purple-600 dark:text-purple-400',
+  end: 'text-gray-600 dark:text-gray-400',
+  note: 'text-yellow-600 dark:text-yellow-400',
+  state: 'text-blue-600 dark:text-blue-400',
+};
+
+function ExecutionDetails({
+  steps,
+  nodes,
+  isOpen,
+  onToggle,
+  stepRefs,
+}: {
+  steps: WorkflowExecutionStep[];
+  nodes: WorkflowNode[];
+  isOpen: boolean;
+  onToggle: () => void;
+  stepRefs?: React.RefObject<Map<string, HTMLDivElement>>;
+}) {
+  const completedSteps = steps.filter(
+    (s) => s.status === 'completed' || s.status === 'failed',
+  );
+
+  if (completedSteps.length === 0) return null;
+
+  const formatValue = (value: unknown): string => {
+    if (typeof value === 'string') return value;
+    return JSON.stringify(value, null, 2);
+  };
+
+  return (
+    <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
+      <div className="my-2 flex flex-row items-center justify-center gap-3">
+        <div className="flex h-[26px] w-[30px] items-center justify-center">
+          <Workflow className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        </div>
+        <button className="flex flex-row items-center gap-2" onClick={onToggle}>
+          <p className="text-base font-semibold">
+            Execution Details
+            <span className="ml-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
+              ({completedSteps.length}{' '}
+              {completedSteps.length === 1 ? 'step' : 'steps'})
+            </span>
+          </p>
+          <img
+            src={ChevronDownIcon}
+            alt="ChevronDown"
+            className={cn(
+              'h-4 w-4 transform transition-transform duration-200 dark:invert',
+              isOpen ? 'rotate-180' : '',
+            )}
+          />
+        </button>
+      </div>
+      <div
+        className={cn(
+          'ml-3 grid w-full transition-all duration-300 ease-in-out',
+          isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="space-y-2 pr-2">
+            {completedSteps.map((step, stepIndex) => {
+              const node = nodes.find((n) => n.id === step.nodeId);
+              const displayName =
+                node?.title || node?.data?.title || step.nodeTitle;
+              const stateVars = step.stateSnapshot
+                ? Object.entries(step.stateSnapshot).filter(
+                    ([key]) => !['query', 'chat_history'].includes(key),
+                  )
+                : [];
+
+              const truncateText = (text: string, maxLength: number) => {
+                if (text.length <= maxLength) return text;
+                return text.slice(0, maxLength) + '...';
+              };
+
+              return (
+                <div
+                  key={step.nodeId}
+                  ref={(el) => {
+                    if (el && stepRefs) stepRefs.current.set(step.nodeId, el);
+                  }}
+                  className="rounded-xl bg-[#F5F5F5] p-3 dark:bg-[#383838]"
+                >
+                  <div className="flex items-center gap-2 text-sm">
+                    <span className="flex h-5 w-5 shrink-0 items-center justify-center text-xs font-medium text-gray-500 dark:text-gray-400">
+                      {stepIndex + 1}.
+                    </span>
+                    <div
+                      className={cn(
+                        'shrink-0',
+                        NODE_COLORS[step.nodeType] || NODE_COLORS.state,
+                      )}
+                    >
+                      {NODE_ICONS[step.nodeType] || (
+                        <Circle className="h-3 w-3" />
+                      )}
+                    </div>
+                    <span className="min-w-0 truncate font-medium text-gray-900 dark:text-white">
+                      {displayName}
+                    </span>
+                    <div className="ml-auto shrink-0">
+                      {step.status === 'completed' && (
+                        <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+                      )}
+                      {step.status === 'failed' && (
+                        <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
+                      )}
+                    </div>
+                  </div>
+                  {(step.output || step.error || stateVars.length > 0) && (
+                    <div className="mt-3 space-y-2 text-sm">
+                      {step.output && (
+                        <div className="rounded-lg bg-white p-2 dark:bg-[#2A2A2A]">
+                          <span className="font-medium text-gray-600 dark:text-gray-400">
+                            Output:{' '}
+                          </span>
+                          <span className="wrap-break-word whitespace-pre-wrap text-gray-900 dark:text-gray-100">
+                            {truncateText(step.output, 300)}
+                          </span>
+                        </div>
+                      )}
+                      {step.error && (
+                        <div className="rounded-lg bg-red-50 p-2 dark:bg-red-900/30">
+                          <span className="font-medium text-red-700 dark:text-red-300">
+                            Error:{' '}
+                          </span>
+                          <span className="wrap-break-word whitespace-pre-wrap text-red-800 dark:text-red-200">
+                            {step.error}
+                          </span>
+                        </div>
+                      )}
+                      {stateVars.length > 0 && (
+                        <div className="flex flex-wrap gap-2">
+                          {stateVars.map(([key, value]) => (
+                            <span
+                              key={key}
+                              className="inline-flex items-center rounded-lg bg-white px-2 py-1 text-xs dark:bg-[#2A2A2A]"
+                            >
+                              <span className="max-w-[100px] truncate font-medium text-gray-600 dark:text-gray-400">
+                                {key}:
+                              </span>
+                              <span
+                                className="ml-1 max-w-[200px] truncate text-gray-900 dark:text-gray-100"
+                                title={formatValue(value)}
+                              >
+                                {truncateText(formatValue(value), 50)}
+                              </span>
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function WorkflowMiniMap({
+  nodes,
+  activeNodeId,
+  executionSteps,
+  onNodeClick,
+}: {
+  nodes: WorkflowNode[];
+  activeNodeId: string | null;
+  executionSteps: WorkflowExecutionStep[];
+  onNodeClick?: (nodeId: string) => void;
+}) {
+  const getNodeDisplayName = (node: WorkflowNode) => {
+    if (node.type === 'start') return 'Start';
+    if (node.type === 'end') return 'End';
+    return node.title || node.data?.title || node.type;
+  };
+
+  const getNodeSubtitle = (node: WorkflowNode) => {
+    if (node.type === 'agent' && node.data?.model_id) {
+      return node.data.model_id;
+    }
+    return null;
+  };
+
+  const getNodeStatus = (nodeId: string) => {
+    const step = executionSteps.find((s) => s.nodeId === nodeId);
+    return step?.status || 'pending';
+  };
+
+  const getStatusColor = (nodeId: string, nodeType: string) => {
+    const status = getNodeStatus(nodeId);
+    const isActive = nodeId === activeNodeId;
+
+    if (isActive) {
+      return 'ring-2 ring-purple-500 bg-purple-100 dark:bg-purple-900/50';
+    }
+
+    switch (status) {
+      case 'completed':
+        return 'bg-green-100 dark:bg-green-900/30 border-green-300 dark:border-green-700';
+      case 'running':
+        return 'bg-purple-100 dark:bg-purple-900/30 border-purple-300 dark:border-purple-700 animate-pulse';
+      case 'failed':
+        return 'bg-red-100 dark:bg-red-900/30 border-red-300 dark:border-red-700';
+      default:
+        if (nodeType === 'start') {
+          return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
+        }
+        if (nodeType === 'agent') {
+          return 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800';
+        }
+        if (nodeType === 'end') {
+          return 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700';
+        }
+        return 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700';
+    }
+  };
+
+  const sortedNodes = [...nodes].sort((a, b) => {
+    if (a.type === 'start') return -1;
+    if (b.type === 'start') return 1;
+    if (a.type === 'end') return 1;
+    if (b.type === 'end') return -1;
+    return (a.position?.y || 0) - (b.position?.y || 0);
+  });
+
+  const hasStepData = (nodeId: string) => {
+    const step = executionSteps.find((s) => s.nodeId === nodeId);
+    return step && (step.status === 'completed' || step.status === 'failed');
+  };
+
+  return (
+    <div className="space-y-1">
+      {sortedNodes.map((node, index) => (
+        <div key={node.id} className="relative">
+          {index < sortedNodes.length - 1 && (
+            <div className="absolute top-12 left-4 h-3 w-0.5 bg-gray-200 dark:bg-gray-700" />
+          )}
+
+          <button
+            onClick={() => hasStepData(node.id) && onNodeClick?.(node.id)}
+            disabled={!hasStepData(node.id)}
+            className={cn(
+              'flex h-12 w-full items-center gap-2 rounded-lg border px-3 text-xs transition-all',
+              getStatusColor(node.id, node.type),
+              hasStepData(node.id) && 'cursor-pointer hover:opacity-80',
+            )}
+          >
+            <div
+              className={cn(
+                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full',
+                NODE_COLORS[node.type] || NODE_COLORS.state,
+              )}
+            >
+              {NODE_ICONS[node.type] || <Circle className="h-3 w-3" />}
+            </div>
+            <div className="min-w-0 flex-1 text-left">
+              <div className="truncate font-medium text-gray-700 dark:text-gray-200">
+                {getNodeDisplayName(node)}
+              </div>
+              {getNodeSubtitle(node) && (
+                <div className="truncate text-[10px] text-gray-500 dark:text-gray-400">
+                  {getNodeSubtitle(node)}
+                </div>
+              )}
+            </div>
+            <div className="shrink-0">
+              {getNodeStatus(node.id) === 'running' && (
+                <Loader2 className="h-3 w-3 animate-spin text-purple-500" />
+              )}
+              {getNodeStatus(node.id) === 'completed' && (
+                <CheckCircle2 className="h-3 w-3 text-green-500" />
+              )}
+              {getNodeStatus(node.id) === 'failed' && (
+                <XCircle className="h-3 w-3 text-red-500" />
+              )}
+            </div>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function WorkflowPreview({
+  workflowData,
+}: WorkflowPreviewProps) {
+  const dispatch = useDispatch<AppDispatch>();
+
+  const queries = useSelector(selectWorkflowPreviewQueries) as WorkflowQuery[];
+  const status = useSelector(selectWorkflowPreviewStatus);
+  const executionSteps = useSelector(selectWorkflowExecutionSteps);
+  const activeNodeId = useSelector(selectActiveNodeId);
+
+  const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
+  const [openDetailsIndex, setOpenDetailsIndex] = useState<number | null>(null);
+
+  const fetchStream = useRef<{ abort: () => void } | null>(null);
+  const stepRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToStep = useCallback(
+    (nodeId: string) => {
+      const lastQueryIndex = queries.length - 1;
+      if (lastQueryIndex >= 0) {
+        setOpenDetailsIndex(lastQueryIndex);
+        setTimeout(() => {
+          const stepEl = stepRefs.current.get(nodeId);
+          if (stepEl) {
+            stepEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 100);
+      }
+    },
+    [queries.length],
+  );
+
+  const handleFetchAnswer = useCallback(
+    ({ question, index }: { question: string; index?: number }) => {
+      const promise = dispatch(
+        fetchWorkflowPreviewAnswer({
+          question,
+          workflowData,
+          indx: index,
+        }),
+      );
+      fetchStream.current = promise;
+    },
+    [dispatch, workflowData],
+  );
+
+  const handleQuestion = useCallback(
+    ({
+      question,
+      isRetry = false,
+      index = undefined,
+    }: {
+      question: string;
+      isRetry?: boolean;
+      index?: number;
+    }) => {
+      const trimmedQuestion = question.trim();
+      if (trimmedQuestion === '') return;
+
+      if (index !== undefined) {
+        if (!isRetry) dispatch(resendQuery({ index, prompt: trimmedQuestion }));
+        handleFetchAnswer({ question: trimmedQuestion, index });
+      } else {
+        if (!isRetry) {
+          const newQuery: Query = { prompt: trimmedQuestion };
+          dispatch(addQuery(newQuery));
+        }
+        handleFetchAnswer({ question: trimmedQuestion, index: undefined });
+      }
+    },
+    [dispatch, handleFetchAnswer],
+  );
+
+  const handleQuestionSubmission = (
+    question?: string,
+    updated?: boolean,
+    indx?: number,
+  ) => {
+    if (updated === true && question !== undefined && indx !== undefined) {
+      handleQuestion({
+        question,
+        index: indx,
+        isRetry: false,
+      });
+    } else if (question && status !== 'loading') {
+      const currentInput = question.trim();
+      if (lastQueryReturnedErr && queries.length > 0) {
+        const lastQueryIndex = queries.length - 1;
+        handleQuestion({
+          question: currentInput,
+          isRetry: true,
+          index: lastQueryIndex,
+        });
+      } else {
+        handleQuestion({
+          question: currentInput,
+          isRetry: false,
+          index: undefined,
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    dispatch(resetWorkflowPreview());
+    return () => {
+      if (fetchStream.current) fetchStream.current.abort();
+      handleWorkflowPreviewAbort();
+      dispatch(resetWorkflowPreview());
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (queries.length > 0) {
+      const lastQuery = queries[queries.length - 1];
+      setLastQueryReturnedErr(!!lastQuery.error);
+    } else setLastQueryReturnedErr(false);
+  }, [queries]);
+
+  const lastQuerySteps =
+    queries.length > 0 ? queries[queries.length - 1].executionSteps || [] : [];
+
+  return (
+    <div className="dark:bg-raisin-black flex h-full flex-col bg-white">
+      <div className="border-light-silver dark:bg-raisin-black flex h-[77px] items-center justify-between border-b bg-white px-6 dark:border-[#3A3A3A]">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center justify-center rounded-full bg-gray-100 p-3 text-gray-600 dark:bg-[#2C2C2C] dark:text-gray-300">
+            <Play className="h-4 w-4" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+              Preview
+            </h2>
+            <p className="max-w-md truncate text-xs text-gray-500 dark:text-gray-400">
+              {workflowData.name}
+              {workflowData.description && ` - ${workflowData.description}`}
+            </p>
+          </div>
+        </div>
+        {status === 'loading' && (
+          <span className="text-purple-30 dark:text-violets-are-blue flex items-center gap-1 text-xs">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            Running
+          </span>
+        )}
+      </div>
+
+      <div className="flex min-h-0 flex-1">
+        <div className="flex w-64 shrink-0 flex-col border-r border-gray-200 dark:border-[#3A3A3A]">
+          <div className="flex items-center justify-between px-4 py-3">
+            <h3 className="text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400">
+              Workflow
+            </h3>
+          </div>
+          <div className="scrollbar-thin flex-1 overflow-y-auto p-3">
+            <WorkflowMiniMap
+              nodes={workflowData.nodes}
+              activeNodeId={activeNodeId}
+              executionSteps={
+                lastQuerySteps.length > 0 ? lastQuerySteps : executionSteps
+              }
+              onNodeClick={scrollToStep}
+            />
+          </div>
+        </div>
+
+        <div className="relative flex min-w-0 flex-1 flex-col">
+          <div
+            ref={chatContainerRef}
+            className="scrollbar-thin absolute inset-0 bottom-[100px] overflow-y-auto px-4 pt-4"
+          >
+            {queries.length === 0 ? (
+              <div className="flex h-full flex-col items-center justify-center">
+                <div className="mb-2 flex size-14 shrink-0 items-center justify-center rounded-xl bg-gray-100 dark:bg-[#2C2C2C]">
+                  <MessageSquare className="size-6 text-gray-600 dark:text-gray-300" />
+                </div>
+                <p className="text-xl font-semibold text-gray-700 dark:text-gray-200">
+                  Test the workflow
+                </p>
+              </div>
+            ) : (
+              <div className="w-full">
+                {queries.map((query, index) => {
+                  const querySteps = query.executionSteps || [];
+                  const hasResponse = !!(query.response || query.error);
+                  const isLastQuery = index === queries.length - 1;
+                  const isOpen =
+                    openDetailsIndex === index ||
+                    (!hasResponse && isLastQuery && querySteps.length > 0);
+
+                  return (
+                    <div key={index}>
+                      {/* Query bubble */}
+                      <ConversationBubble
+                        className={index === 0 ? 'mt-5' : ''}
+                        message={query.prompt}
+                        type="QUESTION"
+                        handleUpdatedQuestionSubmission={
+                          handleQuestionSubmission
+                        }
+                        questionNumber={index}
+                      />
+
+                      {/* Execution Details */}
+                      {querySteps.length > 0 && (
+                        <ExecutionDetails
+                          steps={querySteps}
+                          nodes={workflowData.nodes}
+                          isOpen={isOpen}
+                          onToggle={() =>
+                            setOpenDetailsIndex(
+                              openDetailsIndex === index ? null : index,
+                            )
+                          }
+                          stepRefs={isLastQuery ? stepRefs : undefined}
+                        />
+                      )}
+
+                      {/* Response bubble */}
+                      {(query.response ||
+                        query.thought ||
+                        query.tool_calls) && (
+                        <ConversationBubble
+                          className={isLastQuery ? 'mb-32' : 'mb-7'}
+                          message={query.response}
+                          type="ANSWER"
+                          thought={query.thought}
+                          sources={query.sources}
+                          toolCalls={query.tool_calls}
+                          feedback={query.feedback}
+                          isStreaming={status === 'loading' && isLastQuery}
+                        />
+                      )}
+
+                      {/* Error bubble */}
+                      {query.error && (
+                        <ConversationBubble
+                          className={isLastQuery ? 'mb-32' : 'mb-7'}
+                          message={query.error}
+                          type="ERROR"
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+          <div className="dark:bg-raisin-black absolute right-0 bottom-0 left-0 flex w-full flex-col gap-2 bg-white px-4 pt-2 pb-4">
+            <MessageInput
+              onSubmit={(text) => handleQuestionSubmission(text)}
+              loading={status === 'loading'}
+              showSourceButton={false}
+              showToolButton={false}
+              autoFocus={true}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/agents/workflow/components/MobileBlocker.tsx

@@ -0,0 +1,18 @@
+import { Monitor } from 'lucide-react';
+
+export default function MobileBlocker() {
+  return (
+    <div className="bg-lotion dark:bg-raisin-black flex min-h-screen flex-col items-center justify-center px-6 text-center md:hidden">
+      <div className="bg-violets-are-blue/10 dark:bg-violets-are-blue/20 mb-6 flex h-20 w-20 items-center justify-center rounded-2xl">
+        <Monitor className="text-violets-are-blue h-10 w-10" />
+      </div>
+      <h2 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
+        Desktop Required
+      </h2>
+      <p className="max-w-sm text-sm leading-relaxed text-gray-500 dark:text-[#E0E0E0]">
+        The Workflow Builder requires a larger screen for the best experience.
+        Please open this page on a desktop or laptop computer.
+      </p>
+    </div>
+  );
+}

frontend/src/agents/workflow/components/PromptTextArea.tsx

@@ -0,0 +1,395 @@
+import { Braces, Plus, Search } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Edge, Node } from 'reactflow';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+interface WorkflowVariable {
+  name: string;
+  section: string;
+}
+
+function getUpstreamNodeIds(nodeId: string, edges: Edge[]): Set<string> {
+  const upstream = new Set<string>();
+  const queue = [nodeId];
+
+  while (queue.length > 0) {
+    const current = queue.shift()!;
+    for (const edge of edges) {
+      if (edge.target === current && !upstream.has(edge.source)) {
+        upstream.add(edge.source);
+        queue.push(edge.source);
+      }
+    }
+  }
+
+  return upstream;
+}
+
+function extractUpstreamVariables(
+  nodes: Node[],
+  edges: Edge[],
+  selectedNodeId: string,
+): WorkflowVariable[] {
+  const variables: WorkflowVariable[] = [
+    { name: 'query', section: 'Workflow input' },
+    { name: 'chat_history', section: 'Workflow input' },
+  ];
+  const seen = new Set(['query', 'chat_history']);
+  const upstreamIds = getUpstreamNodeIds(selectedNodeId, edges);
+
+  for (const node of nodes) {
+    if (!upstreamIds.has(node.id)) continue;
+
+    if (node.type === 'agent' && node.data?.config?.output_variable) {
+      const name = node.data.config.output_variable;
+      if (!seen.has(name)) {
+        seen.add(name);
+        variables.push({
+          name,
+          section: node.data.title || node.data.label || 'Agent',
+        });
+      }
+    }
+    if (node.type === 'state' && node.data?.variable) {
+      const name = node.data.variable;
+      if (!seen.has(name)) {
+        seen.add(name);
+        variables.push({
+          name,
+          section: 'Set State',
+        });
+      }
+    }
+  }
+
+  return variables;
+}
+
+function groupBySection(
+  vars: WorkflowVariable[],
+): Map<string, WorkflowVariable[]> {
+  const groups = new Map<string, WorkflowVariable[]>();
+  for (const v of vars) {
+    const list = groups.get(v.section) ?? [];
+    list.push(v);
+    groups.set(v.section, list);
+  }
+  return groups;
+}
+
+function HighlightedOverlay({ text }: { text: string }) {
+  const parts = text.split(/(\{\{[^}]*\}\})/g);
+  return (
+    <>
+      {parts.map((part, i) =>
+        /^\{\{[^}]*\}\}$/.test(part) ? (
+          <span key={i} className="text-violets-are-blue font-medium">
+            {part}
+          </span>
+        ) : (
+          <span key={i} className="text-gray-900 dark:text-white">
+            {part}
+          </span>
+        ),
+      )}
+    </>
+  );
+}
+
+function VariableListWithSearch({
+  variables,
+  onSelect,
+}: {
+  variables: WorkflowVariable[];
+  onSelect: (name: string) => void;
+}) {
+  const [search, setSearch] = useState('');
+
+  const filtered = useMemo(
+    () =>
+      variables.filter((v) =>
+        v.name.toLowerCase().includes(search.toLowerCase()),
+      ),
+    [variables, search],
+  );
+
+  const grouped = useMemo(() => groupBySection(filtered), [filtered]);
+
+  return (
+    <div className="flex w-full flex-col overflow-hidden">
+      <div className="flex items-center gap-2 border-b border-[#E5E5E5] px-3 py-2 dark:border-[#3A3A3A]">
+        <Search className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search variables..."
+          className="placeholder:text-muted-foreground w-full bg-transparent text-sm text-gray-800 outline-none dark:text-gray-200"
+        />
+      </div>
+
+      <div className="max-h-48 overflow-y-auto">
+        {filtered.length === 0 ? (
+          <div className="text-muted-foreground px-3 py-4 text-center text-xs">
+            No variables found
+          </div>
+        ) : (
+          Array.from(grouped.entries()).map(([section, vars]) => (
+            <div key={section}>
+              <div className="text-muted-foreground truncate px-3 pt-2.5 pb-1 text-[10px] font-semibold tracking-wider uppercase">
+                {section}
+              </div>
+              {vars.map((v) => (
+                <button
+                  key={v.name}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onSelect(v.name);
+                  }}
+                  className="flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors hover:bg-gray-50 dark:hover:bg-[#383838]"
+                >
+                  <Braces className="text-violets-are-blue h-3.5 w-3.5 shrink-0" />
+                  <span className="truncate font-medium text-gray-800 dark:text-gray-200">
+                    {v.name}
+                  </span>
+                </button>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface PromptTextAreaProps {
+  value: string;
+  onChange: (value: string) => void;
+  nodes: Node[];
+  edges: Edge[];
+  selectedNodeId: string;
+  placeholder?: string;
+  rows?: number;
+  label?: string;
+}
+
+export default function PromptTextArea({
+  value,
+  onChange,
+  nodes,
+  edges,
+  selectedNodeId,
+  placeholder,
+  rows = 4,
+  label,
+}: PromptTextAreaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });
+  const [filterText, setFilterText] = useState('');
+  const [cursorInsertPos, setCursorInsertPos] = useState<number | null>(null);
+  const [contextOpen, setContextOpen] = useState(false);
+
+  const variables = useMemo(
+    () => extractUpstreamVariables(nodes, edges, selectedNodeId),
+    [nodes, edges, selectedNodeId],
+  );
+  const filtered = useMemo(
+    () =>
+      variables.filter((v) =>
+        v.name.toLowerCase().includes(filterText.toLowerCase()),
+      ),
+    [variables, filterText],
+  );
+
+  const checkForTrigger = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const cursorPos = textarea.selectionStart;
+    const textBeforeCursor = value.slice(0, cursorPos);
+    const triggerMatch = textBeforeCursor.match(/\{\{(\w*)$/);
+
+    if (triggerMatch) {
+      setFilterText(triggerMatch[1]);
+      setCursorInsertPos(cursorPos);
+
+      const wrapper = wrapperRef.current;
+      if (!wrapper) return;
+
+      setDropdownPos({
+        top: wrapper.offsetHeight + 4,
+        left: 0,
+      });
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false);
+    }
+  }, [value]);
+
+  const insertVariable = useCallback(
+    (varName: string) => {
+      if (cursorInsertPos === null) return;
+
+      const textBeforeCursor = value.slice(0, cursorInsertPos);
+      const triggerMatch = textBeforeCursor.match(/\{\{(\w*)$/);
+      if (!triggerMatch) return;
+
+      const startPos = cursorInsertPos - triggerMatch[0].length;
+      const insertion = `{{${varName}}}`;
+      const newValue =
+        value.slice(0, startPos) + insertion + value.slice(cursorInsertPos);
+
+      onChange(newValue);
+      setShowDropdown(false);
+
+      requestAnimationFrame(() => {
+        const newCursorPos = startPos + insertion.length;
+        textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+        textareaRef.current?.focus();
+      });
+    },
+    [value, cursorInsertPos, onChange],
+  );
+
+  const insertVariableFromButton = useCallback(
+    (varName: string) => {
+      const textarea = textareaRef.current;
+      const cursorPos = textarea?.selectionStart ?? value.length;
+      const insertion = `{{${varName}}}`;
+      const newValue =
+        value.slice(0, cursorPos) + insertion + value.slice(cursorPos);
+
+      onChange(newValue);
+      setContextOpen(false);
+
+      requestAnimationFrame(() => {
+        const newCursorPos = cursorPos + insertion.length;
+        textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+        textareaRef.current?.focus();
+      });
+    },
+    [value, onChange],
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as HTMLElement)
+      ) {
+        setShowDropdown(false);
+      }
+    };
+    if (showDropdown) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () =>
+        document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [showDropdown]);
+
+  return (
+    <div>
+      {label && (
+        <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+      )}
+      <div
+        ref={wrapperRef}
+        className="border-light-silver focus-within:ring-purple-30 relative rounded-xl border bg-white transition-all focus-within:ring-2 dark:border-[#3A3A3A] dark:bg-[#2C2C2C]"
+      >
+        <div
+          ref={overlayRef}
+          aria-hidden
+          className="pointer-events-none absolute inset-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm wrap-break-word whitespace-pre-wrap"
+        >
+          {value ? (
+            <HighlightedOverlay text={value} />
+          ) : (
+            <span className="text-gray-400 dark:text-gray-500">
+              {placeholder}
+            </span>
+          )}
+        </div>
+
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+            setTimeout(checkForTrigger, 0);
+          }}
+          onKeyUp={checkForTrigger}
+          onKeyDown={(e) => {
+            if (showDropdown && e.key === 'Escape') {
+              e.preventDefault();
+              e.stopPropagation();
+              setShowDropdown(false);
+            }
+          }}
+          onScroll={() => {
+            if (overlayRef.current && textareaRef.current) {
+              overlayRef.current.scrollTop = textareaRef.current.scrollTop;
+            }
+          }}
+          className="relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm caret-black outline-none dark:caret-white"
+          style={{
+            color: 'transparent',
+            WebkitTextFillColor: 'transparent',
+          }}
+          rows={rows}
+          placeholder={placeholder}
+          spellCheck={false}
+        />
+
+        <div className="absolute right-4 bottom-1.5 z-10">
+          <Popover open={contextOpen} onOpenChange={setContextOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                className="text-violets-are-blue hover:bg-violets-are-blue/10 flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors"
+              >
+                <Plus className="h-3 w-3" />
+                Add context
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="end"
+              side="top"
+              className="w-60 rounded-xl border border-[#E5E5E5] bg-white p-0 shadow-lg dark:border-[#3A3A3A] dark:bg-[#2C2C2C]"
+              onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+              <VariableListWithSearch
+                variables={variables}
+                onSelect={insertVariableFromButton}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {showDropdown && filtered.length > 0 && (
+          <div
+            ref={dropdownRef}
+            className="absolute z-50 w-64 rounded-xl border border-[#E5E5E5] bg-white shadow-lg dark:border-[#3A3A3A] dark:bg-[#2C2C2C]"
+            style={{ top: dropdownPos.top, left: dropdownPos.left }}
+          >
+            <VariableListWithSearch
+              variables={filtered}
+              onSelect={insertVariable}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/agents/workflow/nodes/BaseNode.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode } from 'react';
+import { Handle, Position } from 'reactflow';
+
+interface BaseNodeProps {
+  title: string;
+  children?: ReactNode;
+  selected?: boolean;
+  type?: 'start' | 'end' | 'default' | 'state' | 'agent';
+  icon?: ReactNode;
+  handles?: {
+    source?: boolean;
+    target?: boolean;
+  };
+}
+
+export const BaseNode: React.FC<BaseNodeProps> = ({
+  title,
+  children,
+  selected,
+  type = 'default',
+  icon,
+  handles = { source: true, target: true },
+}) => {
+  let bgColor = 'bg-white dark:bg-[#2C2C2C]';
+  let borderColor = 'border-gray-200 dark:border-[#3A3A3A]';
+  let iconBg = 'bg-gray-100 dark:bg-gray-800';
+  let iconColor = 'text-gray-600 dark:text-gray-400';
+
+  if (selected) {
+    borderColor =
+      'border-violets-are-blue ring-2 ring-purple-300 dark:ring-violets-are-blue';
+  }
+
+  if (type === 'start') {
+    iconBg = 'bg-green-100 dark:bg-green-900/30';
+    iconColor = 'text-green-600 dark:text-green-400';
+  } else if (type === 'end') {
+    iconBg = 'bg-red-100 dark:bg-red-900/30';
+    iconColor = 'text-red-600 dark:text-red-400';
+  } else if (type === 'state') {
+    iconBg = 'bg-gray-100 dark:bg-gray-800';
+    iconColor = 'text-gray-600 dark:text-gray-400';
+  }
+
+  return (
+    <div
+      className={`rounded-full border ${bgColor} ${borderColor} shadow-md transition-all hover:shadow-lg ${
+        selected ? 'scale-105' : ''
+      } max-w-[250px] min-w-[180px]`}
+    >
+      {handles.target && (
+        <Handle
+          type="target"
+          position={Position.Left}
+          isConnectable={true}
+          className="hover:bg-violets-are-blue! -left-1! h-3! w-3! rounded-full! border-2! border-white! bg-gray-400! transition-colors dark:border-[#2C2C2C]!"
+        />
+      )}
+
+      <div className="flex items-center gap-3 px-4 py-3">
+        <div
+          className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${iconBg} ${iconColor}`}
+        >
+          {icon}
+        </div>
+        <div className="min-w-0 flex-1 pr-3">
+          <div
+            className="truncate text-sm font-semibold text-gray-900 dark:text-white"
+            title={title}
+          >
+            {title}
+          </div>
+          {children && (
+            <div className="mt-1 truncate text-xs text-gray-600 dark:text-gray-400">
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {handles.source && (
+        <Handle
+          type="source"
+          position={Position.Right}
+          isConnectable={true}
+          className="hover:bg-violets-are-blue! -right-1! h-3! w-3! rounded-full! border-2! border-white! bg-gray-400! transition-colors dark:border-[#2C2C2C]!"
+        />
+      )}
+    </div>
+  );
+};

frontend/src/agents/workflow/nodes/SetStateNode.tsx

@@ -0,0 +1,46 @@
+import { Database } from 'lucide-react';
+import { memo } from 'react';
+import { NodeProps } from 'reactflow';
+
+import { BaseNode } from './BaseNode';
+
+type SetStateNodeData = {
+  label?: string;
+  title?: string;
+  variable?: string;
+  value?: string;
+};
+
+const SetStateNode = ({ data, selected }: NodeProps<SetStateNodeData>) => {
+  const title = data.title || data.label || 'Set State';
+  return (
+    <BaseNode
+      title={title}
+      type="state"
+      selected={selected}
+      icon={<Database size={16} />}
+      handles={{ source: true, target: true }}
+    >
+      <div className="flex flex-col gap-1">
+        {data.variable && (
+          <div
+            className="truncate text-[10px] text-gray-500 uppercase"
+            title={`Variable: ${data.variable}`}
+          >
+            {data.variable}
+          </div>
+        )}
+        {data.value && (
+          <div
+            className="truncate text-xs text-blue-600 dark:text-blue-400"
+            title={`Value: ${data.value}`}
+          >
+            {data.value}
+          </div>
+        )}
+      </div>
+    </BaseNode>
+  );
+};
+
+export default memo(SetStateNode);

frontend/src/agents/workflow/nodes/index.tsx

@@ -0,0 +1,144 @@
+import React, { memo } from 'react';
+import { BaseNode } from './BaseNode';
+import SetStateNode from './SetStateNode';
+import { Play, Bot, StickyNote, Flag } from 'lucide-react';
+
+export const StartNode = memo(function StartNode({
+  selected,
+}: {
+  selected: boolean;
+}) {
+  return (
+    <BaseNode
+      title="Start"
+      type="start"
+      selected={selected}
+      handles={{ target: false, source: true }}
+      icon={<Play size={16} />}
+    >
+      <div className="text-xs text-gray-500">Entry point of the workflow</div>
+    </BaseNode>
+  );
+});
+
+export const EndNode = memo(function EndNode({
+  selected,
+}: {
+  selected: boolean;
+}) {
+  return (
+    <BaseNode
+      title="End"
+      type="end"
+      selected={selected}
+      handles={{ target: true, source: false }}
+      icon={<Flag size={16} />}
+    >
+      <div className="text-xs text-gray-500">Workflow completion</div>
+    </BaseNode>
+  );
+});
+
+export const AgentNode = memo(function AgentNode({
+  data,
+  selected,
+}: {
+  data: {
+    title?: string;
+    label?: string;
+    config?: {
+      agent_type?: string;
+      model_id?: string;
+      prompt_template?: string;
+      output_variable?: string;
+    };
+  };
+  selected: boolean;
+}) {
+  const title = data.title || data.label || 'Agent';
+  const config = data.config || {};
+  return (
+    <BaseNode
+      title={title}
+      type="agent"
+      selected={selected}
+      icon={<Bot size={16} />}
+    >
+      <div className="flex flex-col gap-1">
+        {config.agent_type && (
+          <div
+            className="truncate text-[10px] text-gray-500 uppercase"
+            title={config.agent_type}
+          >
+            {config.agent_type}
+          </div>
+        )}
+        {config.model_id && (
+          <div
+            className="text-purple-30 dark:text-violets-are-blue truncate text-xs"
+            title={config.model_id}
+          >
+            {config.model_id}
+          </div>
+        )}
+        {config.output_variable && (
+          <div
+            className="truncate text-xs text-green-600 dark:text-green-400"
+            title={`Output ➔ ${config.output_variable}`}
+          >
+            Output ➔ {config.output_variable}
+          </div>
+        )}
+      </div>
+    </BaseNode>
+  );
+});
+
+export const NoteNode = memo(function NoteNode({
+  data,
+  selected,
+}: {
+  data: { title?: string; label?: string; content?: string };
+  selected: boolean;
+}) {
+  const title = data.title || data.label || 'Note';
+  const maxContentLength = 120;
+  const displayContent =
+    data.content && data.content.length > maxContentLength
+      ? `${data.content.substring(0, maxContentLength)}...`
+      : data.content;
+
+  return (
+    <div
+      className={`max-w-[250px] rounded-3xl border border-yellow-200 bg-yellow-50 px-5 py-3 shadow-md transition-all dark:border-yellow-800 dark:bg-yellow-900/20 ${
+        selected
+          ? 'scale-105 ring-2 ring-yellow-300 dark:ring-yellow-700'
+          : 'hover:shadow-lg'
+      }`}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-800/30 dark:text-yellow-500">
+          <StickyNote size={18} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div
+            className="truncate text-sm font-semibold text-yellow-800 dark:text-yellow-300"
+            title={title}
+          >
+            {title}
+          </div>
+          {displayContent && (
+            <div
+              className="mt-1 text-xs wrap-break-word text-yellow-700 italic dark:text-yellow-400"
+              title={data.content}
+            >
+              {displayContent}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export { SetStateNode };

frontend/src/agents/workflow/workflowPreviewSlice.ts

@@ -0,0 +1,441 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import conversationService from '../../api/services/conversationService';
+import { Query, Status } from '../../conversation/conversationModels';
+import { WorkflowEdge, WorkflowNode } from '../types/workflow';
+
+export interface WorkflowExecutionStep {
+  nodeId: string;
+  nodeType: string;
+  nodeTitle: string;
+  status: 'pending' | 'running' | 'completed' | 'failed';
+  reasoning?: string;
+  startedAt?: number;
+  completedAt?: number;
+  stateSnapshot?: Record<string, unknown>;
+  output?: string;
+  error?: string;
+}
+
+interface WorkflowData {
+  name: string;
+  description?: string;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+}
+
+export interface WorkflowQuery extends Query {
+  executionSteps?: WorkflowExecutionStep[];
+}
+
+export interface WorkflowPreviewState {
+  queries: WorkflowQuery[];
+  status: Status;
+  executionSteps: WorkflowExecutionStep[];
+  activeNodeId: string | null;
+}
+
+const initialState: WorkflowPreviewState = {
+  queries: [],
+  status: 'idle',
+  executionSteps: [],
+  activeNodeId: null,
+};
+
+let abortController: AbortController | null = null;
+
+export function handleWorkflowPreviewAbort() {
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+}
+
+interface ThunkState {
+  preference: {
+    token: string | null;
+  };
+  workflowPreview: WorkflowPreviewState;
+}
+
+export const fetchWorkflowPreviewAnswer = createAsyncThunk<
+  void,
+  {
+    question: string;
+    workflowData: WorkflowData;
+    indx?: number;
+  },
+  { state: ThunkState }
+>(
+  'workflowPreview/fetchAnswer',
+  async ({ question, workflowData, indx }, { dispatch, getState }) => {
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+
+    const state = getState();
+
+    if (state.preference) {
+      const payload = {
+        question,
+        workflow: workflowData,
+        save_conversation: false,
+      };
+
+      await new Promise<void>((resolve, reject) => {
+        conversationService
+          .answerStream(payload, state.preference.token, signal)
+          .then((response) => {
+            if (!response.body) throw Error('No response body');
+
+            let buffer = '';
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder('utf-8');
+
+            const processStream = ({
+              done,
+              value,
+            }: ReadableStreamReadResult<Uint8Array>): Promise<void> | void => {
+              if (done) {
+                resolve();
+                return;
+              }
+
+              buffer += decoder.decode(value, { stream: true });
+              const lines = buffer.split('\n');
+              buffer = lines.pop() || '';
+
+              const currentState = getState();
+
+              for (const line of lines) {
+                if (line.startsWith('data:')) {
+                  try {
+                    const data = JSON.parse(line.slice(5));
+                    const targetIndex =
+                      indx ?? currentState.workflowPreview.queries.length - 1;
+
+                    if (data.type === 'end') {
+                      dispatch(workflowPreviewSlice.actions.setStatus('idle'));
+                    } else if (data.type === 'thought') {
+                      dispatch(
+                        updateThought({
+                          index: targetIndex,
+                          query: { thought: data.thought },
+                        }),
+                      );
+                    } else if (data.type === 'workflow_step') {
+                      dispatch(
+                        updateExecutionStep({
+                          index: targetIndex,
+                          step: {
+                            nodeId: data.node_id,
+                            nodeType: data.node_type,
+                            nodeTitle: data.node_title,
+                            status: data.status,
+                            reasoning: data.reasoning,
+                            stateSnapshot: data.state_snapshot,
+                            output: data.output,
+                            error: data.error,
+                          },
+                        }),
+                      );
+                      if (data.status === 'running') {
+                        dispatch(setActiveNodeId(data.node_id));
+                      }
+                    } else if (data.type === 'source') {
+                      dispatch(
+                        updateStreamingSource({
+                          index: targetIndex,
+                          query: { sources: data.source ?? [] },
+                        }),
+                      );
+                    } else if (data.type === 'tool_call') {
+                      dispatch(
+                        updateToolCall({
+                          index: targetIndex,
+                          tool_call: data.data,
+                        }),
+                      );
+                    } else if (data.type === 'error') {
+                      dispatch(
+                        workflowPreviewSlice.actions.setStatus('failed'),
+                      );
+                      dispatch(
+                        workflowPreviewSlice.actions.raiseError({
+                          index: targetIndex,
+                          message: data.error,
+                        }),
+                      );
+                    } else if (data.type === 'structured_answer') {
+                      dispatch(
+                        updateStreamingQuery({
+                          index: targetIndex,
+                          query: {
+                            response: data.answer,
+                            structured: data.structured,
+                            schema: data.schema,
+                          },
+                        }),
+                      );
+                    } else if (data.answer !== undefined) {
+                      dispatch(
+                        updateStreamingQuery({
+                          index: targetIndex,
+                          query: { response: data.answer },
+                        }),
+                      );
+                    }
+                  } catch {
+                    /* empty */
+                  }
+                }
+              }
+
+              return reader.read().then(processStream);
+            };
+
+            reader.read().then(processStream).catch(reject);
+          })
+          .catch(reject);
+      });
+    }
+  },
+);
+
+export const workflowPreviewSlice = createSlice({
+  name: 'workflowPreview',
+  initialState,
+  reducers: {
+    addQuery(state, action: PayloadAction<Query>) {
+      state.queries.push(action.payload);
+    },
+    resendQuery(
+      state,
+      action: PayloadAction<{ index: number; prompt: string; query?: Query }>,
+    ) {
+      state.queries = [
+        ...state.queries.slice(0, action.payload.index),
+        { prompt: action.payload.prompt },
+      ];
+      state.executionSteps = [];
+      state.activeNodeId = null;
+    },
+    updateStreamingQuery(
+      state,
+      action: PayloadAction<{
+        index: number;
+        query: Partial<Query>;
+      }>,
+    ) {
+      const { index, query } = action.payload;
+      if (state.status === 'idle') return;
+
+      if (query.response !== undefined) {
+        state.queries[index].response =
+          (state.queries[index].response || '') + query.response;
+      }
+
+      if (query.structured !== undefined) {
+        state.queries[index].structured = query.structured;
+      }
+
+      if (query.schema !== undefined) {
+        state.queries[index].schema = query.schema;
+      }
+    },
+    updateThought(
+      state,
+      action: PayloadAction<{
+        index: number;
+        query: Partial<Query>;
+      }>,
+    ) {
+      const { index, query } = action.payload;
+      if (query.thought !== undefined) {
+        state.queries[index].thought =
+          (state.queries[index].thought || '') + query.thought;
+      }
+    },
+    updateStreamingSource(
+      state,
+      action: PayloadAction<{
+        index: number;
+        query: Partial<Query>;
+      }>,
+    ) {
+      const { index, query } = action.payload;
+      if (!state.queries[index].sources) {
+        state.queries[index].sources = query?.sources;
+      } else if (query.sources) {
+        state.queries[index].sources!.push(...query.sources);
+      }
+    },
+    updateToolCall(state, action) {
+      const { index, tool_call } = action.payload;
+
+      if (!state.queries[index].tool_calls) {
+        state.queries[index].tool_calls = [];
+      }
+
+      const existingIndex = state.queries[index].tool_calls.findIndex(
+        (call: { call_id: string }) => call.call_id === tool_call.call_id,
+      );
+
+      if (existingIndex !== -1) {
+        const existingCall = state.queries[index].tool_calls[existingIndex];
+        state.queries[index].tool_calls[existingIndex] = {
+          ...existingCall,
+          ...tool_call,
+        };
+      } else {
+        state.queries[index].tool_calls.push(tool_call);
+      }
+    },
+    updateQuery(
+      state,
+      action: PayloadAction<{ index: number; query: Partial<Query> }>,
+    ) {
+      const { index, query } = action.payload;
+      state.queries[index] = {
+        ...state.queries[index],
+        ...query,
+      };
+    },
+    updateExecutionStep(
+      state,
+      action: PayloadAction<{
+        index: number;
+        step: Partial<WorkflowExecutionStep> & {
+          nodeId: string;
+          nodeType: string;
+          nodeTitle: string;
+          status: WorkflowExecutionStep['status'];
+        };
+      }>,
+    ) {
+      const { index, step } = action.payload;
+
+      if (!state.queries[index]) return;
+      if (!state.queries[index].executionSteps) {
+        state.queries[index].executionSteps = [];
+      }
+
+      const querySteps = state.queries[index].executionSteps!;
+      const existingIndex = querySteps.findIndex((s) => s.nodeId === step.nodeId);
+
+      const updatedStep: WorkflowExecutionStep = {
+        nodeId: step.nodeId,
+        nodeType: step.nodeType,
+        nodeTitle: step.nodeTitle,
+        status: step.status,
+        reasoning: step.reasoning,
+        stateSnapshot: step.stateSnapshot,
+        output: step.output,
+        error: step.error,
+        startedAt: existingIndex !== -1 ? querySteps[existingIndex].startedAt : Date.now(),
+        completedAt:
+          step.status === 'completed' || step.status === 'failed'
+            ? Date.now()
+            : existingIndex !== -1
+              ? querySteps[existingIndex].completedAt
+              : undefined,
+      };
+
+      if (existingIndex !== -1) {
+        updatedStep.stateSnapshot = step.stateSnapshot ?? querySteps[existingIndex].stateSnapshot;
+        updatedStep.output = step.output ?? querySteps[existingIndex].output;
+        updatedStep.error = step.error ?? querySteps[existingIndex].error;
+        querySteps[existingIndex] = updatedStep;
+      } else {
+        querySteps.push(updatedStep);
+      }
+
+      const globalIndex = state.executionSteps.findIndex((s) => s.nodeId === step.nodeId);
+      if (globalIndex !== -1) {
+        state.executionSteps[globalIndex] = updatedStep;
+      } else {
+        state.executionSteps.push(updatedStep);
+      }
+    },
+    setActiveNodeId(state, action: PayloadAction<string | null>) {
+      state.activeNodeId = action.payload;
+    },
+    setStatus(state, action: PayloadAction<Status>) {
+      state.status = action.payload;
+    },
+    raiseError(
+      state,
+      action: PayloadAction<{
+        index: number;
+        message: string;
+      }>,
+    ) {
+      const { index, message } = action.payload;
+      state.queries[index].error = message;
+    },
+    resetWorkflowPreview: (state) => {
+      state.queries = initialState.queries;
+      state.status = initialState.status;
+      state.executionSteps = initialState.executionSteps;
+      state.activeNodeId = initialState.activeNodeId;
+      handleWorkflowPreviewAbort();
+    },
+    clearExecutionSteps: (state) => {
+      state.executionSteps = [];
+      state.activeNodeId = null;
+    },
+  },
+  extraReducers(builder) {
+    builder
+      .addCase(fetchWorkflowPreviewAnswer.pending, (state) => {
+        state.status = 'loading';
+        state.executionSteps = [];
+        state.activeNodeId = null;
+      })
+      .addCase(fetchWorkflowPreviewAnswer.rejected, (state, action) => {
+        if (action.meta.aborted) {
+          state.status = 'idle';
+          return;
+        }
+        state.status = 'failed';
+        if (state.queries.length > 0) {
+          state.queries[state.queries.length - 1].error =
+            'Something went wrong';
+        }
+      });
+  },
+});
+
+interface RootStateWithWorkflowPreview {
+  workflowPreview: WorkflowPreviewState;
+}
+
+export const selectWorkflowPreviewQueries = (
+  state: RootStateWithWorkflowPreview,
+) => state.workflowPreview.queries;
+export const selectWorkflowPreviewStatus = (
+  state: RootStateWithWorkflowPreview,
+) => state.workflowPreview.status;
+export const selectWorkflowExecutionSteps = (
+  state: RootStateWithWorkflowPreview,
+) => state.workflowPreview.executionSteps;
+export const selectActiveNodeId = (state: RootStateWithWorkflowPreview) =>
+  state.workflowPreview.activeNodeId;
+
+export const {
+  addQuery,
+  updateQuery,
+  resendQuery,
+  updateStreamingQuery,
+  updateThought,
+  updateStreamingSource,
+  updateToolCall,
+  updateExecutionStep,
+  setActiveNodeId,
+  setStatus,
+  raiseError,
+  resetWorkflowPreview,
+  clearExecutionSteps,
+} = workflowPreviewSlice.actions;
+
+export default workflowPreviewSlice.reducer;

frontend/src/api/endpoints.ts

@@ -68,6 +68,8 @@ const endpoints = {
     AGENT_FOLDERS: '/api/agents/folders/',
     AGENT_FOLDER: (id: string) => `/api/agents/folders/${id}`,
     MOVE_AGENT_TO_FOLDER: '/api/agents/folders/move_agent',
+    WORKFLOWS: '/api/workflows',
+    WORKFLOW: (id: string) => `/api/workflows/${id}`,
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/api/services/userService.ts

@@ -144,15 +144,15 @@ const userService = {
   createAgentFolder: (
     data: { name: string; parent_id?: string },
     token: string | null,
-  ): Promise<any> =>
-    apiClient.post(endpoints.USER.AGENT_FOLDERS, data, token),
+  ): Promise<any> => apiClient.post(endpoints.USER.AGENT_FOLDERS, data, token),
   getAgentFolder: (id: string, token: string | null): Promise<any> =>
     apiClient.get(endpoints.USER.AGENT_FOLDER(id), token),
   updateAgentFolder: (
     id: string,
     data: { name?: string; parent_id?: string },
     token: string | null,
-  ): Promise<any> => apiClient.put(endpoints.USER.AGENT_FOLDER(id), data, token),
+  ): Promise<any> =>
+    apiClient.put(endpoints.USER.AGENT_FOLDER(id), data, token),
   deleteAgentFolder: (id: string, token: string | null): Promise<any> =>
     apiClient.delete(endpoints.USER.AGENT_FOLDER(id), token),
   moveAgentToFolder: (
@@ -160,6 +160,14 @@ const userService = {
     token: string | null,
   ): Promise<any> =>
     apiClient.post(endpoints.USER.MOVE_AGENT_TO_FOLDER, data, token),
+  getWorkflow: (id: string, token: string | null): Promise<any> =>
+    apiClient.get(endpoints.USER.WORKFLOW(id), token),
+  createWorkflow: (data: any, token: string | null): Promise<any> =>
+    apiClient.post(endpoints.USER.WORKFLOWS, data, token),
+  updateWorkflow: (id: string, data: any, token: string | null): Promise<any> =>
+    apiClient.put(endpoints.USER.WORKFLOW(id), data, token),
+  deleteWorkflow: (id: string, token: string | null): Promise<any> =>
+    apiClient.delete(endpoints.USER.WORKFLOW(id), token),
 };
 
 export default userService;

frontend/src/components/MessageInput.tsx

@@ -563,8 +563,7 @@ export default function MessageInput({
       e.preventDefault();
       uploadFiles(files);
     }
-};
-
+  };
 
   const handlePostDocumentSelect = (doc: any) => {
     console.log('Selected document:', doc);

frontend/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 leading-none font-medium tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

frontend/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

frontend/src/components/ui/command.tsx

@@ -0,0 +1,182 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import * as React from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { XIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

frontend/src/components/ui/multi-select.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+interface MultiSelectProps {
+  options: MultiSelectOption[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+  placeholder?: string;
+  emptyText?: string;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+export function MultiSelect({
+  options,
+  selected,
+  onChange,
+  placeholder = 'Select items...',
+  emptyText = 'No results found.',
+  searchPlaceholder = 'Search...',
+  className,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (value: string) => {
+    const newSelected = selected.includes(value)
+      ? selected.filter((item) => item !== value)
+      : [...selected, value];
+    onChange(newSelected);
+  };
+
+  const handleRemove = (value: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onChange(selected.filter((item) => item !== value));
+  };
+
+  const selectedLabels = options
+    .filter((option) => selected.includes(option.value))
+    .map((option) => option.label);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            'w-full justify-between border-[#E5E5E5] bg-white hover:bg-gray-50 dark:border-[#3A3A3A] dark:bg-[#2C2C2C] dark:hover:bg-[#383838]',
+            !selected.length && 'text-gray-500 dark:text-gray-400',
+            className,
+          )}
+        >
+          <div className="flex flex-wrap gap-1">
+            {selected.length === 0 ? (
+              placeholder
+            ) : (
+              <>
+                {selectedLabels.slice(0, 2).map((label) => {
+                  const option = options.find((o) => o.label === label);
+                  return (
+                    <span
+                      key={option?.value || label}
+                      className="dark:bg-purple-30/30 bg-violets-are-blue/20 inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium text-purple-700 dark:text-purple-300"
+                    >
+                      {label}
+                      <span
+                        role="button"
+                        tabIndex={0}
+                        className="flex h-3 w-3 cursor-pointer items-center justify-center hover:text-purple-900 dark:hover:text-purple-200"
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }}
+                        onClick={(e) => handleRemove(option?.value || '', e)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            handleRemove(
+                              option?.value || '',
+                              e as unknown as React.MouseEvent,
+                            );
+                          }
+                        }}
+                      >
+                        <X className="h-3 w-3" />
+                      </span>
+                    </span>
+                  );
+                })}
+                {selected.length > 2 && (
+                  <span className="text-xs text-gray-600 dark:text-gray-400">
+                    +{selected.length - 2} more
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-(--radix-popover-trigger-width) border-[#E5E5E5] bg-white p-0 dark:border-[#3A3A3A] dark:bg-[#2C2C2C]"
+        align="start"
+      >
+        <Command className="bg-transparent">
+          <CommandInput placeholder={searchPlaceholder} className="h-9" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-sm">
+              {emptyText}
+            </CommandEmpty>
+            <CommandGroup className="p-1">
+              {options.map((option) => {
+                const isSelected = selected.includes(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    value={option.label}
+                    onSelect={() => handleSelect(option.value)}
+                    className="cursor-pointer dark:hover:bg-[#383838]"
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border-2',
+                        isSelected
+                          ? 'border-purple-30 bg-purple-30 text-white'
+                          : 'border-gray-400 dark:border-gray-500',
+                      )}
+                    >
+                      {isSelected && <Check className="h-3 w-3 stroke-white" />}
+                    </div>
+                    {option.label}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

frontend/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

frontend/src/components/ui/select.tsx

@@ -0,0 +1,188 @@
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-light-silver aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:ring-purple-30/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-white px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none hover:bg-gray-50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-gray-500 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:border-[#3A3A3A] dark:bg-[#2C2C2C] dark:hover:bg-[#383838] dark:data-placeholder:text-gray-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-gray-600 dark:[&_svg:not([class*='text-'])]:text-gray-400",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'item-aligned',
+  align = 'center',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'border-light-silver bg-lotion data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border text-gray-900 shadow-md dark:border-[#3A3A3A] dark:bg-[#2C2C2C] dark:text-white',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none hover:bg-gray-100 data-disabled:pointer-events-none data-disabled:opacity-50 dark:hover:bg-[#383838] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

frontend/src/components/ui/sheet.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

frontend/src/conversation/ConversationBubble.tsx

@@ -150,7 +150,7 @@ const ConversationBubble = forwardRef<
             {!isEditClicked && (
               <>
                 <div className="relative mr-2 flex w-full flex-col">
-                  <div className="from-medium-purple to-slate-blue mr-2 ml-2 flex max-w-full items-start gap-2 rounded-[28px] bg-linear-to-b px-5 py-4 text-sm leading-normal break-words whitespace-pre-wrap text-white sm:text-base">
+                  <div className="from-medium-purple to-slate-blue mr-2 ml-2 flex max-w-full items-start gap-2 rounded-[28px] bg-linear-to-b px-5 py-4 text-sm leading-normal wrap-break-word whitespace-pre-wrap text-white sm:text-base">
                     <div
                       ref={messageRef}
                       className={`${isQuestionCollapsed ? 'line-clamp-4' : ''} w-full`}
@@ -305,15 +305,15 @@ const ConversationBubble = forwardRef<
                     {sources?.slice(0, 3)?.map((source, index) => (
                       <div key={index} className="relative">
                         <div
-                          className="bg-gray-1000 dark:bg-gun-metal h-28 cursor-pointer rounded-[20px] p-4 hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
+                          className="bg-gray-1000 dark:bg-gun-metal h-28 cursor-pointer rounded-4xl p-4 hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
                           onMouseOver={() => setActiveTooltip(index)}
                           onMouseOut={() => setActiveTooltip(null)}
                         >
-                          <p className="ellipsis-text h-12 text-xs break-words">
+                          <p className="ellipsis-text h-12 text-xs wrap-break-word">
                             {source.text}
                           </p>
                           <div
-                            className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
+                            className={`mt-3.5 flex flex-row items-center gap-1.5 underline-offset-2 ${
                               source.link && source.link !== 'local'
                                 ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
                                 : ''
@@ -334,7 +334,7 @@ const ConversationBubble = forwardRef<
                               className="h-[17px] w-[17px] object-fill"
                             />
                             <p
-                              className="mt-[2px] truncate text-xs"
+                              className="mt-0.5 truncate text-xs"
                               title={
                                 source.link && source.link !== 'local'
                                   ? source.link
@@ -353,7 +353,7 @@ const ConversationBubble = forwardRef<
                             onMouseOver={() => setActiveTooltip(index)}
                             onMouseOut={() => setActiveTooltip(null)}
                           >
-                            <p className="line-clamp-6 max-h-[164px] overflow-hidden rounded-md text-sm break-words text-ellipsis">
+                            <p className="line-clamp-6 max-h-[164px] overflow-hidden rounded-md text-sm wrap-break-word text-ellipsis">
                               {source.text}
                             </p>
                           </div>
@@ -362,7 +362,7 @@ const ConversationBubble = forwardRef<
                     ))}
                     {(sources?.length ?? 0) > 3 && (
                       <div
-                        className="bg-gray-1000 text-purple-30 dark:bg-gun-metal flex h-28 cursor-pointer flex-col-reverse rounded-[20px] p-4 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
+                        className="bg-gray-1000 text-purple-30 dark:bg-gun-metal flex h-28 cursor-pointer flex-col-reverse rounded-4xl p-4 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
                         onClick={() => setIsSidebarOpen(true)}
                       >
                         <p className="ellipsis-text h-22 text-xs">
@@ -414,7 +414,7 @@ const ConversationBubble = forwardRef<
                       <Fragment key={index}>
                         {segment.type === 'text' ? (
                           <ReactMarkdown
-                            className="fade-in flex flex-col gap-3 leading-normal break-words whitespace-pre-wrap"
+                            className="fade-in flex flex-col gap-3 leading-normal wrap-break-word whitespace-pre-wrap"
                             remarkPlugins={[remarkGfm, remarkMath]}
                             rehypePlugins={[rehypeKatex]}
                             components={{
@@ -462,7 +462,7 @@ const ConversationBubble = forwardRef<
                                     </SyntaxHighlighter>
                                   </div>
                                 ) : (
-                                  <code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal whitespace-pre-line">
+                                  <code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
                                     {children}
                                   </code>
                                 );
@@ -651,7 +651,7 @@ function AllSources(sources: AllSourcesProps) {
           return (
             <div
               key={index}
-              className={`group/card bg-gray-1000 relative w-full rounded-[20px] p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
+              className={`group/card bg-gray-1000 relative w-full rounded-4xl p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
                 isExternalSource ? 'cursor-pointer' : ''
               }`}
               onClick={() =>
@@ -660,7 +660,7 @@ function AllSources(sources: AllSourcesProps) {
             >
               <p
                 title={source.title}
-                className={`ellipsis-text text-left text-sm font-semibold break-words ${
+                className={`ellipsis-text text-left text-sm font-semibold wrap-break-word ${
                   isExternalSource
                     ? 'group-hover/card:text-purple-30 dark:group-hover/card:text-[#8C67D7]'
                     : ''
@@ -679,7 +679,7 @@ function AllSources(sources: AllSourcesProps) {
                   />
                 )}
               </p>
-              <p className="dark:text-chinese-silver mt-3 line-clamp-4 rounded-md text-left text-xs break-words text-black">
+              <p className="dark:text-chinese-silver mt-3 line-clamp-4 rounded-md text-left text-xs wrap-break-word text-black">
                 {source.text}
               </p>
             </div>
@@ -725,12 +725,12 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
               <Accordion
                 key={`tool-call-${index}`}
                 title={`${toolCall.tool_name}  -  ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
-                className="bg-gray-1000 dark:bg-gun-metal w-full rounded-[20px] hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
+                className="bg-gray-1000 dark:bg-gun-metal w-full rounded-4xl hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
                 titleClassName="px-6 py-2 text-sm font-semibold"
               >
                 <div className="flex flex-col gap-1">
                   <div className="border-silver dark:border-silver/20 flex flex-col rounded-2xl border">
-                    <p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold break-words">
+                    <p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold wrap-break-word">
                       <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
                         Arguments
                       </span>{' '}
@@ -738,7 +738,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         textToCopy={JSON.stringify(toolCall.arguments, null, 2)}
                       />
                     </p>
-                    <p className="dark:tex dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
+                    <p className="dark:tex dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
                       <span
                         className="leading-[23px] text-black dark:text-gray-400"
                         style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -748,7 +748,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                     </p>
                   </div>
                   <div className="border-silver dark:border-silver/20 flex flex-col rounded-2xl border">
-                    <p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold break-words">
+                    <p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold wrap-break-word">
                       <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
                         Response
                       </span>{' '}
@@ -766,7 +766,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                       </span>
                     )}
                     {toolCall.status === 'completed' && (
-                      <p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
+                      <p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
                         <span
                           className="leading-[23px] text-black dark:text-gray-400"
                           style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -776,7 +776,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                       </p>
                     )}
                     {toolCall.status === 'error' && (
-                      <p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
+                      <p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
                         <span
                           className="leading-[23px] text-red-500 dark:text-red-400"
                           style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -838,7 +838,7 @@ function Thought({
         <div className="fade-in mr-5 ml-2 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
           <div className="bg-gray-1000 dark:bg-gun-metal rounded-[28px] px-7 py-[18px]">
             <ReactMarkdown
-              className="fade-in leading-normal break-words whitespace-pre-wrap"
+              className="fade-in leading-normal wrap-break-word whitespace-pre-wrap"
               remarkPlugins={[remarkGfm, remarkMath]}
               rehypePlugins={[rehypeKatex]}
               components={{
@@ -873,7 +873,7 @@ function Thought({
                       </SyntaxHighlighter>
                     </div>
                   ) : (
-                    <code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal whitespace-pre-line">
+                    <code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
                       {children}
                     </code>
                   );

frontend/src/index.css

@@ -3,6 +3,8 @@ layer(base);
 
 @import 'tailwindcss';
 
+@import "tw-animate-css";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {
@@ -713,3 +715,138 @@ Avoid over-scrolling in mobile browsers
     }
   }
 }
+
+/*
+  ---break---
+*/
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/*
+  ---break---
+*/
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/*
+  ---break---
+*/
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/*
+  ---break---
+*/
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/src/modals/AddActionModal.tsx

@@ -38,10 +38,7 @@ export default function AddActionModal({
 
   if (modalState !== 'ACTIVE') return null;
   return (
-    <WrapperModal
-      close={() => setModalState('INACTIVE')}
-      className="sm:w-[512px]"
-    >
+    <WrapperModal close={() => setModalState('INACTIVE')} className="sm:w-lg">
       <div>
         <h2 className="text-jet dark:text-bright-gray px-3 text-xl font-semibold">
           {t('modals.addAction.title')}

frontend/src/modals/MoveToFolderModal.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { AgentFolder } from '../agents/types';
 import userService from '../api/services/userService';
-import FolderIcon from '../assets/folder.svg';
 import ChevronRight from '../assets/chevron-right.svg';
+import FolderIcon from '../assets/folder.svg';
 import { ActiveState } from '../models/misc';
 import { selectToken, setAgentFolders } from '../preferences/preferenceSlice';
-import { AgentFolder } from '../agents/types';
 import WrapperModal from './WrapperModal';
 
 type MoveToFolderModalProps = {
@@ -135,7 +135,7 @@ export default function MoveToFolderModal({
   if (modalState !== 'ACTIVE') return null;
 
   return (
-    <WrapperModal close={() => setModalState('INACTIVE')} className="!p-0">
+    <WrapperModal close={() => setModalState('INACTIVE')} className="p-0!">
       <div className="w-[800px] max-w-[90vw]">
         <div className="px-6 pt-4">
           <h2
@@ -147,7 +147,7 @@ export default function MoveToFolderModal({
               letterSpacing: '0.15px',
             }}
           >
-            {t('agents.folders.move')} "{agentName}" to
+            {t('agents.folders.move')} &quot;{agentName}&quot; to
           </h2>
         </div>
         <div

frontend/src/store.ts

@@ -1,6 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import agentPreviewReducer from './agents/agentPreviewSlice';
+import workflowPreviewReducer from './agents/workflow/workflowPreviewSlice';
 import { conversationSlice } from './conversation/conversationSlice';
 import { sharedConversationSlice } from './conversation/sharedConversationSlice';
 import { getStoredRecentDocs } from './preferences/preferenceApi';
@@ -65,6 +66,7 @@ const store = configureStore({
     sharedConversation: sharedConversationSlice.reducer,
     upload: uploadReducer,
     agentPreview: agentPreviewReducer,
+    workflowPreview: workflowPreviewReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(prefListenerMiddleware.middleware),

frontend/tsconfig.json

@@ -15,7 +15,11 @@
     "types": ["vite-plugin-svgr/client"],
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

frontend/vite.config.ts

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), svgr()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 });