comet-ml · andriidudar · Mar 31, 2026 · Mar 31, 2026
@@ -11,7 +11,7 @@ import {
   ColumnSort,
   RowSelectionState,
 } from "@tanstack/react-table";
-import { RotateCw, Undo2 } from "lucide-react";
+import { RotateCw, Undo2, X } from "lucide-react";
 import findIndex from "lodash/findIndex";
 import isObject from "lodash/isObject";
 import isNumber from "lodash/isNumber";
@@ -381,29 +381,14 @@ const DYNAMIC_COLUMNS_KEY_SUFFIX = "dynamic-columns";
 const PAGINATION_SIZE_KEY_SUFFIX = "pagination-size";
 const ROW_HEIGHT_KEY_SUFFIX = "row-height";
 
-const SOURCE_LABELS: Record<LOGS_SOURCE, { title: string; backLabel: string }> =
-  {
-    [LOGS_SOURCE.sdk]: { title: "Traces", backLabel: "Back" },
-    [LOGS_SOURCE.experiment]: {
-      title: "Experiment logs",
-      backLabel: "Back to experiment",
-    },
-    [LOGS_SOURCE.playground]: {
-      title: "Playground logs",
-      backLabel: "Back to playground",
-    },
-    [LOGS_SOURCE.optimization]: {
-      title: "Optimization logs",
-      backLabel: "Back to optimization",
-    },
-  };
-
 type TraceLogsSidebarProps = {
   open: boolean;
   onClose: () => void;
   projectId: string;
   projectName?: string;
   logsSource?: LOGS_SOURCE;
+  title?: string;
+  backLabel?: string;
 };
 
 const TraceLogsSidebar: React.FunctionComponent<TraceLogsSidebarProps> = ({
@@ -412,14 +397,12 @@ const TraceLogsSidebar: React.FunctionComponent<TraceLogsSidebarProps> = ({
   projectId,
   projectName = "",
   logsSource,
+  title = "Logs",
+  backLabel = "Back",
 }) => {
   const type = TRACE_DATA_TYPE.traces;
   const truncationEnabled = useTruncationEnabled();
 
-  const { title, backLabel } = logsSource
-    ? SOURCE_LABELS[logsSource]
-    : { title: "Traces", backLabel: "Back" };
-
   const {
     dateRange,
     handleDateRangeChange,
@@ -940,11 +923,14 @@ const TraceLogsSidebar: React.FunctionComponent<TraceLogsSidebarProps> = ({
   const sheetHeader = (
     <>
       <SheetTitle className="sr-only">{title}</SheetTitle>
-      <div className="flex items-center border-b px-5 py-3">
+      <div className="flex items-center justify-between border-b px-5 py-3">
         <Button variant="outline" size="2xs" onClick={onClose}>
           <Undo2 className="mr-1 size-3" />
           {backLabel}
         </Button>
+        <Button variant="ghost" size="icon-sm" onClick={onClose}>
+          <X />
+        </Button>
       </div>
     </>
   );
@@ -953,7 +939,7 @@ const TraceLogsSidebar: React.FunctionComponent<TraceLogsSidebarProps> = ({
     <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetContent
         ref={setSheetContentRef}
-        className="flex w-[calc(100vw-32px)] flex-col sm:max-w-full md:w-[calc(100vw-60px)] xl:w-[calc(100vw-240px)]"
+        className="flex w-screen flex-col shadow-none sm:max-w-full"
         header={sheetHeader}
         onEscapeKeyDown={(e) => {
           if (traceId) {
@@ -963,7 +949,7 @@ const TraceLogsSidebar: React.FunctionComponent<TraceLogsSidebarProps> = ({
       >
         <div className="flex min-h-0 flex-1 flex-col">
           <div className="px-6 pb-1 pt-4">
-            <h2 className="comet-title-l">{title}</h2>
+            <h2 className="comet-title-xxs">{title}</h2>
           </div>
 
           <div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-2 px-6 py-4">

@@ -1,6 +1,11 @@
 import React, { useCallback } from "react";
 import { ListTree } from "lucide-react";
-import { BooleanParam, JsonParam, useQueryParam } from "use-query-params";
+import {
+  BooleanParam,
+  JsonParam,
+  StringParam,
+  useQueryParam,
+} from "use-query-params";
 
 import { Tag } from "@/ui/tag";
 import { Button } from "@/ui/button";
@@ -13,12 +18,21 @@ type TraceLogsSidebarButtonProps = {
   projectId: string;
   logsSource?: LOGS_SOURCE;
   sourceFilters?: Filter[];
-  variant?: "tag" | "button";
+  variant?: "tag" | "icon";
+  title?: string;
+  backLabel?: string;
 };
 
 const TraceLogsSidebarButton: React.FunctionComponent<
   TraceLogsSidebarButtonProps
-> = ({ projectId, logsSource, sourceFilters, variant = "tag" }) => {
+> = ({
+  projectId,
+  logsSource,
+  sourceFilters,
+  variant = "tag",
+  title,
+  backLabel,
+}) => {
   const [open = false, setOpen] = useQueryParam(
     `${TLS_QUERY_PREFIX}open`,
     BooleanParam,
@@ -29,6 +43,14 @@ const TraceLogsSidebarButton: React.FunctionComponent<
     JsonParam,
     { updateType: "replaceIn" },
   );
+  const [, setTlsTrace] = useQueryParam(
+    `${TLS_QUERY_PREFIX}trace`,
+    StringParam,
+    { updateType: "replaceIn" },
+  );
+  const [, setTlsSpan] = useQueryParam(`${TLS_QUERY_PREFIX}span`, StringParam, {
+    updateType: "replaceIn",
+  });
 
   const handleOpen = useCallback(() => {
     if (sourceFilters?.length) {
@@ -40,16 +62,19 @@ const TraceLogsSidebarButton: React.FunctionComponent<
   const handleClose = useCallback(() => {
     setOpen(undefined);
     setTlsFilters(undefined);
-  }, [setOpen, setTlsFilters]);
+    setTlsTrace(undefined);
+    setTlsSpan(undefined);
+  }, [setOpen, setTlsFilters, setTlsTrace, setTlsSpan]);
 
   const trigger =
-    variant === "button" ? (
-      <Button variant="outline" size="2xs" onClick={handleOpen}>
-        <ListTree className="mr-1.5 size-3" />
-        Go to traces
-      </Button>
+    variant === "icon" ? (
+      <TooltipWrapper content="Go to logs">
+        <Button variant="outline" size="icon-2xs" onClick={handleOpen}>
+          <ListTree />
+        </Button>
+      </TooltipWrapper>
     ) : (
-      <TooltipWrapper content="View traces">
+      <TooltipWrapper content="Go to logs">
         <Tag
           size="md"
           variant="transparent"
@@ -61,7 +86,7 @@ const TraceLogsSidebarButton: React.FunctionComponent<
             style={{ color: "var(--color-green)" }}
           />
           <div className="comet-body-s-accented truncate text-muted-slate">
-            Go to traces
+            Go to logs
           </div>
         </Tag>
       </TooltipWrapper>
@@ -75,6 +100,8 @@ const TraceLogsSidebarButton: React.FunctionComponent<
         onClose={handleClose}
         projectId={projectId}
         logsSource={logsSource}
+        title={title}
+        backLabel={backLabel}
       />
     </>
   );

@@ -119,11 +119,13 @@ const CompareExperimentsDetails: React.FunctionComponent<
               resource={RESOURCE_TYPE.prompt}
             />
           )}
-        {!isCompare && experiment?.project_id && (
+        {experiment?.project_id && (
           <TraceLogsSidebarButton
             projectId={experiment.project_id}
             logsSource={LOGS_SOURCE.experiment}
             sourceFilters={experimentSourceFilters}
+            title="Experiment logs"
+            backLabel={isCompare ? "Back to compare" : "Back to experiment"}
           />
         )}
         {!isCompare &&

@@ -337,29 +337,33 @@ const PlaygroundHeader = ({
       >
         <div className="flex items-center gap-2">
           <h1 className="comet-title-xs">Playground</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          {renderExperimentChipOrButton()}
+          {renderRunButton()}
+          <Separator orientation="vertical" className="h-5" />
+          <TooltipWrapper content="Reset playground">
+            <Button
+              variant="outline"
+              size="icon-2xs"
+              onClick={() => {
+                resetKeyRef.current += 1;
+                setResetDialogOpen(true);
+              }}
+            >
+              <RotateCcw />
+            </Button>
+          </TooltipWrapper>
           {activeProjectId && (
             <TraceLogsSidebarButton
               projectId={activeProjectId}
               logsSource={LOGS_SOURCE.playground}
-              variant="button"
+              variant="icon"
+              title="Playground logs"
+              backLabel="Back to playground"
             />
           )}
         </div>
-        <div className="flex items-center gap-2">
-          {renderExperimentChipOrButton()}
-          {renderRunButton()}
-          <Button
-            variant="ghost"
-            size="2xs"
-            onClick={() => {
-              resetKeyRef.current += 1;
-              setResetDialogOpen(true);
-            }}
-          >
-            <RotateCcw className="mr-2 size-3.5" />
-            Reset
-          </Button>
-        </div>
       </div>
 
       <ConfirmDialog

@@ -97,6 +97,8 @@ const TrialDetails: React.FC<TrialDetailsProps> = ({
             projectId={experiment.project_id}
             logsSource={LOGS_SOURCE.optimization}
             sourceFilters={generateExperimentIdFilter(experiment.id)}
+            title="Optimization logs"
+            backLabel="Back to trial"
           />
         )}
       </div>