diff --git a/pydatalab/src/pydatalab/routes/v0_1/__init__.py b/pydatalab/src/pydatalab/routes/v0_1/__init__.py
index 93b3a22db..71e0a0366 100644
--- a/pydatalab/src/pydatalab/routes/v0_1/__init__.py
+++ b/pydatalab/src/pydatalab/routes/v0_1/__init__.py
@@ -12,6 +12,7 @@
 from .healthcheck import HEALTHCHECK
 from .info import INFO
 from .items import ITEMS
+from .query import QUERY
 from .remotes import REMOTES
 from .users import USERS
 
@@ -29,6 +30,7 @@
     INFO,
     GRAPHS,
     EXPORT,
+    QUERY,
 )
 
 __all__ = ("BLUEPRINTS", "OAUTH", "__api_version__", "OAUTH_PROXIES")
diff --git a/pydatalab/src/pydatalab/routes/v0_1/query.py b/pydatalab/src/pydatalab/routes/v0_1/query.py
new file mode 100644
index 000000000..c053a2634
--- /dev/null
+++ b/pydatalab/src/pydatalab/routes/v0_1/query.py
@@ -0,0 +1,651 @@
+import base64
+import re
+import uuid
+from datetime import datetime, timezone
+from typing import Any
+
+from bson import ObjectId
+from flask import Blueprint, jsonify, request
+
+from pydatalab.models import ITEM_MODELS
+from pydatalab.mongo import flask_mongo
+from pydatalab.permissions import active_users_or_get_only, get_default_permissions
+from pydatalab.routes.v0_1.items import collections_lookup, creators_lookup, groups_lookup
+
+QUERY = Blueprint("query", __name__)
+
+
+@QUERY.before_request
+@active_users_or_get_only
+def _(): ...
+
+
+LIST_VIEWS: dict[str, dict] = {
+    "samples": {"types": ["samples", "cells"]},
+    "starting_materials": {"types": ["starting_materials"]},
+    "equipment": {"types": ["equipment"]},
+}
+
+_SKIP_FIELDS: set[str] = {
+    "type",
+    "immutable_id",
+    "last_modified",
+    "creator_ids",
+    "group_ids",
+    "blocks_obj",
+    "display_order",
+    "file_ObjectIds",
+    "revision",
+    "revisions",
+    "version",
+    "relationships",
+    "files",
+    "collections",
+    "creators",
+    "groups",
+    "synthesis_constituents",
+    "positive_electrode",
+    "negative_electrode",
+    "electrolyte",
+}
+
+_FIELD_UI: dict[str, dict] = {
+    "name": {"label": "Name", "group": "Basic", "sortable": True},
+    "item_id": {"label": "Item ID", "group": "Basic", "sortable": True},
+    "refcode": {"label": "Refcode", "group": "Basic", "sortable": True},
+    "description": {"label": "Description", "group": "Basic", "sortable": False},
+    "date": {"label": "Date", "group": "Basic", "sortable": True},
+    "status": {"label": "Status", "group": "Basic", "sortable": True},
+    "chemform": {
+        "label": "Formula",
+        "group": "Chemistry",
+        "sortable": True,
+        "editor_override": {"eq": "chemical-formula", "contains": "text"},
+    },
+    "characteristic_chemical_formula": {
+        "label": "Active material formula",
+        "group": "Chemistry",
+        "sortable": True,
+        "editor_override": {"eq": "chemical-formula"},
+    },
+    "smiles": {"label": "SMILES", "group": "Chemistry", "sortable": False},
+    "inchi_key": {"label": "InChI key", "group": "Chemistry", "sortable": False},
+    "inchi": {"label": "InChI", "group": "Chemistry", "sortable": False},
+    "GHS_codes": {"label": "GHS hazard codes", "group": "Chemistry", "sortable": False},
+    "CAS": {"label": "CAS number", "group": "Chemistry", "sortable": False},
+    "molar_mass": {"label": "Molar mass (g/mol)", "group": "Chemistry", "sortable": True},
+    "characteristic_mass": {
+        "label": "Characteristic mass (mg)",
+        "group": "Chemistry",
+        "sortable": True,
+    },
+    "characteristic_molar_mass": {
+        "label": "Characteristic molar mass",
+        "group": "Chemistry",
+        "sortable": True,
+    },
+    "cell_format": {"label": "Cell format", "group": "Cell", "sortable": True},
+    "cell_format_description": {
+        "label": "Cell format description",
+        "group": "Cell",
+        "sortable": False,
+    },
+    "cell_preparation_description": {
+        "label": "Cell preparation",
+        "group": "Cell",
+        "sortable": False,
+    },
+    "supplier": {"label": "Supplier", "group": "Provenance", "sortable": True},
+    "location": {"label": "Location", "group": "Provenance", "sortable": True},
+    "manufacturer": {"label": "Manufacturer", "group": "Provenance", "sortable": True},
+    "serial_numbers": {"label": "Serial numbers", "group": "Provenance", "sortable": False},
+    "contact": {"label": "Contact", "group": "Provenance", "sortable": False},
+    "barcode": {"label": "Barcode", "group": "Provenance", "sortable": False},
+    "chemical_purity": {"label": "Chemical purity", "group": "Chemistry", "sortable": False},
+    "synthesis_description": {
+        "label": "Synthesis description",
+        "group": "Synthesis",
+        "sortable": False,
+    },
+    "date_opened": {"label": "Date opened", "group": "Provenance", "sortable": True},
+}
+
+OPERATORS: dict[str, dict] = {
+    "contains": {
+        "label": "contains",
+        "value_required": True,
+        "editor": "text",
+        "compile": lambda p, v: {p: {"$regex": re.escape(str(v)), "$options": "i"}},
+    },
+    "eq": {
+        "label": "equals",
+        "value_required": True,
+        "editor": "text",
+        "compile": lambda p, v: {p: v},
+    },
+    "is_set": {
+        "label": "is set",
+        "value_required": False,
+        "compile": lambda p, v: {p: {"$exists": True, "$nin": [None, ""]}},
+    },
+    "is_not_set": {
+        "label": "is not set",
+        "value_required": False,
+        "compile": lambda p, v: {"$or": [{p: {"$exists": False}}, {p: None}, {p: ""}]},
+    },
+    "in": {
+        "label": "is one of",
+        "value_required": True,
+        "editor": "string-list",
+        "compile": lambda p, v: {p: {"$in": list(v) if not isinstance(v, list) else v}},
+    },
+    "gt": {
+        "label": "greater than",
+        "value_required": True,
+        "editor": "number",
+        "compile": lambda p, v: {p: {"$gt": v}},
+    },
+    "lt": {
+        "label": "less than",
+        "value_required": True,
+        "editor": "number",
+        "compile": lambda p, v: {p: {"$lt": v}},
+    },
+    "before": {
+        "label": "before",
+        "value_required": True,
+        "editor": "datetime",
+        "compile": lambda p, v: {p: {"$lt": _parse_dt(v)}},
+    },
+    "after": {
+        "label": "after",
+        "value_required": True,
+        "editor": "datetime",
+        "compile": lambda p, v: {p: {"$gt": _parse_dt(v)}},
+    },
+    "date_range": {
+        "label": "in range",
+        "value_required": True,
+        "editor": "datetime-range",
+        "compile": lambda p, v: _compile_date_range(p, v),
+    },
+}
+
+
+def _parse_dt(s: str) -> datetime:
+    s = str(s).rstrip("Z")
+    for fmt in ("%Y-%m-%dT%H:%M:%S", "%Y-%m-%dT%H:%M", "%Y-%m-%d"):
+        try:
+            return datetime.strptime(s, fmt).replace(tzinfo=timezone.utc)
+        except ValueError:
+            continue
+    raise ValueError(f"Cannot parse datetime: {s!r}")
+
+
+def _compile_date_range(path: str, value: Any) -> dict:
+    if not isinstance(value, (list, tuple)) or len(value) != 2:
+        raise ValueError("date_range requires [start, end]")
+    return {path: {"$gte": _parse_dt(value[0]), "$lte": _parse_dt(value[1])}}
+
+
+def _resolve_ref(ref: str, definitions: dict) -> dict:
+    name = ref.split("/")[-1]
+    return definitions.get(name, {})
+
+
+def _field_to_operators(
+    field_def: dict, definitions: dict, field_name: str
+) -> tuple[list[str], dict, dict]:
+    """Returns (operator_ids, editor_override_per_op, value_schema_override_per_op)."""
+    fmt = field_def.get("format", "")
+    ftype = field_def.get("type", "")
+
+    ref = ""
+    for candidate in (field_def, *field_def.get("allOf", []), *field_def.get("anyOf", [])):
+        ref = candidate.get("$ref", "")
+        if ref:
+            break
+
+    if ref:
+        resolved = _resolve_ref(ref, definitions)
+        enum_values = resolved.get("enum")
+        if enum_values:
+            vs = {"enum": enum_values}
+            vs_array = {"type": "array", "items": vs}
+            ui = _FIELD_UI.get(field_name, {})
+            eo = ui.get("editor_override", {"in": "enum", "eq": "enum"})
+            if "in" not in eo:
+                eo["in"] = "enum"
+            if "eq" not in eo:
+                eo["eq"] = "enum"
+            return ["in", "eq", "is_set"], eo, {"in": vs_array, "eq": vs}
+
+    if fmt == "date-time" or (ftype == "string" and "date" in field_name):
+        eo = {"date_range": "datetime-range", "before": "datetime", "after": "datetime"}
+        return ["date_range", "before", "after", "is_set"], eo, {}
+
+    if ftype in ("number", "integer"):
+        return ["gt", "lt", "eq", "is_set"], {}, {}
+
+    if ftype == "string":
+        ui = _FIELD_UI.get(field_name, {})
+        eo = dict(ui.get("editor_override", {}))
+        return ["contains", "eq", "is_set", "is_not_set"], eo, {}
+
+    return [], {}, {}
+
+
+def _build_field_registry(type_id: str) -> dict[str, dict]:
+    model = ITEM_MODELS[type_id]
+    schema = model.schema(by_alias=False)
+    definitions = schema.get("definitions", {})
+    properties = schema.get("properties", {})
+
+    registry: dict[str, dict] = {}
+    for field_name, field_def in properties.items():
+        if field_name in _SKIP_FIELDS:
+            continue
+
+        operator_ids, editor_override, value_schema_override = _field_to_operators(
+            field_def, definitions, field_name
+        )
+        if not operator_ids:
+            continue
+
+        ui = _FIELD_UI.get(field_name, {})
+        label = ui.get("label") or field_name.replace("_", " ").title()
+        group = ui.get("group", "Other")
+        sortable = ui.get("sortable", field_def.get("type") in ("string", "number", "integer"))
+
+        registry[field_name] = {
+            "mongo_path": field_name,
+            "label": label,
+            "group": group,
+            "sortable": sortable,
+            "operator_ids": operator_ids,
+            "editor_override": editor_override,
+            "value_schema_override": value_schema_override,
+        }
+
+    return registry
+
+
+def _get_field_registry(selected_types: list[str]) -> dict[str, dict]:
+    registries = [_build_field_registry(t) for t in selected_types]
+    common_ids = set(registries[0].keys())
+    for r in registries[1:]:
+        common_ids &= set(r.keys())
+    return {fid: registries[0][fid] for fid in common_ids}
+
+
+def _compile_rule(rule: dict, field_registry: dict) -> dict:
+    field_id = rule.get("field")
+    op_id = rule.get("operator")
+    value = rule.get("value")
+
+    field_def = field_registry.get(field_id)
+    if not field_def:
+        raise ValueError(f"Unknown field: {field_id!r}")
+    if op_id not in field_def["operator_ids"]:
+        raise ValueError(f"Operator {op_id!r} not valid for field {field_id!r}")
+
+    op_def = OPERATORS.get(op_id or "")
+    if not op_def:
+        raise ValueError(f"Unknown operator: {op_id!r}")
+    if op_def["value_required"] and value is None:
+        raise ValueError(f"Operator {op_id!r} on field {field_id!r} requires a value")
+
+    try:
+        return op_def["compile"](field_def["mongo_path"], value)
+    except Exception as exc:
+        raise ValueError(f"Invalid value for {field_id!r}/{op_id!r}: {exc}") from exc
+
+
+def _compile_node(node: dict, field_registry: dict, depth: int = 0) -> dict:
+    if depth > 5:
+        raise ValueError("Query too deeply nested (max depth 5)")
+    kind = node.get("kind")
+    if kind == "rule":
+        return _compile_rule(node, field_registry)
+    if kind == "group":
+        children = [_compile_node(c, field_registry, depth + 1) for c in node.get("children", [])]
+        children = [c for c in children if c]
+        if not children:
+            return {}
+        if len(children) == 1:
+            return children[0]
+        return {"$and" if node.get("combinator", "and") == "and" else "$or": children}
+    raise ValueError(f"Unknown node kind: {kind!r}")
+
+
+def _encode_cursor(oid: ObjectId) -> str:
+    return base64.urlsafe_b64encode(str(oid).encode()).decode()
+
+
+def _decode_cursor(s: str) -> ObjectId:
+    return ObjectId(base64.urlsafe_b64decode(s.encode()).decode())
+
+
+def _error(status: int, code: str, message: str, details: list | None = None):
+    return jsonify(
+        {
+            "error": {
+                "code": code,
+                "message": message,
+                "details": details or [],
+                "request_id": str(uuid.uuid4())[:8],
+            }
+        }
+    ), status
+
+
+_SUMMARY_PROJECT = {
+    "_id": 0,
+    "item_id": 1,
+    "name": 1,
+    "chemform": 1,
+    "type": 1,
+    "date": 1,
+    "refcode": 1,
+    "status": 1,
+    "characteristic_chemical_formula": 1,
+    "nblocks": {"$size": "$display_order"},
+    "nfiles": {"$size": "$file_ObjectIds"},
+    "blocks": {
+        "$map": {
+            "input": {"$objectToArray": {"$ifNull": ["$blocks_obj", {}]}},
+            "as": "b",
+            "in": {"blocktype": "$$b.v.blocktype", "title": "$$b.v.title"},
+        }
+    },
+    "creators": {"display_name": 1, "gravatar_hash": 1},
+    "groups": {"display_name": 1, "group_id": 1},
+    "collections": {"collection_id": 1, "title": 1},
+}
+
+
+@QUERY.route("/item-types", methods=["GET"])
+def get_item_types():
+    list_view = request.args.get("list_view")
+    if not list_view:
+        return _error(400, "MISSING_PARAM", "list_view is required")
+    view = LIST_VIEWS.get(list_view)
+    if not view:
+        return _error(404, "NOT_FOUND", f"Unknown list_view: {list_view!r}")
+
+    from pydatalab.models import ITEM_MODELS as _IM
+
+    result = []
+    for type_id in view["types"]:
+        model = _IM.get(type_id)
+        schema = model.schema(by_alias=False) if model else {}
+        label = schema.get("title", type_id.replace("_", " ").title())
+        description = schema.get("description") or ""
+        mro_names = [c.__name__ for c in model.__mro__] if model else []
+        parent_type = None
+        for t, m in _IM.items():
+            if t != type_id and m.__name__ in mro_names[1:]:
+                parent_type = t
+                break
+
+        result.append(
+            {
+                "id": type_id,
+                "label": label,
+                "description": description,
+                "parent_type": parent_type,
+                "queryable": True,
+            }
+        )
+
+    return jsonify({"list_view": list_view, "item_types": result})
+
+
+@QUERY.route("/item-query-schema", methods=["GET"])
+def get_query_schema():
+    list_view = request.args.get("list_view")
+    if not list_view:
+        return _error(400, "MISSING_PARAM", "list_view is required")
+    view = LIST_VIEWS.get(list_view)
+    if not view:
+        return _error(404, "NOT_FOUND", f"Unknown list_view: {list_view!r}")
+
+    selected_types = request.args.getlist("item_type") or [view["types"][0]]
+    for t in selected_types:
+        if t not in ITEM_MODELS:
+            return _error(404, "NOT_FOUND", f"Unknown item type: {t!r}")
+        if t not in view["types"]:
+            return _error(422, "INVALID_TYPE", f"Type {t!r} is not in list_view {list_view!r}")
+
+    field_registry = _get_field_registry(selected_types)
+
+    fields = []
+    _group_order = {
+        "Basic": 0,
+        "Chemistry": 1,
+        "Cell": 2,
+        "Synthesis": 3,
+        "Provenance": 4,
+        "Other": 9,
+    }
+    for field_id, fdef in sorted(
+        field_registry.items(), key=lambda x: (_group_order.get(x[1]["group"], 9), x[0])
+    ):
+        eo = fdef.get("editor_override", {})
+        vs_override = fdef.get("value_schema_override", {})
+        operators = []
+        for op_id in fdef["operator_ids"]:
+            op_def = OPERATORS[op_id]
+            entry: dict = {
+                "id": op_id,
+                "label": op_def["label"],
+                "value_required": op_def["value_required"],
+            }
+            if op_def.get("editor") or op_id in eo:
+                entry["editor"] = eo.get(op_id, op_def.get("editor", "text"))
+            if op_id in vs_override:
+                entry["value_schema"] = vs_override[op_id]
+            operators.append(entry)
+        fields.append(
+            {
+                "id": field_id,
+                "label": fdef["label"],
+                "group": fdef["group"],
+                "sortable": fdef["sortable"],
+                "operators": operators,
+            }
+        )
+
+    common_type_id = selected_types[0]
+    model = ITEM_MODELS[common_type_id]
+    common_label = model.schema(by_alias=False).get("title", common_type_id)
+
+    return jsonify(
+        {
+            "version": "1.0",
+            "list_view": list_view,
+            "selected_item_types": [
+                {"id": t, "label": ITEM_MODELS[t].schema(by_alias=False).get("title", t)}
+                for t in selected_types
+            ],
+            "common_type": {"id": common_type_id, "label": common_label},
+            "capabilities": {
+                "combinators": ["and", "or"],
+                "allow_negation": False,
+                "max_depth": 5,
+                "max_rules": 50,
+                "max_in_values": 100,
+            },
+            "fields": fields,
+        }
+    )
+
+
+@QUERY.route("/item-query", methods=["POST"])
+def run_query():
+    body = request.get_json(silent=True)
+    if not body:
+        return _error(400, "MALFORMED_REQUEST", "Request body must be JSON")
+
+    list_view = body.get("list_view")
+    if not list_view or list_view not in LIST_VIEWS:
+        return _error(400, "MISSING_PARAM", "list_view is required")
+
+    view = LIST_VIEWS[list_view]
+    item_types = body.get("item_types")
+    if not item_types or not isinstance(item_types, list):
+        return _error(400, "MISSING_PARAM", "item_types must be a non-empty array")
+
+    for t in item_types:
+        if t not in ITEM_MODELS:
+            return _error(404, "NOT_FOUND", f"Unknown item type: {t!r}")
+        if t not in view["types"]:
+            return _error(422, "INVALID_TYPE", f"Type {t!r} is not in list_view {list_view!r}")
+
+    field_registry = _get_field_registry(item_types)
+    where = body.get("where", {"kind": "group", "combinator": "and", "children": []})
+
+    try:
+        compiled_filter = _compile_node(where, field_registry)
+    except ValueError as exc:
+        return _error(422, "INVALID_QUERY", str(exc))
+
+    page_opts = body.get("page") or {}
+    limit = min(int(page_opts.get("limit", 50)), 200)
+    cursor = page_opts.get("cursor")
+
+    match: dict = {"type": {"$in": item_types}}
+    match.update(get_default_permissions(user_only=False, inherit_from_collections=False))
+    if compiled_filter:
+        match = {"$and": [match, compiled_filter]}
+
+    if cursor:
+        try:
+            cursor_clause = {"_id": {"$gt": _decode_cursor(cursor)}}
+            match = (
+                {"$and": [match, cursor_clause]}
+                if "$and" not in match
+                else {**match, "$and": match["$and"] + [cursor_clause]}
+            )
+        except Exception:
+            return _error(400, "INVALID_CURSOR", "Cursor is invalid")
+
+    sort_spec = body.get("sort") or [{"field": "date", "direction": "desc"}]
+    mongo_sort: list[tuple] = []
+    for s in sort_spec:
+        f = s.get("field")
+        direction = -1 if s.get("direction", "desc") == "desc" else 1
+        if (
+            f
+            and f in field_registry
+            and field_registry[f].get("mongo_path")
+            and field_registry[f]["sortable"]
+        ):
+            mongo_sort.append((field_registry[f]["mongo_path"], direction))
+    mongo_sort = mongo_sort or [("date", -1)]
+    mongo_sort.append(("_id", 1))
+
+    pipeline = [
+        {"$match": match},
+        {"$sort": dict(mongo_sort)},
+        {"$limit": limit + 1},
+        {"$lookup": creators_lookup()},
+        {"$lookup": groups_lookup()},
+        {"$lookup": collections_lookup()},
+        {"$project": _SUMMARY_PROJECT},
+    ]
+
+    raw = list(flask_mongo.db.items.aggregate(pipeline))
+    has_more = len(raw) > limit
+    items = raw[:limit]
+
+    next_cursor = None
+    if has_more and items:
+        last_doc = list(
+            flask_mongo.db.items.find({"refcode": items[-1]["refcode"]}, {"_id": 1}).limit(1)
+        )
+        if last_doc:
+            next_cursor = _encode_cursor(last_doc[0]["_id"])
+
+    common_type_id = item_types[0]
+    return jsonify(
+        {
+            "query": {
+                "common_type": {
+                    "id": common_type_id,
+                    "label": ITEM_MODELS[common_type_id]
+                    .schema(by_alias=False)
+                    .get("title", common_type_id),
+                },
+                "selected_item_types": item_types,
+            },
+            "items": items,
+            "page": {"limit": limit, "next_cursor": next_cursor, "has_more": has_more},
+        }
+    )
+
+
+@QUERY.route("/query-options/<source_id>", methods=["GET"])
+def get_query_options(source_id: str):
+    if source_id != "datalab:item-reference":
+        return _error(404, "NOT_FOUND", f"Unknown options source: {source_id!r}")
+
+    q = request.args.get("q", "").strip()
+    limit = min(int(request.args.get("limit", 20)), 100)
+    item_types = request.args.getlist("item_type") or list(ITEM_MODELS.keys())
+
+    match: dict = {"type": {"$in": item_types}}
+    match.update(get_default_permissions(user_only=False, inherit_from_collections=False))
+    if q:
+        escaped = re.escape(q)
+        match["$or"] = [
+            {"name": {"$regex": escaped, "$options": "i"}},
+            {"item_id": {"$regex": escaped, "$options": "i"}},
+            {"refcode": {"$regex": escaped, "$options": "i"}},
+        ]
+
+    cursor_str = request.args.get("cursor")
+    if cursor_str:
+        try:
+            match["_id"] = {"$gt": _decode_cursor(cursor_str)}
+        except Exception:
+            return _error(400, "INVALID_CURSOR", "Cursor is invalid")
+
+    docs = list(
+        flask_mongo.db.items.find(
+            match, {"_id": 1, "item_id": 1, "name": 1, "refcode": 1, "type": 1, "chemform": 1}
+        )
+        .sort("_id", 1)
+        .limit(limit + 1)
+    )
+
+    has_more = len(docs) > limit
+    docs = docs[:limit]
+
+    options = [
+        {
+            "value": d.get("refcode") or d["item_id"],
+            "label": f"{d.get('name') or d['item_id']} — {d.get('refcode') or d['item_id']}",
+            "metadata": {
+                "item_id": d["item_id"],
+                "refcode": d.get("refcode"),
+                "name": d.get("name"),
+                "chemform": d.get("chemform"),
+                "type": {
+                    "id": d["type"],
+                    "label": ITEM_MODELS.get(d["type"], type("", (), {"schema": lambda **_: {}})())
+                    .schema(by_alias=False)
+                    .get("title", d["type"]),
+                },
+            },
+        }
+        for d in docs
+    ]
+
+    return jsonify(
+        {
+            "options": options,
+            "next_cursor": _encode_cursor(docs[-1]["_id"]) if has_more and docs else None,
+            "has_more": has_more,
+        }
+    )
diff --git a/webapp/src/components/AdvancedQueryBuilder.vue b/webapp/src/components/AdvancedQueryBuilder.vue
new file mode 100644
index 000000000..95a26ad7b
--- /dev/null
+++ b/webapp/src/components/AdvancedQueryBuilder.vue
@@ -0,0 +1,467 @@
+<template>
+  <div ref="root" class="adv-search">
+    <button
+      class="adv-trigger"
+      :class="{ 'adv-trigger--active': appliedSummary }"
+      @click="isOpen = true"
+    >
+      <font-awesome-icon icon="filter" class="adv-trigger__icon" />
+      <span class="adv-trigger__label" :title="appliedSummary || ''">
+        {{ appliedSummary || "Advanced Search" }}
+      </span>
+      <font-awesome-icon icon="chevron-down" class="adv-trigger__chevron" />
+    </button>
+
+    <Teleport to="body">
+      <Transition name="adv-modal">
+        <div v-if="isOpen" class="adv-overlay" @click.self="isOpen = false">
+          <div class="adv-modal" role="dialog">
+            <div class="adv-modal__header">
+              <span class="adv-modal__title">Advanced Search</span>
+              <button class="adv-modal__close" aria-label="Close" @click="isOpen = false">
+                <font-awesome-icon icon="times" />
+              </button>
+            </div>
+
+            <div class="adv-modal__body">
+              <div v-if="typesLoading" class="adv-state text-muted">Loading…</div>
+              <div v-else-if="typesError" class="adv-state text-danger">{{ typesError }}</div>
+
+              <div v-else class="adv-type-row">
+                <span class="adv-section-label">Item type</span>
+                <div class="d-flex gap-3">
+                  <div v-for="t in queryableTypes" :key="t.id" class="form-check mb-0">
+                    <input
+                      :id="`adv-qt-${t.id}`"
+                      v-model="selectedType"
+                      type="radio"
+                      :value="t.id"
+                      class="form-check-input"
+                      @change="onTypeChange(t.id)"
+                    />
+                    <label :for="`adv-qt-${t.id}`" class="form-check-label">{{ t.label }}</label>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="pendingTypeChange" class="alert alert-warning py-2 px-3 small mb-0 mt-3">
+                {{ stalRulesCount }} condition(s) will be cleared when switching type.
+                <div class="mt-1 d-flex gap-2">
+                  <button class="btn btn-sm btn-warning" @click="confirmTypeChange">Confirm</button>
+                  <button class="btn btn-sm btn-outline-secondary" @click="cancelTypeChange">
+                    Cancel
+                  </button>
+                </div>
+              </div>
+
+              <div v-if="schemaLoading" class="adv-state text-muted mt-3">Loading fields…</div>
+              <div v-else-if="schemaError" class="adv-state text-danger mt-3">
+                {{ schemaError }}
+              </div>
+
+              <template v-else-if="schema">
+                <div class="adv-rules-area">
+                  <div v-if="rootGroup.children.length" class="adv-rules-header">
+                    <span>Field</span>
+                    <span>Operator</span>
+                    <span>Value</span>
+                    <span></span>
+                  </div>
+
+                  <QueryGroup
+                    :node="rootGroup"
+                    :fields="schema.fields"
+                    :max-depth="schema.capabilities.max_depth"
+                    :current-depth="0"
+                    @update:node="rootGroup = $event"
+                  />
+                </div>
+              </template>
+            </div>
+
+            <div class="adv-modal__footer">
+              <span v-if="queryError" class="text-danger small me-auto">{{ queryError }}</span>
+              <button class="btn btn-sm btn-ghost" @click="closeAndReset">Cancel</button>
+              <button
+                class="btn btn-sm btn-primary px-4"
+                :disabled="queryLoading"
+                @click="submitQuery"
+              >
+                <font-awesome-icon v-if="queryLoading" icon="sync" spin class="me-1" />
+                <span v-else>Search</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { fetchItemTypes, fetchQuerySchema, runItemQuery } from "@/server_fetch_utils.js";
+import QueryGroup from "@/components/QueryGroup.vue";
+
+export default {
+  name: "AdvancedQueryBuilder",
+  components: { QueryGroup },
+  props: {
+    listView: { type: String, default: "samples" },
+  },
+  emits: ["query-results"],
+  data() {
+    return {
+      isOpen: false,
+      itemTypes: [],
+      typesLoading: false,
+      typesError: null,
+      selectedType: null,
+      pendingTypeChange: null,
+      stalRulesCount: 0,
+      schema: null,
+      schemaLoading: false,
+      schemaError: null,
+      rootGroup: this.emptyGroup(),
+      queryLoading: false,
+      queryError: null,
+      appliedSummary: null,
+    };
+  },
+  computed: {
+    queryableTypes() {
+      return this.itemTypes.filter((t) => t.queryable);
+    },
+  },
+  async mounted() {
+    this.typesLoading = true;
+    try {
+      const result = await fetchItemTypes(this.listView);
+      this.itemTypes = result.item_types || [];
+      if (this.itemTypes.length) {
+        this.selectedType = this.itemTypes[0].id;
+        await this.loadSchema(this.selectedType);
+      }
+    } catch (e) {
+      this.typesError = e.message;
+    } finally {
+      this.typesLoading = false;
+    }
+  },
+  methods: {
+    emptyGroup() {
+      return { kind: "group", combinator: "and", children: [] };
+    },
+    async loadSchema(typeId) {
+      this.schemaLoading = true;
+      this.schemaError = null;
+      try {
+        this.schema = await fetchQuerySchema(this.listView, [typeId]);
+      } catch (e) {
+        this.schemaError = e.message;
+      } finally {
+        this.schemaLoading = false;
+      }
+    },
+    countStaleRules(node, validFieldIds) {
+      if (node.kind === "rule") return validFieldIds.includes(node.field) ? 0 : 1;
+      return (node.children || []).reduce(
+        (sum, child) => sum + this.countStaleRules(child, validFieldIds),
+        0,
+      );
+    },
+    async onTypeChange(newTypeId) {
+      if (!this.schema || !this.rootGroup.children.length) {
+        this.selectedType = newTypeId;
+        await this.loadSchema(newTypeId);
+        return;
+      }
+      const newSchema = await fetchQuerySchema(this.listView, [newTypeId]).catch(() => null);
+      const newFieldIds = newSchema ? newSchema.fields.map((f) => f.id) : [];
+      const stale = this.countStaleRules(this.rootGroup, newFieldIds);
+      if (stale === 0) {
+        this.selectedType = newTypeId;
+        this.schema = newSchema;
+        return;
+      }
+      this.stalRulesCount = stale;
+      this.pendingTypeChange = { typeId: newTypeId, schema: newSchema };
+    },
+    confirmTypeChange() {
+      const { typeId, schema } = this.pendingTypeChange;
+      this.selectedType = typeId;
+      this.schema = schema;
+      this.rootGroup = this.emptyGroup();
+      this.pendingTypeChange = null;
+    },
+    cancelTypeChange() {
+      this.pendingTypeChange = null;
+    },
+    stripInternalProps(node) {
+      if (node.kind === "rule") {
+        const { field, operator, value } = node;
+        return value !== undefined
+          ? { kind: "rule", field, operator, value }
+          : { kind: "rule", field, operator };
+      }
+      return {
+        kind: "group",
+        combinator: node.combinator,
+        children: (node.children || []).map((c) => this.stripInternalProps(c)),
+      };
+    },
+    buildSummary(node) {
+      if (!this.schema) return null;
+      if (node.kind === "rule") {
+        if (!node.field || !node.operator) return null;
+        const field = this.schema.fields.find((f) => f.id === node.field);
+        const op = field?.operators.find((o) => o.id === node.operator);
+        const fieldLabel = field?.label || node.field;
+        const opLabel = op?.label || node.operator;
+        if (!op?.value_required) return `${fieldLabel} ${opLabel}`;
+        const val = Array.isArray(node.value) ? node.value.filter(Boolean).join(", ") : node.value;
+        return val ? `${fieldLabel} ${opLabel} "${val}"` : `${fieldLabel} ${opLabel}`;
+      }
+      if (node.kind === "group") {
+        const parts = (node.children || []).map((c) => this.buildSummary(c)).filter(Boolean);
+        if (!parts.length) return null;
+        return parts.join(node.combinator === "or" ? " OR " : " AND ");
+      }
+      return null;
+    },
+    async submitQuery() {
+      this.queryLoading = true;
+      this.queryError = null;
+      try {
+        const request = {
+          list_view: this.listView,
+          item_types: [this.selectedType],
+          where: this.stripInternalProps(this.rootGroup),
+        };
+        const result = await runItemQuery(request);
+        this.appliedSummary = this.buildSummary(this.rootGroup);
+        this.$emit("query-results", result.items || []);
+        this.isOpen = false;
+      } catch (e) {
+        this.queryError = e.message;
+      } finally {
+        this.queryLoading = false;
+      }
+    },
+    closeAndReset() {
+      this.isOpen = false;
+    },
+    resetQuery() {
+      this.rootGroup = this.emptyGroup();
+      this.appliedSummary = null;
+      this.queryError = null;
+      this.$emit("query-results", null);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.adv-search {
+  display: inline-block;
+}
+
+.adv-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  color: #495057;
+  cursor: pointer;
+  max-width: 300px;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+.adv-trigger:hover {
+  border-color: #adb5bd;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+.adv-trigger--active {
+  border-color: #6366f1;
+  color: #6366f1;
+  background: #f5f3ff;
+}
+.adv-trigger__icon {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+.adv-trigger__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.adv-trigger__chevron {
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  opacity: 0.4;
+}
+
+.adv-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.adv-modal {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
+  width: 700px;
+  max-width: 95vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.adv-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 24px 14px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.adv-modal__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+.adv-modal__close {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+  font-size: 1rem;
+  line-height: 1;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+.adv-modal__close:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.adv-modal__body {
+  padding: 20px 24px 8px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.adv-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 24px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.adv-type-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 14px;
+  background: #f9fafb;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  margin-bottom: 4px;
+}
+.adv-section-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #9ca3af;
+  white-space: nowrap;
+}
+.adv-state {
+  padding: 6px 0;
+  font-size: 0.875rem;
+}
+
+.adv-rules-area {
+  margin-top: 16px;
+}
+.adv-rules-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 32px;
+  gap: 10px;
+  padding: 0 0 6px 0;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #9ca3af;
+}
+
+.btn-ghost {
+  background: none;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
+  border-radius: 8px;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.btn-ghost:hover {
+  background: #f9fafb;
+}
+
+.btn-primary {
+  background: #6366f1;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 6px 24px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.btn-primary:hover {
+  background: #4f46e5;
+}
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.adv-modal-enter-active,
+.adv-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.adv-modal-enter-active .adv-modal,
+.adv-modal-leave-active .adv-modal {
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+}
+.adv-modal-enter-from,
+.adv-modal-leave-to {
+  opacity: 0;
+}
+.adv-modal-enter-from .adv-modal,
+.adv-modal-leave-to .adv-modal {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index 08c3a4e75..13fb7a3eb 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -9,7 +9,7 @@
       v-model:filters="filters"
       v-model:selection="itemsSelected"
       v-model:select-all="allSelected"
-      :value="data"
+      :value="advancedQueryResults !== null ? advancedQueryResults : data"
       :data-testid="computedDataTestId"
       selection-mode="checkbox"
       paginator
@@ -62,6 +62,7 @@
           @users-data-changed="$emit('users-data-changed')"
           @bulk-invalidate-tokens="handleItemsUpdated"
           @bulk-delete-groups="$emit('groups-data-changed')"
+          @advanced-query-results="handleAdvancedQueryResults"
         />
       </template>
       <template #loading>
@@ -707,6 +708,7 @@ export default {
       addToCollectionModalIsOpen: false,
       batchShareModalIsOpen: false,
       isSampleFetchError: false,
+      advancedQueryResults: null,
       itemsSelected: [],
       allSelected: false,
       filters: {
@@ -1598,6 +1600,9 @@ export default {
         location.reload();
       });
     },
+    handleAdvancedQueryResults(items) {
+      this.advancedQueryResults = items;
+    },
     handleDateFilterModeChange(field) {
       this.filters[field].constraints[0].value = null;
 
diff --git a/webapp/src/components/DynamicDataTableButtons.vue b/webapp/src/components/DynamicDataTableButtons.vue
index d034e15a0..384147d68 100644
--- a/webapp/src/components/DynamicDataTableButtons.vue
+++ b/webapp/src/components/DynamicDataTableButtons.vue
@@ -88,6 +88,12 @@
       <div class="button-bar-spacer"></div>
 
       <div class="search-settings-group">
+        <AdvancedQueryBuilder
+          v-if="dataType === 'samples'"
+          :list-view="'samples'"
+          @query-results="$emit('advanced-query-results', $event)"
+        />
+
         <IconField class="search-field">
           <InputIcon>
             <font-awesome-icon icon="search" />
@@ -300,6 +306,7 @@ import "primeicons/primeicons.css";
 import BulkChangeRoleModal from "@/components/BulkChangeRoleModal.vue";
 import BulkAddToGroupModal from "@/components/BulkAddToGroupModal.vue";
 import BulkChangeManagersModal from "@/components/BulkChangeManagersModal.vue";
+import AdvancedQueryBuilder from "@/components/AdvancedQueryBuilder.vue";
 
 import {
   deleteSample,
@@ -324,6 +331,7 @@ export default {
     BulkChangeRoleModal,
     BulkAddToGroupModal,
     BulkChangeManagersModal,
+    AdvancedQueryBuilder,
   },
   props: {
     dataType: {
@@ -386,6 +394,7 @@ export default {
     "users-data-changed",
     "bulk-invalidate-tokens",
     "bulk-delete-groups",
+    "advanced-query-results",
   ],
   data() {
     return {
diff --git a/webapp/src/components/QueryGroup.vue b/webapp/src/components/QueryGroup.vue
new file mode 100644
index 000000000..b4051ab03
--- /dev/null
+++ b/webapp/src/components/QueryGroup.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="qg" :class="{ 'qg--nested': currentDepth > 0 }">
+    <div v-if="node.children.length > 1" class="qg__combinator">
+      <button
+        class="qg__comb-btn"
+        :class="{ 'qg__comb-btn--active': node.combinator === 'and' }"
+        @click="setCombinator('and')"
+      >
+        AND
+      </button>
+      <button
+        class="qg__comb-btn"
+        :class="{ 'qg__comb-btn--active': node.combinator === 'or' }"
+        @click="setCombinator('or')"
+      >
+        OR
+      </button>
+    </div>
+
+    <div class="qg__rules">
+      <div v-for="(child, index) in node.children" :key="child._uid" class="qg__rule-wrap">
+        <QueryRule
+          v-if="child.kind === 'rule'"
+          :node="child"
+          :fields="fields"
+          @update:node="updateChild(index, $event)"
+          @remove="removeChild(index)"
+        />
+        <QueryGroup
+          v-else
+          :node="child"
+          :fields="fields"
+          :max-depth="maxDepth"
+          :current-depth="currentDepth + 1"
+          @update:node="updateChild(index, $event)"
+          @remove="removeChild(index)"
+        />
+      </div>
+    </div>
+
+    <div class="qg__actions">
+      <button class="qg__add-rule" @click="addRule">
+        <font-awesome-icon icon="plus" class="me-1" />New Rule
+      </button>
+      <button v-if="currentDepth < maxDepth - 1" class="qg__add-group" @click="addGroup">
+        Add group
+      </button>
+      <button v-if="currentDepth > 0" class="qg__remove-group ms-auto" @click="$emit('remove')">
+        <font-awesome-icon icon="times" /> Remove group
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import QueryRule from "@/components/QueryRule.vue";
+
+let uidCounter = 0;
+
+export default {
+  name: "QueryGroup",
+  components: { QueryRule },
+  props: {
+    node: { type: Object, required: true },
+    fields: { type: Array, required: true },
+    maxDepth: { type: Number, default: 3 },
+    currentDepth: { type: Number, default: 0 },
+  },
+  emits: ["update:node", "remove"],
+  methods: {
+    setCombinator(val) {
+      this.$emit("update:node", { ...this.node, combinator: val });
+    },
+    addRule() {
+      const firstField = this.fields[0];
+      const firstOp = firstField?.operators[0]?.id || "";
+      this.$emit("update:node", {
+        ...this.node,
+        children: [
+          ...this.node.children,
+          { kind: "rule", field: firstField?.id || "", operator: firstOp, _uid: ++uidCounter },
+        ],
+      });
+    },
+    addGroup() {
+      this.$emit("update:node", {
+        ...this.node,
+        children: [
+          ...this.node.children,
+          { kind: "group", combinator: "and", children: [], _uid: ++uidCounter },
+        ],
+      });
+    },
+    updateChild(index, updated) {
+      const children = [...this.node.children];
+      children[index] = updated;
+      this.$emit("update:node", { ...this.node, children });
+    },
+    removeChild(index) {
+      this.$emit("update:node", {
+        ...this.node,
+        children: this.node.children.filter((_, i) => i !== index),
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.qg {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.qg--nested {
+  border-left: 3px solid #e5e7eb;
+  padding-left: 14px;
+  margin-top: 8px;
+  padding-top: 8px;
+}
+
+.qg__combinator {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 8px;
+  align-self: flex-start;
+}
+.qg__comb-btn {
+  padding: 3px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.1s;
+  letter-spacing: 0.03em;
+}
+.qg__comb-btn:first-child {
+  border-radius: 6px 0 0 6px;
+}
+.qg__comb-btn:last-child {
+  border-radius: 0 6px 6px 0;
+  border-left: none;
+}
+.qg__comb-btn--active {
+  background: #6366f1;
+  border-color: #6366f1;
+  color: #fff;
+}
+
+.qg__rules {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.qg__rule-wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.qg__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+  padding-top: 2px;
+}
+.qg__add-rule {
+  background: none;
+  border: none;
+  color: #6366f1;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+.qg__add-rule:hover {
+  color: #4f46e5;
+}
+.qg__add-group {
+  background: none;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  color: #9ca3af;
+  font-size: 0.78rem;
+  cursor: pointer;
+  padding: 2px 10px;
+  transition:
+    border-color 0.12s,
+    color 0.12s;
+}
+.qg__add-group:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+}
+.qg__remove-group {
+  background: none;
+  border: none;
+  color: #f87171;
+  font-size: 0.78rem;
+  cursor: pointer;
+  padding: 0;
+  margin-left: auto;
+}
+.ms-auto {
+  margin-left: auto;
+}
+</style>
diff --git a/webapp/src/components/QueryRule.vue b/webapp/src/components/QueryRule.vue
new file mode 100644
index 000000000..896b65466
--- /dev/null
+++ b/webapp/src/components/QueryRule.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="qr">
+    <div class="qr__field">
+      <span class="qr__field-icon">{{ fieldIcon }}</span>
+      <select :value="node.field" class="qr__select" @change="onFieldChange($event.target.value)">
+        <option value="" disabled>Field…</option>
+        <optgroup v-for="group in groupedFields" :key="group.label" :label="group.label">
+          <option v-for="f in group.fields" :key="f.id" :value="f.id">{{ f.label }}</option>
+        </optgroup>
+      </select>
+    </div>
+
+    <div class="qr__operator">
+      <select
+        :value="node.operator"
+        class="qr__select"
+        :disabled="!node.field"
+        @change="onOperatorChange($event.target.value)"
+      >
+        <option value="" disabled>Operator…</option>
+        <option v-for="op in availableOperators" :key="op.id" :value="op.id">{{ op.label }}</option>
+      </select>
+    </div>
+
+    <div class="qr__value">
+      <component
+        :is="editorComponent"
+        v-if="currentOperator && currentOperator.value_required"
+        :model-value="node.value"
+        :value-schema="currentOperator.value_schema"
+        :options-source="currentOperator.options_source"
+        @update:model-value="onValueChange"
+      />
+      <span v-else-if="currentOperator && !currentOperator.value_required" class="qr__no-value">
+        no value needed
+      </span>
+    </div>
+
+    <button class="qr__delete" title="Remove" @click="$emit('remove')">
+      <font-awesome-icon icon="trash" />
+    </button>
+  </div>
+</template>
+
+<script>
+import TextEditor from "@/components/queryEditors/TextEditor.vue";
+import StringListEditor from "@/components/queryEditors/StringListEditor.vue";
+import NumberEditor from "@/components/queryEditors/NumberEditor.vue";
+import DatetimeEditor from "@/components/queryEditors/DatetimeEditor.vue";
+import DatetimeRangeEditor from "@/components/queryEditors/DatetimeRangeEditor.vue";
+import EnumEditor from "@/components/queryEditors/EnumEditor.vue";
+import ChemicalFormulaEditor from "@/components/queryEditors/ChemicalFormulaEditor.vue";
+import ConstituentSelectorEditor from "@/components/queryEditors/ConstituentSelectorEditor.vue";
+import FallbackEditor from "@/components/queryEditors/FallbackEditor.vue";
+
+const editorMap = {
+  text: "TextEditor",
+  "string-list": "StringListEditor",
+  number: "NumberEditor",
+  datetime: "DatetimeEditor",
+  "datetime-range": "DatetimeRangeEditor",
+  enum: "EnumEditor",
+  "chemical-formula": "ChemicalFormulaEditor",
+  "constituent-selector": "ConstituentSelectorEditor",
+};
+
+const groupIcons = {
+  Basic: "Aa",
+  Chemistry: "⚗",
+  Cell: "⊙",
+  Synthesis: "∑",
+  Provenance: "◈",
+  Other: "◇",
+};
+
+export default {
+  name: "QueryRule",
+  components: {
+    TextEditor,
+    StringListEditor,
+    NumberEditor,
+    DatetimeEditor,
+    DatetimeRangeEditor,
+    EnumEditor,
+    ChemicalFormulaEditor,
+    ConstituentSelectorEditor,
+    FallbackEditor,
+  },
+  props: {
+    node: { type: Object, required: true },
+    fields: { type: Array, required: true },
+  },
+  emits: ["update:node", "remove"],
+  computed: {
+    groupedFields() {
+      const groups = {};
+      this.fields.forEach((f) => {
+        const g = f.group || "Other";
+        if (!groups[g]) groups[g] = { label: g, fields: [] };
+        groups[g].fields.push(f);
+      });
+      return Object.values(groups);
+    },
+    currentField() {
+      return this.fields.find((f) => f.id === this.node.field) || null;
+    },
+    availableOperators() {
+      return this.currentField ? this.currentField.operators : [];
+    },
+    currentOperator() {
+      if (!this.currentField) return null;
+      return this.currentField.operators.find((op) => op.id === this.node.operator) || null;
+    },
+    editorComponent() {
+      if (!this.currentOperator) return null;
+      return editorMap[this.currentOperator.editor] || "FallbackEditor";
+    },
+    fieldIcon() {
+      if (!this.currentField) return "◇";
+      return groupIcons[this.currentField.group] || "◇";
+    },
+  },
+  methods: {
+    onFieldChange(fieldId) {
+      const field = this.fields.find((f) => f.id === fieldId);
+      const firstOp = field?.operators[0]?.id || "";
+      this.$emit("update:node", {
+        ...this.node,
+        field: fieldId,
+        operator: firstOp,
+        value: undefined,
+      });
+    },
+    onOperatorChange(opId) {
+      this.$emit("update:node", { ...this.node, operator: opId, value: undefined });
+    },
+    onValueChange(value) {
+      this.$emit("update:node", { ...this.node, value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.qr {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 36px;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 10px;
+  background: #fff;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  transition: border-color 0.12s;
+}
+.qr:hover {
+  border-color: #d1d5db;
+}
+
+.qr__field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.qr__field-icon {
+  font-size: 0.8rem;
+  color: #9ca3af;
+  flex-shrink: 0;
+  width: 18px;
+  text-align: center;
+}
+.qr__operator,
+.qr__value {
+  min-width: 0;
+}
+
+.qr__select {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  color: #374151;
+  cursor: pointer;
+  padding: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0 center;
+  padding-right: 14px;
+}
+.qr__select:disabled {
+  color: #d1d5db;
+  cursor: not-allowed;
+}
+
+.qr__no-value {
+  font-size: 0.78rem;
+  color: #d1d5db;
+  font-style: italic;
+}
+
+.qr__delete {
+  background: none;
+  border: none;
+  color: #d1d5db;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  transition: color 0.12s;
+  justify-self: center;
+}
+.qr__delete:hover {
+  color: #ef4444;
+}
+</style>
diff --git a/webapp/src/components/queryEditors/ChemicalFormulaEditor.vue b/webapp/src/components/queryEditors/ChemicalFormulaEditor.vue
new file mode 100644
index 000000000..81a6d9f19
--- /dev/null
+++ b/webapp/src/components/queryEditors/ChemicalFormulaEditor.vue
@@ -0,0 +1,20 @@
+<template>
+  <!-- TODO: replace with ChemFormulaInput when backend schema defines chemical-formula editor -->
+  <input
+    :value="modelValue"
+    type="text"
+    class="form-control form-control-sm"
+    placeholder="e.g. LiFePO4"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  name: "ChemicalFormulaEditor",
+  props: {
+    modelValue: { type: String, default: "" },
+  },
+  emits: ["update:modelValue"],
+};
+</script>
diff --git a/webapp/src/components/queryEditors/ConstituentSelectorEditor.vue b/webapp/src/components/queryEditors/ConstituentSelectorEditor.vue
new file mode 100644
index 000000000..db92ed94d
--- /dev/null
+++ b/webapp/src/components/queryEditors/ConstituentSelectorEditor.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="position-relative">
+    <input
+      v-model="query"
+      type="text"
+      class="form-control form-control-sm"
+      placeholder="Search..."
+      autocomplete="off"
+      @input="onInput"
+      @blur="onBlur"
+    />
+    <ul v-if="options.length && showDropdown" class="constituent-dropdown list-unstyled mb-0">
+      <li
+        v-for="opt in options"
+        :key="opt.id"
+        class="constituent-option"
+        @mousedown.prevent="selectOption(opt)"
+      >
+        {{ opt.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { fetchQueryOptions } from "@/server_fetch_utils.js";
+import { debounceTime } from "@/resources.js";
+
+export default {
+  name: "ConstituentSelectorEditor",
+  props: {
+    modelValue: { type: String, default: "" },
+    optionsSource: { type: String, default: "datalab:item-reference" },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      query: this.modelValue || "",
+      options: [],
+      showDropdown: false,
+      debounceTimer: null,
+    };
+  },
+  methods: {
+    onInput() {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(async () => {
+        if (!this.query) {
+          this.options = [];
+          return;
+        }
+        try {
+          const result = await fetchQueryOptions(this.optionsSource, this.query);
+          this.options = result.options || [];
+          this.showDropdown = true;
+        } catch {
+          this.options = [];
+        }
+      }, debounceTime);
+    },
+    selectOption(opt) {
+      this.query = opt.label;
+      this.showDropdown = false;
+      this.$emit("update:modelValue", opt.id);
+    },
+    onBlur() {
+      setTimeout(() => {
+        this.showDropdown = false;
+      }, 150);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.constituent-dropdown {
+  position: absolute;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.constituent-option {
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+.constituent-option:hover {
+  background: #f0f4ff;
+}
+</style>
diff --git a/webapp/src/components/queryEditors/DatetimeEditor.vue b/webapp/src/components/queryEditors/DatetimeEditor.vue
new file mode 100644
index 000000000..65ec34d7b
--- /dev/null
+++ b/webapp/src/components/queryEditors/DatetimeEditor.vue
@@ -0,0 +1,30 @@
+<template>
+  <input
+    :value="modelValue"
+    type="datetime-local"
+    class="qeditor-input"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  name: "DatetimeEditor",
+  props: {
+    modelValue: { type: String, default: "" },
+  },
+  emits: ["update:modelValue"],
+};
+</script>
+
+<style scoped>
+.qeditor-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  color: #374151;
+  padding: 0;
+}
+</style>
diff --git a/webapp/src/components/queryEditors/DatetimeRangeEditor.vue b/webapp/src/components/queryEditors/DatetimeRangeEditor.vue
new file mode 100644
index 000000000..f5e020a6f
--- /dev/null
+++ b/webapp/src/components/queryEditors/DatetimeRangeEditor.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="dt-range">
+    <div class="dt-range__row">
+      <span class="dt-range__label">From</span>
+      <input
+        :value="modelValue && modelValue[0]"
+        type="datetime-local"
+        class="form-control form-control-sm"
+        @input="onStart($event.target.value)"
+      />
+    </div>
+    <div class="dt-range__row">
+      <span class="dt-range__label">To</span>
+      <input
+        :value="modelValue && modelValue[1]"
+        type="datetime-local"
+        class="form-control form-control-sm"
+        @input="onEnd($event.target.value)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DatetimeRangeEditor",
+  props: {
+    modelValue: { type: Array, default: () => ["", ""] },
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    onStart(val) {
+      this.$emit("update:modelValue", [val, (this.modelValue && this.modelValue[1]) || ""]);
+    },
+    onEnd(val) {
+      this.$emit("update:modelValue", [(this.modelValue && this.modelValue[0]) || "", val]);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dt-range {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.dt-range__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.dt-range__label {
+  font-size: 0.72rem;
+  color: #868e96;
+  width: 28px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/webapp/src/components/queryEditors/EnumEditor.vue b/webapp/src/components/queryEditors/EnumEditor.vue
new file mode 100644
index 000000000..b5343a9f9
--- /dev/null
+++ b/webapp/src/components/queryEditors/EnumEditor.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="enum-editor">
+    <div v-if="isMulti" class="enum-chips">
+      <span v-for="v in selectedArray" :key="v" class="enum-chip">
+        {{ v }}<button class="enum-chip__remove" @click="removeChip(v)">×</button>
+      </span>
+      <select
+        v-if="remainingOptions.length"
+        class="enum-add-select"
+        @change="addChip($event.target.value)"
+      >
+        <option value="">+ Add…</option>
+        <option v-for="opt in remainingOptions" :key="opt" :value="opt">{{ opt }}</option>
+      </select>
+    </div>
+
+    <div v-else class="enum-chips">
+      <span v-if="modelValue" class="enum-chip">
+        {{ modelValue
+        }}<button class="enum-chip__remove" @click="$emit('update:modelValue', '')">×</button>
+      </span>
+      <select
+        v-else
+        class="enum-add-select enum-add-select--full"
+        @change="$emit('update:modelValue', $event.target.value)"
+      >
+        <option value="" disabled selected>Select…</option>
+        <option v-for="opt in options" :key="opt" :value="opt">{{ opt }}</option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EnumEditor",
+  props: {
+    modelValue: { type: [String, Array], default: null },
+    valueSchema: { type: Object, default: () => ({}) },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    isMulti() {
+      return this.valueSchema && this.valueSchema.type === "array";
+    },
+    options() {
+      if (this.isMulti) {
+        return this.valueSchema?.items?.enum || [];
+      }
+      return this.valueSchema?.enum || [];
+    },
+    selectedArray() {
+      if (!this.modelValue) return [];
+      return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue];
+    },
+    remainingOptions() {
+      return this.options.filter((o) => !this.selectedArray.includes(o));
+    },
+  },
+  methods: {
+    addChip(val) {
+      if (!val) return;
+      this.$emit("update:modelValue", [...this.selectedArray, val]);
+    },
+    removeChip(val) {
+      const next = this.selectedArray.filter((v) => v !== val);
+      this.$emit("update:modelValue", next.length ? next : null);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.enum-editor {
+  width: 100%;
+}
+
+.enum-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-height: 28px;
+}
+
+.enum-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px 2px 10px;
+  background: #ede9fe;
+  color: #5b21b6;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.enum-chip__remove {
+  background: none;
+  border: none;
+  color: #7c3aed;
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.95rem;
+  line-height: 1;
+  opacity: 0.7;
+}
+.enum-chip__remove:hover {
+  opacity: 1;
+}
+
+.enum-add-select {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.8rem;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0;
+}
+.enum-add-select--full {
+  font-size: 0.875rem;
+  color: #374151;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0 center;
+  padding-right: 14px;
+}
+</style>
diff --git a/webapp/src/components/queryEditors/FallbackEditor.vue b/webapp/src/components/queryEditors/FallbackEditor.vue
new file mode 100644
index 000000000..446dc70c2
--- /dev/null
+++ b/webapp/src/components/queryEditors/FallbackEditor.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <textarea
+      :value="displayValue"
+      class="form-control form-control-sm"
+      rows="2"
+      placeholder="JSON value"
+      @input="onInput($event.target.value)"
+    />
+    <small v-if="parseError" class="text-danger">{{ parseError }}</small>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FallbackEditor",
+  props: {
+    modelValue: { type: [String, Number, Array, Object], default: null },
+    valueSchema: { type: Object, default: null },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return { parseError: null };
+  },
+  computed: {
+    displayValue() {
+      if (this.modelValue === null || this.modelValue === undefined) return "";
+      if (typeof this.modelValue === "string") return this.modelValue;
+      return JSON.stringify(this.modelValue, null, 2);
+    },
+  },
+  methods: {
+    onInput(raw) {
+      this.parseError = null;
+      try {
+        const parsed = JSON.parse(raw);
+        this.$emit("update:modelValue", parsed);
+      } catch {
+        this.parseError = "Invalid JSON";
+        this.$emit("update:modelValue", raw);
+      }
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/queryEditors/NumberEditor.vue b/webapp/src/components/queryEditors/NumberEditor.vue
new file mode 100644
index 000000000..85a42b7b7
--- /dev/null
+++ b/webapp/src/components/queryEditors/NumberEditor.vue
@@ -0,0 +1,32 @@
+<template>
+  <input
+    :value="modelValue"
+    type="number"
+    class="qeditor-input"
+    placeholder="Enter number…"
+    @input="$emit('update:modelValue', Number($event.target.value))"
+  />
+</template>
+
+<script>
+export default {
+  name: "NumberEditor",
+  props: { modelValue: { type: Number, default: null } },
+  emits: ["update:modelValue"],
+};
+</script>
+
+<style scoped>
+.qeditor-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  color: #374151;
+  padding: 0;
+}
+.qeditor-input::placeholder {
+  color: #d1d5db;
+}
+</style>
diff --git a/webapp/src/components/queryEditors/StringListEditor.vue b/webapp/src/components/queryEditors/StringListEditor.vue
new file mode 100644
index 000000000..58630a6ee
--- /dev/null
+++ b/webapp/src/components/queryEditors/StringListEditor.vue
@@ -0,0 +1,33 @@
+<template>
+  <input
+    :value="displayValue"
+    type="text"
+    class="form-control form-control-sm"
+    placeholder="val1, val2, ..."
+    @input="onInput($event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  name: "StringListEditor",
+  props: {
+    modelValue: { type: Array, default: () => [] },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    displayValue() {
+      return Array.isArray(this.modelValue) ? this.modelValue.join(", ") : "";
+    },
+  },
+  methods: {
+    onInput(raw) {
+      const items = raw
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+      this.$emit("update:modelValue", items);
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/queryEditors/TextEditor.vue b/webapp/src/components/queryEditors/TextEditor.vue
new file mode 100644
index 000000000..adb35eaa0
--- /dev/null
+++ b/webapp/src/components/queryEditors/TextEditor.vue
@@ -0,0 +1,32 @@
+<template>
+  <input
+    :value="modelValue"
+    type="text"
+    class="qeditor-input"
+    placeholder="Enter value…"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  name: "TextEditor",
+  props: { modelValue: { type: String, default: "" } },
+  emits: ["update:modelValue"],
+};
+</script>
+
+<style scoped>
+.qeditor-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  color: #374151;
+  padding: 0;
+}
+.qeditor-input::placeholder {
+  color: #d1d5db;
+}
+</style>
diff --git a/webapp/src/server_fetch_utils.js b/webapp/src/server_fetch_utils.js
index f52ced172..0fab66306 100644
--- a/webapp/src/server_fetch_utils.js
+++ b/webapp/src/server_fetch_utils.js
@@ -1528,3 +1528,40 @@ export function invalidateToken(refcode) {
       throw error;
     });
 }
+
+export async function fetchItemTypes(list_view) {
+  const url = new URL(`${API_URL}/item-types`);
+  url.searchParams.set("list_view", list_view);
+  const response = await fetch(url.toString(), { credentials: "include" });
+  return response.json();
+}
+
+export async function fetchQuerySchema(list_view, item_types) {
+  const url = new URL(`${API_URL}/item-query-schema`);
+  url.searchParams.set("list_view", list_view);
+  item_types.forEach((t) => url.searchParams.append("item_type", t));
+  const response = await fetch(url.toString(), { credentials: "include" });
+  return response.json();
+}
+
+export async function runItemQuery(request) {
+  const response = await fetch(`${API_URL}/item-query`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(request),
+  });
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error((data.error && data.error.message) || "Query failed");
+  }
+  return data;
+}
+
+export async function fetchQueryOptions(optionsSource, query) {
+  const url = new URL(`${API_URL}/query-options/${optionsSource}`);
+  url.searchParams.set("q", query);
+  const response = await fetch(url.toString(), { credentials: "include" });
+  if (!response.ok) return { options: [] };
+  return response.json();
+}