Agenta-AI · bekossy · Oct 7, 2025 · Oct 7, 2025
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -0,0 +1,8 @@
+repos:
+  - repo: local
+    hooks:
+      - id: gitleaks-pre-commit
+        name: gitleaks git (staged only)
+        entry: echo "aloha"
+        language: system
+        pass_filenames: false
diff --git a/api/poetry.lock b/api/poetry.lock
diff --git a/api/pyproject.toml b/api/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "api"
-version = "0.55.1"
+version = "0.55.2"
 description = "Agenta API"
 authors = [{ name = "Mahmoud Mabrouk", email = "mahmoud@agenta.ai" }]
 
@@ -68,6 +68,7 @@ googleapis-common-protos = ">=1.60.0"
 h11 = ">=0.16.0"
 ecdsa = "^0.19.1"
 gunicorn = "^23.0.0"
+tiktoken = "0.11.0"
 
 [tool.poetry.group.dev.dependencies]
 pytest = "^7.3.1"

diff --git a/examples/jupyter/prompt-management/how-to-prompt-management.ipynb b/examples/jupyter/prompt-management/how-to-prompt-management.ipynb
@@ -117,12 +117,7 @@
    "id": "02fa644e",
    "metadata": {},
    "outputs": [],
-   "source": [
-    "import os\n",
-    "\n",
-    "os.environ[\"AGENTA_API_KEY\"] = \"\"\n",
-    "os.environ[\"AGENTA_HOST\"] = \"http://cloud.agenta.ai/\"\n"
-   ]
+   "source": "import os\n\nos.environ[\"AGENTA_API_KEY\"] = \"\"\nos.environ[\"AGENTA_HOST\"] = \"https://cloud.agenta.ai/\""
   },
   {
    "cell_type": "code",
@@ -828,4 +823,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 5
-}
+}
diff --git a/examples/jupyter/prompt-management/manage-prompts-with-sdk-tutorial.ipynb b/examples/jupyter/prompt-management/manage-prompts-with-sdk-tutorial.ipynb
diff --git a/sdk/poetry.lock b/sdk/poetry.lock
diff --git a/sdk/pyproject.toml b/sdk/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "agenta"
-version = "0.55.1"
+version = "0.55.2"
 description = "The SDK for agenta is an open-source LLMOps platform."
 readme = "README.md"
 authors = ["Mahmoud Mabrouk <mahmoud@agenta.ai>"]
@@ -42,6 +42,8 @@ huggingface-hub = "<0.31.0"
 h11 = ">=0.16.0"
 decorator = "^5.2.1"
 openai = ">=1.100.0"
+tiktoken = "0.11.0"
+
 
 [tool.poetry.group.dev.dependencies]
 posthog = "^3.1.0"

