add experimental tracing panel

frontend/src/components/editor/cell/CellStatus.tsx

@@ -321,7 +321,7 @@ export const CellStatusComponent: React.FC<CellStatusComponentProps> = ({
   return null;
 };
 
-const ElapsedTime = (props: { elapsedTime: string }) => {
+export const ElapsedTime = (props: { elapsedTime: string }) => {
   return (
     <span className="tracking-wide font-semibold">{props.elapsedTime}</span>
   );
@@ -346,7 +346,7 @@ const LastRanTime = (props: { lastRanTime: number }) => {
   );
 };
 
-function formatElapsedTime(elapsedTime: number | null) {
+export function formatElapsedTime(elapsedTime: number | null) {
   if (elapsedTime === null) {
     return "";
   }

frontend/src/components/editor/chrome/panels/tracing-panel.tsx

@@ -0,0 +1,7 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { Tracing } from "@/components/tracing/tracing";
+import React from "react";
+
+export const TracingPanel: React.FC = () => {
+  return <Tracing />;
+};

frontend/src/components/editor/chrome/types.ts

@@ -14,6 +14,7 @@ import {
   NotebookPenIcon,
   BoxIcon,
   BotMessageSquareIcon,
+  ActivityIcon,
 } from "lucide-react";
 
 export type PanelType =
@@ -22,6 +23,7 @@ export type PanelType =
   | "variables"
   | "outline"
   | "dependencies"
+  | "tracing"
   | "packages"
   | "documentation"
   | "snippets"
@@ -94,6 +96,13 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Notebook logs",
     position: "sidebar",
   },
+  {
+    type: "tracing",
+    Icon: ActivityIcon,
+    tooltip: "Tracing",
+    position: "sidebar",
+    hidden: !getFeatureFlag("tracing"),
+  },
   {
     type: "snippets",
     Icon: SquareDashedBottomCodeIcon,

frontend/src/components/editor/dynamic-favicon.tsx

@@ -4,7 +4,7 @@ import { useEventListener } from "@/hooks/useEventListener";
 import { usePrevious } from "@dnd-kit/utilities";
 import { useEffect } from "react";
 
-const FAVICONS = {
+export const FAVICONS = {
   idle: "./favicon.ico",
   success: "./circle-check.ico",
   running: "./circle-play.ico",