divi 0.0.1.dev15__tar.gz → 0.0.1.dev17__tar.gz

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: divi
-Version: 0.0.1.dev15
+Version: 0.0.1.dev17
 Summary: The Agent Platform for Observability & Evaluation
 License-File: LICENSE
 Requires-Python: >=3.11

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/graphql/src/datasources/datapark-api.ts

@@ -1,5 +1,5 @@
 import type { FetchResponse } from '@/types/response';
-import type { Span, Trace } from '@/types/types';
+import type { ChatInput, Span, Trace } from '@/types/types';
 import { type AugmentedRequest, RESTDataSource } from '@apollo/datasource-rest';
 import type { KeyValueCache } from '@apollo/utils.keyvaluecache';
 
@@ -29,4 +29,10 @@ export class DataParkAPI extends RESTDataSource {
   async getSpans(traceId: string) {
     return await this.get<FetchResponse<Span[]>>(`/api/trace/${traceId}/spans`);
   }
+
+  async getChatInput(spanId: string) {
+    return await this.get<FetchResponse<ChatInput>>(
+      `/api/v1/chat/completions/${spanId}/input`
+    );
+  }
 }

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/graphql/src/resolvers.ts

@@ -26,6 +26,9 @@ export const resolvers: Resolvers = {
     spans: async (_, { trace_id }, { dataSources }) => {
       return (await dataSources.dataparkAPI.getSpans(trace_id)).data;
     },
+    chat_input: async (_, { span_id }, { dataSources }) => {
+      return (await dataSources.dataparkAPI.getChatInput(span_id)).data;
+    },
   },
   Mutation: {
     createAPIKey: async (_, { name }, { dataSources }) => {

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/graphql/src/schema.graphql

@@ -12,6 +12,8 @@ type Query {
   all_traces: [Trace!]
   "Fetch all spans by trace id"
   spans(trace_id: ID!): [Span!]
+  "Fetch openai input by span id"
+  chat_input(span_id: ID!): ChatInput
 }
 
 "NullTime is a custom scalar type that represents a time value that can be null"
@@ -52,6 +54,11 @@ type Trace {
   session_id: ID!
 }
 
+enum Kind {
+  SPAN_KIND_FUNCTION
+  SPAN_KIND_LLM
+}
+
 "Span is a record of a single unit of work within a trace"
 type Span {
   id: ID!
@@ -61,10 +68,29 @@ type Span {
   start_time: String!
   end_time: String!
   duration: Float!
-  kind: String!
+  kind: Kind!
   metadata: [KeyValue!]
 }
 
+"OpenInput is the input for the OpenAI API"
+type ChatInput {
+  model: String!
+  messages: [MessageInput!]
+  temperature: Float
+  top_p: Float
+  n: Int
+  stream: Boolean
+  logprobs: Boolean
+  top_logprobs: Int
+}
+
+"MessageInput is a message sent to the OpenAI API"
+type MessageInput {
+  role: String!
+  content: String!
+  name: String
+}
+
 "Mutation is a collection of mutations that can be made to the API"
 type Mutation {
   "Auth Mutations"

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/graphql/src/types/types.d.ts

@@ -29,6 +29,19 @@ export type ApiKey = {
   name?: Maybe<Scalars['String']['output']>;
 };
 
+/** OpenInput is the input for the OpenAI API */
+export type ChatInput = {
+  __typename?: 'ChatInput';
+  logprobs?: Maybe<Scalars['Boolean']['output']>;
+  messages?: Maybe<Array<MessageInput>>;
+  model: Scalars['String']['output'];
+  n?: Maybe<Scalars['Int']['output']>;
+  stream?: Maybe<Scalars['Boolean']['output']>;
+  temperature?: Maybe<Scalars['Float']['output']>;
+  top_logprobs?: Maybe<Scalars['Int']['output']>;
+  top_p?: Maybe<Scalars['Float']['output']>;
+};
+
 /** CreateAPIKeyResponse is a response to the createAPIKey mutation */
 export type CreateApiKeyResponse = MutationResponse & {
   __typename?: 'CreateAPIKeyResponse';
@@ -71,6 +84,19 @@ export type KeyValue = {
   value: Scalars['String']['output'];
 };
 
+export enum Kind {
+  SpanKindFunction = 'SPAN_KIND_FUNCTION',
+  SpanKindLlm = 'SPAN_KIND_LLM'
+}
+
+/** MessageInput is a message sent to the OpenAI API */
+export type MessageInput = {
+  __typename?: 'MessageInput';
+  content: Scalars['String']['output'];
+  name?: Maybe<Scalars['String']['output']>;
+  role: Scalars['String']['output'];
+};
+
 /** Mutation is a collection of mutations that can be made to the API */
 export type Mutation = {
   __typename?: 'Mutation';
@@ -162,6 +188,8 @@ export type Query = {
   all_traces?: Maybe<Array<Trace>>;
   /** Fetch current user's API keys */
   api_keys?: Maybe<Array<ApiKey>>;
+  /** Fetch openai input by span id */
+  chat_input?: Maybe<ChatInput>;
   /** Fetch current user */
   me: User;
   /** Fetch all spans by trace id */
@@ -173,6 +201,12 @@ export type Query = {
 };
 
 
+/** Query is a collection of queries that can be made to the API */
+export type QueryChat_InputArgs = {
+  span_id: Scalars['ID']['input'];
+};
+
+
 /** Query is a collection of queries that can be made to the API */
 export type QuerySpansArgs = {
   trace_id: Scalars['ID']['input'];
@@ -204,7 +238,7 @@ export type Span = {
   duration: Scalars['Float']['output'];
   end_time: Scalars['String']['output'];
   id: Scalars['ID']['output'];
-  kind: Scalars['String']['output'];
+  kind: Kind;
   metadata?: Maybe<Array<KeyValue>>;
   name: Scalars['String']['output'];
   parent_id: Scalars['ID']['output'];
@@ -327,6 +361,7 @@ export type ResolversInterfaceTypes<_RefType extends Record<string, unknown>> =
 export type ResolversTypes = {
   APIKey: ResolverTypeWrapper<APIKeyModel>;
   Boolean: ResolverTypeWrapper<Scalars['Boolean']['output']>;
+  ChatInput: ResolverTypeWrapper<ChatInput>;
   CreateAPIKeyResponse: ResolverTypeWrapper<Omit<CreateApiKeyResponse, 'data'> & { data?: Maybe<ResolversTypes['APIKey']> }>;
   CreateTokenResponse: ResolverTypeWrapper<CreateTokenResponse>;
   CreateUserResponse: ResolverTypeWrapper<Omit<CreateUserResponse, 'data'> & { data?: Maybe<ResolversTypes['User']> }>;
@@ -335,6 +370,8 @@ export type ResolversTypes = {
   ID: ResolverTypeWrapper<Scalars['ID']['output']>;
   Int: ResolverTypeWrapper<Scalars['Int']['output']>;
   KeyValue: ResolverTypeWrapper<KeyValue>;
+  Kind: Kind;
+  MessageInput: ResolverTypeWrapper<MessageInput>;
   Mutation: ResolverTypeWrapper<{}>;
   MutationResponse: ResolverTypeWrapper<ResolversInterfaceTypes<ResolversTypes>['MutationResponse']>;
   NullTime: ResolverTypeWrapper<NullTime>;
@@ -352,6 +389,7 @@ export type ResolversTypes = {
 export type ResolversParentTypes = {
   APIKey: APIKeyModel;
   Boolean: Scalars['Boolean']['output'];
+  ChatInput: ChatInput;
   CreateAPIKeyResponse: Omit<CreateApiKeyResponse, 'data'> & { data?: Maybe<ResolversParentTypes['APIKey']> };
   CreateTokenResponse: CreateTokenResponse;
   CreateUserResponse: Omit<CreateUserResponse, 'data'> & { data?: Maybe<ResolversParentTypes['User']> };
@@ -360,6 +398,7 @@ export type ResolversParentTypes = {
   ID: Scalars['ID']['output'];
   Int: Scalars['Int']['output'];
   KeyValue: KeyValue;
+  MessageInput: MessageInput;
   Mutation: {};
   MutationResponse: ResolversInterfaceTypes<ResolversParentTypes>['MutationResponse'];
   NullTime: NullTime;
@@ -381,6 +420,18 @@ export type ApiKeyResolvers<ContextType = DataSourceContext, ParentType extends
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type ChatInputResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['ChatInput'] = ResolversParentTypes['ChatInput']> = {
+  logprobs?: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
+  messages?: Resolver<Maybe<Array<ResolversTypes['MessageInput']>>, ParentType, ContextType>;
+  model?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  n?: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  stream?: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
+  temperature?: Resolver<Maybe<ResolversTypes['Float']>, ParentType, ContextType>;
+  top_logprobs?: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  top_p?: Resolver<Maybe<ResolversTypes['Float']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type CreateApiKeyResponseResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['CreateAPIKeyResponse'] = ResolversParentTypes['CreateAPIKeyResponse']> = {
   code?: Resolver<ResolversTypes['Int'], ParentType, ContextType>;
   data?: Resolver<Maybe<ResolversTypes['APIKey']>, ParentType, ContextType>;
@@ -418,6 +469,13 @@ export type KeyValueResolvers<ContextType = DataSourceContext, ParentType extend
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type MessageInputResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['MessageInput'] = ResolversParentTypes['MessageInput']> = {
+  content?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  name?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  role?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type MutationResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['Mutation'] = ResolversParentTypes['Mutation']> = {
   createAPIKey?: Resolver<ResolversTypes['CreateAPIKeyResponse'], ParentType, ContextType, Partial<MutationCreateApiKeyArgs>>;
   createUser?: Resolver<ResolversTypes['CreateUserResponse'], ParentType, ContextType, RequireFields<MutationCreateUserArgs, 'email' | 'password' | 'username'>>;
@@ -445,6 +503,7 @@ export type NullTimeResolvers<ContextType = DataSourceContext, ParentType extend
 export type QueryResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['Query'] = ResolversParentTypes['Query']> = {
   all_traces?: Resolver<Maybe<Array<ResolversTypes['Trace']>>, ParentType, ContextType>;
   api_keys?: Resolver<Maybe<Array<ResolversTypes['APIKey']>>, ParentType, ContextType>;
+  chat_input?: Resolver<Maybe<ResolversTypes['ChatInput']>, ParentType, ContextType, RequireFields<QueryChat_InputArgs, 'span_id'>>;
   me?: Resolver<ResolversTypes['User'], ParentType, ContextType>;
   spans?: Resolver<Maybe<Array<ResolversTypes['Span']>>, ParentType, ContextType, RequireFields<QuerySpansArgs, 'trace_id'>>;
   traces?: Resolver<Maybe<Array<ResolversTypes['Trace']>>, ParentType, ContextType, RequireFields<QueryTracesArgs, 'session_id'>>;
@@ -462,7 +521,7 @@ export type SpanResolvers<ContextType = DataSourceContext, ParentType extends Re
   duration?: Resolver<ResolversTypes['Float'], ParentType, ContextType>;
   end_time?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
-  kind?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  kind?: Resolver<ResolversTypes['Kind'], ParentType, ContextType>;
   metadata?: Resolver<Maybe<Array<ResolversTypes['KeyValue']>>, ParentType, ContextType>;
   name?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   parent_id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
@@ -507,11 +566,13 @@ export type UserResolvers<ContextType = DataSourceContext, ParentType extends Re
 
 export type Resolvers<ContextType = DataSourceContext> = {
   APIKey?: ApiKeyResolvers<ContextType>;
+  ChatInput?: ChatInputResolvers<ContextType>;
   CreateAPIKeyResponse?: CreateApiKeyResponseResolvers<ContextType>;
   CreateTokenResponse?: CreateTokenResponseResolvers<ContextType>;
   CreateUserResponse?: CreateUserResponseResolvers<ContextType>;
   DeleteUserResponse?: DeleteUserResponseResolvers<ContextType>;
   KeyValue?: KeyValueResolvers<ContextType>;
+  MessageInput?: MessageInputResolvers<ContextType>;
   Mutation?: MutationResolvers<ContextType>;
   MutationResponse?: MutationResponseResolvers<ContextType>;
   NullTime?: NullTimeResolvers<ContextType>;

divi-0.0.1.dev17/apps/web/app/dashboard/@modal/(.)traces/[id]/page.tsx

@@ -0,0 +1,21 @@
+import { ResponsiveDrawer } from '@/components/Modal';
+import { TraceBoard } from '@/components/trace-board';
+import { getTraceChartData } from '@/lib/server/span';
+
+interface TraceModalPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function TraceModalPage(props: TraceModalPageProps) {
+  const { id } = await props.params;
+  const spans = await getTraceChartData(id);
+
+  return (
+    <ResponsiveDrawer
+      title="Trace"
+      description="Click expand button to view full trace"
+    >
+      <TraceBoard spans={spans} direction="vertical" />
+    </ResponsiveDrawer>
+  );
+}

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/web/app/dashboard/api-keys/components/data-table-cell-viewer.tsx

@@ -38,6 +38,9 @@ export function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
     ),
     null
   );
+  if (isMobile === undefined) {
+    return null;
+  }
 
   return (
     <Drawer direction={isMobile ? 'bottom' : 'right'}>

divi-0.0.1.dev17/apps/web/app/dashboard/traces/(children)/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { TraceBoard } from '@/components/trace-board';
+import { getTraceChartData } from '@/lib/server/span';
+
+interface TracePageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function TracePage(props: TracePageProps) {
+  const { id } = await props.params;
+  const spans = await getTraceChartData(id);
+
+  return <TraceBoard spans={spans} />;
+}

{divi-0.0.1.dev15/apps/web/app/dashboard/trace → divi-0.0.1.dev17/apps/web/app/dashboard/traces/(overview)}/components/columns.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { DataTableColumnHeader } from '@/components/data-table-column-header';
 import { formatDate } from '@/lib/utils';
 import type { ColumnDef } from '@tanstack/react-table';
@@ -7,6 +6,7 @@ import Link from 'next/link';
 import type { z } from 'zod';
 import { statuses } from '../data/data';
 import type { traceSchema } from '../data/schema';
+import { DataTableRowActions } from './data-table-row-action';
 
 export const columns: ColumnDef<z.infer<typeof traceSchema>>[] = [
   {
@@ -15,7 +15,7 @@ export const columns: ColumnDef<z.infer<typeof traceSchema>>[] = [
       <DataTableColumnHeader column={column} title="Trace ID" />
     ),
     cell: ({ row }) => (
-      <Link href={`/dashboard/trace/${row.getValue('id')}`} passHref>
+      <Link href={`/dashboard/traces/${row.getValue('id')}`} passHref>
         {row.getValue('id')}
       </Link>
     ),
@@ -93,4 +93,8 @@ export const columns: ColumnDef<z.infer<typeof traceSchema>>[] = [
     },
     enableGrouping: false,
   },
+  {
+    id: 'actions',
+    cell: ({ row }) => <DataTableRowActions row={row} />,
+  },
 ];

divi-0.0.1.dev17/apps/web/app/dashboard/traces/(overview)/components/data-table-row-action.tsx

@@ -0,0 +1,31 @@
+import type { Row } from '@tanstack/react-table';
+import { Button } from '@workspace/ui/components/button';
+import { Expand, Eye } from 'lucide-react';
+import Link from 'next/link';
+import { traceSchema } from '../data/schema';
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+}: DataTableRowActionsProps<TData>) {
+  const trace = traceSchema.parse(row.original);
+  const href = `/dashboard/traces/${trace.id}`;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Button variant="ghost" size="icon" asChild>
+        <Link href={href} passHref>
+          <Eye className="h-4 w-4 text-muted-foreground" />
+        </Link>
+      </Button>
+      <Button variant="ghost" size="icon" asChild>
+        <a href={href}>
+          <Expand className="h-4 w-4 text-muted-foreground" />
+        </a>
+      </Button>
+    </div>
+  );
+}

{divi-0.0.1.dev15/apps/web/app/dashboard/trace → divi-0.0.1.dev17/apps/web/app/dashboard/traces/(overview)}/layout.tsx

@@ -1,11 +1,11 @@
 import { Separator } from '@workspace/ui/components/separator';
 import type React from 'react';
 
-interface APIKeysLayoutProps {
+interface TracesLayoutProps {
   children: React.ReactNode;
 }
 
-export default function APIKeysLayout({ children }: APIKeysLayoutProps) {
+export default function TracesLayout({ children }: TracesLayoutProps) {
   return (
     <div className="space-y-3 py-3">
       <div className="flex items-center justify-between px-6">

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/web/components/Modal.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { Button } from '@workspace/ui/components/button';
 import {
   Dialog,
   DialogContent,
@@ -17,11 +18,12 @@ import {
   DrawerTitle,
 } from '@workspace/ui/components/drawer';
 import { useMediaQuery } from '@workspace/ui/hooks/use-media-query';
-import { useRouter } from 'next/navigation';
+import { Expand } from 'lucide-react';
+import { usePathname, useRouter } from 'next/navigation';
 import type * as React from 'react';
 import { useState } from 'react';
 
-export function Modal({
+export function ResponsiveModal({
   children,
   title,
   description,
@@ -67,3 +69,49 @@ export function Modal({
     </Drawer>
   );
 }
+
+export function ResponsiveDrawer({
+  children,
+  title,
+  description,
+}: {
+  children: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [open, setOpen] = useState(true);
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setOpen(false);
+      setTimeout(router.back, 200);
+    }
+  };
+
+  return (
+    <Drawer
+      defaultOpen={false}
+      open={open}
+      onOpenChange={handleOpenChange}
+      direction="right"
+    >
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle className="flex items-center justify-between">
+            <Button variant="ghost" size="icon" asChild>
+              <a href={pathname}>
+                <Expand />
+              </a>
+            </Button>
+            {title}
+          </DrawerTitle>
+          <DrawerDescription className="text-end">
+            {description}
+          </DrawerDescription>
+        </DrawerHeader>
+        {children}
+      </DrawerContent>
+    </Drawer>
+  );
+}

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/web/components/app-sidebar.tsx

@@ -38,12 +38,12 @@ const data = {
     },
     {
       title: 'Trace',
-      url: '/dashboard/trace',
+      url: '/dashboard/traces',
       icon: IconBinaryTree,
     },
     {
       title: 'Usage',
-      url: '/dashboard/usage',
+      url: '/dashboard/usages',
       icon: IconCurrencyDollar,
     },
     {

divi-0.0.1.dev17/apps/web/components/mode-switcher.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { MoonIcon, SunIcon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+
+import { Button } from '@workspace/ui/components/button';
+import {
+  META_THEME_COLORS,
+  useMetaColor,
+} from '@workspace/ui/hooks/use-meta-color';
+import { cn } from '@workspace/ui/lib/utils';
+
+export function ModeSwitcher({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { setTheme, resolvedTheme } = useTheme();
+  const { setMetaColor } = useMetaColor();
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+    setMetaColor(
+      resolvedTheme === 'dark'
+        ? META_THEME_COLORS.light
+        : META_THEME_COLORS.dark
+    );
+  }, [resolvedTheme, setTheme, setMetaColor]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('group/toggle size-7', className)}
+      onClick={toggleTheme}
+      {...props}
+    >
+      <SunIcon className="hidden [html.dark_&]:block" />
+      <MoonIcon className="hidden [html.light_&]:block" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

divi-0.0.1.dev17/apps/web/components/responsive-resizable.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@workspace/ui/components/resizable';
+import { useIsMobile } from '@workspace/ui/hooks/use-mobile';
+import type { ReactNode } from 'react';
+
+interface ResponsiveResizableProps {
+  first: ReactNode;
+  second: ReactNode;
+  direction?: 'horizontal' | 'vertical';
+}
+
+export function ResponsiveResizable({
+  first,
+  second,
+  direction,
+}: ResponsiveResizableProps) {
+  const isMobile = useIsMobile();
+  if (isMobile === undefined) {
+    return null;
+  }
+  const _direction = direction ?? (isMobile ? 'vertical' : 'horizontal');
+
+  return (
+    <ResizablePanelGroup direction={_direction}>
+      <ResizablePanel defaultSize={50} minSize={25}>
+        {first}
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>{second}</ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}

{divi-0.0.1.dev15 → divi-0.0.1.dev17}/apps/web/components/site-header.tsx

@@ -1,12 +1,13 @@
 import { SiGithub } from '@icons-pack/react-simple-icons';
 import { SidebarTrigger } from '@workspace/ui/components/sidebar';
+import { ModeSwitcher } from './mode-switcher';
 
 export function SiteHeader() {
   return (
     <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <SidebarTrigger className="-ml-1" />
-        <div className="ml-auto flex items-center gap-2">
+        <div className="ml-auto flex items-center gap-3">
           <a
             href="https://github.com/Kaikaikaifang/divine-agent"
             rel="noreferrer Divine Agent GitHub repository"
@@ -15,6 +16,7 @@ export function SiteHeader() {
           >
             <SiGithub size={18} />
           </a>
+          <ModeSwitcher />
         </div>
       </div>
     </header>

divi-0.0.1.dev17/apps/web/components/trace-board.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import type { ExtendedSpan } from '@/lib/types/span';
+import { useState } from 'react';
+import { ResponsiveResizable } from './responsive-resizable';
+import { TraceWaterfallChart } from './trace-chart';
+
+interface TraceBoardProps {
+  spans: ExtendedSpan[];
+  direction?: 'horizontal' | 'vertical';
+}
+
+export function TraceBoard({ spans, direction }: TraceBoardProps) {
+  const [index, setIndex] = useState<number | undefined>(undefined);
+  const selectAction = (_data: ExtendedSpan, index: number) => {
+    setIndex(index);
+  };
+
+  return (
+    <ResponsiveResizable
+      first={
+        <TraceWaterfallChart
+          activeIndex={index}
+          data={spans}
+          selectAction={selectAction}
+        />
+      }
+      second={
+        <span className="font-semibold">
+          {JSON.stringify(spans[index ?? 0])}
+        </span>
+      }
+      direction={direction}
+    />
+  );
+}