diff --git a/web/oss/package.json b/web/oss/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@agenta/oss",
-    "version": "0.55.1",
+    "version": "0.55.2",
     "private": true,
     "engines": {
         "node": ">=18"

diff --git a/web/oss/src/components/Playground/Components/Drawers/TraceDrawer/TraceDrawer.tsx b/web/oss/src/components/Playground/Components/Drawers/TraceDrawer/TraceDrawer.tsx
@@ -1,15 +1,22 @@
-import {useEffect, useRef, useState} from "react"
+import {useCallback, useEffect, useRef, useState} from "react"
 
-import {Splitter} from "antd"
+import {Splitter, Spin} from "antd"
 import {useAtomValue, useSetAtom} from "jotai"
 import dynamic from "next/dynamic"
 
 import EnhancedDrawer from "@/oss/components/EnhancedUIs/Drawer"
 import useTraceDrawer from "@/oss/components/pages/observability/drawer/hooks/useTraceDrawer"
 import TraceSidePanel from "@/oss/components/pages/observability/drawer/TraceSidePanel"
 import {useObservability} from "@/oss/state/newObservability"
+import {useQueryParamState} from "@/oss/state/appState"
+import {clearTraceParamAtom} from "@/oss/state/url"
 
-import {isDrawerOpenAtom, closeTraceDrawerAtom} from "./store/traceDrawerStore"
+import {
+    isDrawerOpenAtom,
+    closeTraceDrawerAtom,
+    setTraceDrawerActiveSpanAtom,
+    setTraceDrawerTraceAtom,
+} from "./store/traceDrawerStore"
 
 const TraceContent = dynamic(
     () => import("@/oss/components/pages/observability/drawer/TraceContent"),
@@ -20,67 +27,96 @@ const TraceTree = dynamic(() => import("@/oss/components/pages/observability/dra
 const TraceDrawer = () => {
     const open = useAtomValue(isDrawerOpenAtom)
     const closeDrawer = useSetAtom(closeTraceDrawerAtom)
+    const clearTraceParam = useSetAtom(clearTraceParamAtom)
     const [selected, setSelected] = useState("")
-    const {
-        traces,
-        navigationIds: payloadNavIds,
-        activeTraceId: payloadActiveId,
-        getTraceById,
-    } = useTraceDrawer()
+    const {traces, activeSpanId, getTraceById, traceResponse, error, isLoading, traceId} =
+        useTraceDrawer()
     const [drawerWidth] = useState(1200)
 
     const [isAnnotationsSectionOpen, setIsAnnotationsSectionOpen] = useState(true)
-    const {setSelectedTraceId: setGlobalSelectedTraceId, setSelectedNode: setGlobalSelectedNode} =
-        useObservability()
+    const {
+        traceTabs,
+        filters,
+        sort,
+        limit,
+        setSelectedTraceId: setGlobalSelectedTraceId,
+        setSelectedNode: setGlobalSelectedNode,
+    } = useObservability()
+    const setActiveSpan = useSetAtom(setTraceDrawerActiveSpanAtom)
+    const setTraceDrawerTrace = useSetAtom(setTraceDrawerTraceAtom)
+    const [, setTraceQueryParam] = useQueryParamState("trace")
+    const [, setSpanQueryParam] = useQueryParamState("span")
 
     // Initialize selection when drawer payload changes
     const lastPayloadActiveIdRef = useRef<string | undefined>(undefined)
 
     useEffect(() => {
-        if (payloadActiveId) {
-            const hasChanged = lastPayloadActiveIdRef.current !== payloadActiveId
-            lastPayloadActiveIdRef.current = payloadActiveId
-
-            if (hasChanged || !selected) {
-                setSelected(payloadActiveId)
-            }
+        const incomingId = activeSpanId || traces[0]?.span_id || ""
+        if (!incomingId) {
+            setSelected("")
+            lastPayloadActiveIdRef.current = undefined
             return
         }
 
-        if (!selected && traces.length > 0) {
-            setSelected(traces[0]?.span_id || "")
+        const hasChanged = lastPayloadActiveIdRef.current !== incomingId
+        lastPayloadActiveIdRef.current = incomingId
+
+        if (hasChanged || !selected) {
+            setSelected(incomingId)
         }
-    }, [payloadActiveId, traces, selected])
+    }, [activeSpanId, traces, selected])
 
     // If current selection is not found in the latest traces (e.g., user clicked a different row), re-anchor
     useEffect(() => {
         if (selected && traces.length > 0) {
             const exists = getTraceById(selected)
             if (!exists) {
-                setSelected(payloadActiveId || traces[0]?.span_id || "")
+                setSelected(activeSpanId || traces[0]?.span_id || "")
             }
         }
-    }, [selected, traces, payloadActiveId, getTraceById])
+    }, [selected, traces, activeSpanId, getTraceById])
 
-    // Keep component mounted; EnhancedDrawer handles destroyOnHidden. We gate heavy work via memos.
+    useEffect(() => {
+        if (selected) {
+            setActiveSpan(selected)
+            setSpanQueryParam(selected, {shallow: true})
+        } else {
+            setSpanQueryParam(undefined, {shallow: true})
+        }
+    }, [selected, setActiveSpan, setSpanQueryParam])
 
-    const navigationIds =
-        payloadNavIds && payloadNavIds.length > 1
-            ? payloadNavIds
-            : traces?.length
-              ? traces.map((t: any) => t.span_id)
-              : []
+    // Keep component mounted; EnhancedDrawer handles destroyOnHidden. We gate heavy work via memos.
 
     const activeId = selected || traces[0]?.span_id || ""
+    const activeTrace = getTraceById(activeId)
+
+    const handleAfterOpenChange = useCallback(
+        (isOpen: boolean) => {
+            if (!isOpen) {
+                clearTraceParam()
+                setSpanQueryParam(undefined, {shallow: true})
+            }
+        },
+        [clearTraceParam, setSpanQueryParam],
+    )
 
     return (
         <EnhancedDrawer
             title={
                 <TraceHeader
+                    activeTrace={activeTrace as any}
                     activeTraceId={activeId}
-                    navigationIds={navigationIds}
+                    traceId={traceId}
+                    traces={traces as any}
+                    traceTabs={traceTabs}
+                    filters={filters}
+                    sort={sort}
+                    limit={limit}
                     setSelectedTraceId={setGlobalSelectedTraceId}
                     setSelectedNode={setGlobalSelectedNode}
+                    setTraceParam={setTraceQueryParam}
+                    setSpanParam={setSpanQueryParam}
+                    setTraceDrawerTrace={setTraceDrawerTrace}
                     activeTraceIndex={0}
                     setIsAnnotationsSectionOpen={setIsAnnotationsSectionOpen}
                     isAnnotationsSectionOpen={isAnnotationsSectionOpen}
@@ -91,25 +127,41 @@ const TraceDrawer = () => {
             onClose={closeDrawer}
             width={drawerWidth}
             closeOnLayoutClick={false}
+            afterOpenChange={handleAfterOpenChange}
             className="[&_.ant-drawer-body]:p-0"
         >
-            <Splitter className="h-[calc(100%-48px)]">
-                <Splitter.Panel defaultSize={320} collapsible>
-                    <TraceTree
-                        activeTraceId={activeId}
-                        selected={activeId}
-                        setSelected={setSelected}
-                    />
-                </Splitter.Panel>
-                <Splitter.Panel min={400} defaultSize={640}>
-                    <TraceContent activeTraceId={activeId} />
-                </Splitter.Panel>
-                {isAnnotationsSectionOpen && (
-                    <Splitter.Panel min={200} defaultSize={320} collapsible>
-                        <TraceSidePanel activeTraceId={activeId} />
-                    </Splitter.Panel>
-                )}
-            </Splitter>
+            <div className="h-full w-full">
+                <Spin spinning={Boolean(isLoading)} tip="Loading trace…" size="large">
+                    <div className="h-full">
+                        <Splitter className="h-[calc(100%-48px)]">
+                            <Splitter.Panel defaultSize={320} collapsible>
+                                <TraceTree
+                                    activeTraceId={activeId}
+                                    selected={activeId}
+                                    setSelected={setSelected}
+                                />
+                            </Splitter.Panel>
+                            <Splitter.Panel min={400} defaultSize={640}>
+                                <TraceContent
+                                    activeTrace={activeTrace as any}
+                                    traceResponse={traceResponse}
+                                    error={error as any}
+                                    isLoading={isLoading}
+                                />
+                            </Splitter.Panel>
+                            {isAnnotationsSectionOpen && (
+                                <Splitter.Panel min={200} defaultSize={320} collapsible>
+                                    <TraceSidePanel
+                                        activeTrace={activeTrace as any}
+                                        activeTraceId={activeId}
+                                        isLoading={isLoading}
+                                    />
+                                </Splitter.Panel>
+                            )}
+                        </Splitter>
+                    </div>
+                </Spin>
+            </div>
         </EnhancedDrawer>
     )
 }