divi 0.0.1.dev19__tar.gz → 0.0.1.dev23__tar.gz

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/PKG-INFO

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

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/graphql/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@apollo/datasource-rest": "^6.4.1",
-    "@apollo/server": "^4.11.3",
+    "@apollo/server": "^4.12.0",
     "@apollo/utils.keyvaluecache": "^3.1.0",
     "graphql": "^16.10.0",
     "graphql-tag": "^2.12.6"

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/graphql/src/datasources/datapark-api.ts

@@ -1,5 +1,5 @@
 import type { FetchResponse } from '@/types/response';
-import type { ChatInput, Span, Trace } from '@/types/types';
+import type { ChatInput, Span, Trace, UsageResult } from '@/types/types';
 import { type AugmentedRequest, RESTDataSource } from '@apollo/datasource-rest';
 import type { KeyValueCache } from '@apollo/utils.keyvaluecache';
 
@@ -35,4 +35,21 @@ export class DataParkAPI extends RESTDataSource {
       `/api/v1/chat/completions/${spanId}/input`
     );
   }
+
+  async getCompletionUsage(
+    startTime: number,
+    endTime: number | undefined,
+    groupBy: string | undefined
+  ) {
+    return await this.get<FetchResponse<UsageResult[]>>(
+      '/api/usage/completions',
+      {
+        params: {
+          start_time: startTime.toString(),
+          end_time: endTime?.toString(),
+          group_by: groupBy,
+        },
+      }
+    );
+  }
 }

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/graphql/src/resolvers.ts

@@ -29,6 +29,19 @@ export const resolvers: Resolvers = {
     chat_input: async (_, { span_id }, { dataSources }) => {
       return (await dataSources.dataparkAPI.getChatInput(span_id)).data;
     },
+    completion_usage: async (
+      _,
+      { start_time, end_time, group_by },
+      { dataSources }
+    ) => {
+      return (
+        await dataSources.dataparkAPI.getCompletionUsage(
+          start_time,
+          end_time ?? undefined,
+          group_by ?? undefined
+        )
+      ).data;
+    },
   },
   Mutation: {
     createAPIKey: async (_, { name }, { dataSources }) => {

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/graphql/src/schema.graphql

@@ -14,6 +14,18 @@ type Query {
   spans(trace_id: ID!): [Span!]
   "Fetch openai input by span id"
   chat_input(span_id: ID!): ChatInput
+  "Fetch completion usages"
+  completion_usage(
+    start_time: Int!
+    end_time: Int
+    group_by: GroupingKey
+  ): [UsageResult!]
+}
+
+"GroupingKey is an enum that represents the key used to group usage results"
+enum GroupingKey {
+  date
+  model
 }
 
 "NullTime is a custom scalar type that represents a time value that can be null"
@@ -54,6 +66,7 @@ type Trace {
   session_id: ID!
 }
 
+"Kind is an enum that represents the type of span"
 enum Kind {
   SPAN_KIND_FUNCTION
   SPAN_KIND_LLM
@@ -91,6 +104,15 @@ type MessageInput {
   name: String
 }
 
+"UsageResult is the result of a usage query"
+type UsageResult {
+  input_tokens: Int!
+  output_tokens: Int!
+  total_tokens: Int!
+  model: String
+  date: Int
+}
+
 "Mutation is a collection of mutations that can be made to the API"
 type Mutation {
   "Auth Mutations"

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/graphql/src/types/types.d.ts

@@ -77,6 +77,12 @@ export type DeleteUserResponse = MutationResponse & {
   success: Scalars['Boolean']['output'];
 };
 
+/** GroupingKey is an enum that represents the key used to group usage results */
+export enum GroupingKey {
+  Date = 'date',
+  Model = 'model'
+}
+
 /** KeyValue is a key-value pair */
 export type KeyValue = {
   __typename?: 'KeyValue';
@@ -84,6 +90,7 @@ export type KeyValue = {
   value: Scalars['String']['output'];
 };
 
+/** Kind is an enum that represents the type of span */
 export enum Kind {
   SpanKindFunction = 'SPAN_KIND_FUNCTION',
   SpanKindLlm = 'SPAN_KIND_LLM'
@@ -190,6 +197,8 @@ export type Query = {
   api_keys?: Maybe<Array<ApiKey>>;
   /** Fetch openai input by span id */
   chat_input?: Maybe<ChatInput>;
+  /** Fetch completion usages */
+  completion_usage?: Maybe<Array<UsageResult>>;
   /** Fetch current user */
   me: User;
   /** Fetch all spans by trace id */
@@ -207,6 +216,14 @@ export type QueryChat_InputArgs = {
 };
 
 
+/** Query is a collection of queries that can be made to the API */
+export type QueryCompletion_UsageArgs = {
+  end_time?: InputMaybe<Scalars['Int']['input']>;
+  group_by?: InputMaybe<GroupingKey>;
+  start_time: Scalars['Int']['input'];
+};
+
+
 /** Query is a collection of queries that can be made to the API */
 export type QuerySpansArgs = {
   trace_id: Scalars['ID']['input'];
@@ -274,6 +291,16 @@ export type UpdateUserResponse = MutationResponse & {
   success: Scalars['Boolean']['output'];
 };
 
+/** UsageResult is the result of a usage query */
+export type UsageResult = {
+  __typename?: 'UsageResult';
+  date?: Maybe<Scalars['Int']['output']>;
+  input_tokens: Scalars['Int']['output'];
+  model?: Maybe<Scalars['String']['output']>;
+  output_tokens: Scalars['Int']['output'];
+  total_tokens: Scalars['Int']['output'];
+};
+
 /** User is a registered user of the application */
 export type User = {
   __typename?: 'User';
@@ -367,6 +394,7 @@ export type ResolversTypes = {
   CreateUserResponse: ResolverTypeWrapper<Omit<CreateUserResponse, 'data'> & { data?: Maybe<ResolversTypes['User']> }>;
   DeleteUserResponse: ResolverTypeWrapper<DeleteUserResponse>;
   Float: ResolverTypeWrapper<Scalars['Float']['output']>;
+  GroupingKey: GroupingKey;
   ID: ResolverTypeWrapper<Scalars['ID']['output']>;
   Int: ResolverTypeWrapper<Scalars['Int']['output']>;
   KeyValue: ResolverTypeWrapper<KeyValue>;
@@ -382,6 +410,7 @@ export type ResolversTypes = {
   Trace: ResolverTypeWrapper<Trace>;
   UpdateAPIKeyResponse: ResolverTypeWrapper<Omit<UpdateApiKeyResponse, 'data'> & { data?: Maybe<ResolversTypes['APIKey']> }>;
   UpdateUserResponse: ResolverTypeWrapper<Omit<UpdateUserResponse, 'data'> & { data?: Maybe<ResolversTypes['User']> }>;
+  UsageResult: ResolverTypeWrapper<UsageResult>;
   User: ResolverTypeWrapper<UserModel>;
 };
 
@@ -409,6 +438,7 @@ export type ResolversParentTypes = {
   Trace: Trace;
   UpdateAPIKeyResponse: Omit<UpdateApiKeyResponse, 'data'> & { data?: Maybe<ResolversParentTypes['APIKey']> };
   UpdateUserResponse: Omit<UpdateUserResponse, 'data'> & { data?: Maybe<ResolversParentTypes['User']> };
+  UsageResult: UsageResult;
   User: UserModel;
 };
 
@@ -504,6 +534,7 @@ export type QueryResolvers<ContextType = DataSourceContext, ParentType extends R
   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'>>;
+  completion_usage?: Resolver<Maybe<Array<ResolversTypes['UsageResult']>>, ParentType, ContextType, RequireFields<QueryCompletion_UsageArgs, 'start_time'>>;
   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'>>;
@@ -555,6 +586,15 @@ export type UpdateUserResponseResolvers<ContextType = DataSourceContext, ParentT
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type UsageResultResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['UsageResult'] = ResolversParentTypes['UsageResult']> = {
+  date?: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  input_tokens?: Resolver<ResolversTypes['Int'], ParentType, ContextType>;
+  model?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  output_tokens?: Resolver<ResolversTypes['Int'], ParentType, ContextType>;
+  total_tokens?: Resolver<ResolversTypes['Int'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type UserResolvers<ContextType = DataSourceContext, ParentType extends ResolversParentTypes['User'] = ResolversParentTypes['User']> = {
   api_keys?: Resolver<Maybe<Array<ResolversTypes['APIKey']>>, ParentType, ContextType>;
   email?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
@@ -582,6 +622,7 @@ export type Resolvers<ContextType = DataSourceContext> = {
   Trace?: TraceResolvers<ContextType>;
   UpdateAPIKeyResponse?: UpdateApiKeyResponseResolvers<ContextType>;
   UpdateUserResponse?: UpdateUserResponseResolvers<ContextType>;
+  UsageResult?: UsageResultResolvers<ContextType>;
   User?: UserResolvers<ContextType>;
 };
 

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/@modal/(.)traces/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { ResponsiveDrawer } from '@/components/Modal';
-import { TraceBoard } from '@/components/trace-board';
+import { TraceBoard } from '@/app/dashboard/traces/(children)/[id]/components/trace-board';
 import { getTraceChartData } from '@/lib/server/span';
 
 interface TraceModalPageProps {

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/api-keys/actions.ts

@@ -13,12 +13,13 @@ import {
 import { GetMyApiKeysDocument } from '@workspace/graphql-client/src/auth/api-keys.generated';
 import type { ApiKey } from '@workspace/graphql-client/src/types.generated';
 import { revalidatePath } from 'next/cache';
+import { cache } from 'react';
 
 /**
  * getAPIKeys action with graphql query
  * @description get current user's API keys
  */
-export async function getAPIKeys() {
+export const getAPIKeys = cache(async () => {
   const context = await getAuthContext();
   if (!context) {
     return null;
@@ -28,7 +29,7 @@ export async function getAPIKeys() {
     context,
   });
   return data?.api_keys;
-}
+});
 
 /**
  * createAPIKey action with graphql mutation

divi-0.0.1.dev23/apps/web/app/dashboard/api-keys/layout.tsx

@@ -0,0 +1,29 @@
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import { Separator } from '@workspace/ui/components/separator';
+import type React from 'react';
+import { CreateDialog } from './components/create-dialog';
+
+interface APIKeysLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function APIKeysLayout({ children }: APIKeysLayoutProps) {
+  return (
+    <div className="h-full space-y-3 overflow-y-auto py-3">
+      <ScrollArea className="max-h-full">
+        <div className="flex items-center justify-between px-6">
+          <h1 className=" text-xl tracking-tight">API Keys</h1>
+          <CreateDialog />
+        </div>
+        <Separator className="my-3" />
+        <div className="px-6">
+          <p className="text-muted-foreground text-sm">
+            As a owner of this account, you can view and manage all API keys in
+            this account.
+          </p>
+          <div className="my-6">{children}</div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard}/components/app-sidebar.tsx

@@ -1,13 +1,9 @@
 'use client';
 
-import { NavMain } from '@/components/nav-main';
-import { NavSecondary } from '@/components/nav-secondary';
-import { NavUser } from '@/components/nav-user';
 import {
   IconBinaryTree,
   IconBook,
   IconCurrencyDollar,
-  IconDashboard,
   IconKey,
   IconSettings,
 } from '@tabler/icons-react';
@@ -23,6 +19,9 @@ import {
 } from '@workspace/ui/components/sidebar';
 import Link from 'next/link';
 import type * as React from 'react';
+import { NavMain } from './nav-main';
+import { NavSecondary } from './nav-secondary';
+import { NavUser } from './nav-user';
 
 const data = {
   user: {
@@ -31,11 +30,11 @@ const data = {
     avatar: '/thinking-angel.png',
   },
   navMain: [
-    {
-      title: 'Overview',
-      url: '/dashboard',
-      icon: IconDashboard,
-    },
+    // {
+    //   title: 'Overview',
+    //   url: '/dashboard',
+    //   icon: IconDashboard,
+    // },
     {
       title: 'Trace',
       url: '/dashboard/traces',
@@ -82,7 +81,7 @@ export function AppSidebar({
               asChild
               className="data-[slot=sidebar-menu-button]:!p-1.5"
             >
-              <Link href="/">
+              <Link href="/home">
                 <span className="text-xl">😇</span>
                 <span className="font-semibold text-base">Divine Agent</span>
               </Link>

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard}/components/nav-secondary.tsx

@@ -1,6 +1,5 @@
 import type { Icon } from '@tabler/icons-react';
 import type * as React from 'react';
-
 import {
   SidebarGroup,
   SidebarGroupContent,
@@ -27,7 +26,7 @@ export function NavSecondary({
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton asChild>
-                <Link href={item.url}>
+                <Link href={item.url} passHref>
                   <item.icon />
                   <span>{item.title}</span>
                 </Link>

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard}/components/nav-user.tsx

@@ -4,7 +4,6 @@ import {
   IconUserCircle,
 } from '@tabler/icons-react';
 import type { User } from '@workspace/graphql-client/src/types.generated';
-
 import {
   Avatar,
   AvatarFallback,

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard}/components/site-header.tsx

@@ -1,6 +1,6 @@
 import { SiGithub } from '@icons-pack/react-simple-icons';
 import { SidebarTrigger } from '@workspace/ui/components/sidebar';
-import { ModeSwitcher } from './mode-switcher';
+import { ModeSwitcher } from '@/components/mode-switcher';
 
 export function SiteHeader() {
   return (

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/layout.tsx

@@ -1,5 +1,5 @@
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
+import { AppSidebar } from './components/app-sidebar';
+import { SiteHeader } from './components/site-header';
 import { getCurrentUser } from '@/lib/server/auth';
 import { deleteSessionTokenCookie } from '@/lib/server/cookies';
 import {
@@ -38,6 +38,7 @@ export default async function DashboardLayout({
   return (
     <SidebarProvider
       defaultOpen={defaultOpen}
+      className="max-h-screen"
       style={
         {
           '--sidebar-width': 'calc(var(--spacing) * 58)',
@@ -47,10 +48,8 @@ export default async function DashboardLayout({
       <AppSidebar variant="inset" user={user} signoutAction={signout} />
       <SidebarInset>
         <SiteHeader />
-        <div className="flex flex-1 flex-col">
-          {modal}
-          {children}
-        </div>
+        {modal}
+        {children}
       </SidebarInset>
     </SidebarProvider>
   );

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/settings/account/page.tsx

@@ -1,4 +1,4 @@
-import { AccountForm } from '@/components/account-form';
+import { AccountForm } from './components/account-form';
 import { getClient } from '@/hooks/apolloClient';
 import { getCurrentUser } from '@/lib/server/auth';
 import { getAuthContext } from '@/lib/server/auth';

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/settings/appearance/page.tsx

@@ -1,4 +1,4 @@
-import { AppearanceForm } from '@/components/appearance-form';
+import { AppearanceForm } from './components/appearance-form';
 import { Separator } from '@workspace/ui/components/separator';
 
 export default function SettingsAppearancePage() {

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard/settings}/components/sidebar-nav.tsx

@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-
 import { buttonVariants } from '@workspace/ui/components/button';
 import { cn } from '@workspace/ui/lib/utils';
 import type React from 'react';

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/settings/layout.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
-
-import { SidebarNav } from '@/components/sidebar-nav';
+import { SidebarNav } from './components/sidebar-nav';
 import { Separator } from '@workspace/ui/components/separator';
 import type React from 'react';
 

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/settings/page.tsx

@@ -1,4 +1,4 @@
-import { ProfileForm } from '@/components/profile-form';
+import { ProfileForm } from './components/profile-form';
 import { getCurrentUser } from '@/lib/server/auth';
 import { Separator } from '@workspace/ui/components/separator';
 

divi-0.0.1.dev23/apps/web/app/dashboard/traces/(children)/[id]/components/Span.tsx

@@ -0,0 +1,161 @@
+import type { ExtendedSpan } from '@/lib/types/span';
+import { formatDate } from '@/lib/utils';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@workspace/ui/components/accordion';
+import { Badge } from '@workspace/ui/components/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@workspace/ui/components/card';
+import { Timer } from 'lucide-react';
+import type * as React from 'react';
+import Highlighter from '@/components/Highter';
+
+interface SpanProps {
+  span: ExtendedSpan;
+}
+
+export function Span({ span }: SpanProps) {
+  const messages = span.input?.messages ?? [];
+  const choices = span.completion?.choices ?? [];
+  return (
+    <>
+      <GeneralInfo span={span} />
+      <Accordion
+        type="multiple"
+        defaultValue={['properties', 'Input', 'Output']}
+      >
+        <AccordionProperties span={span} />
+        <AccordionJsonCards name="Input" datas={messages} />
+        <AccordionJsonCards name="Output" datas={choices} />
+      </Accordion>
+    </>
+  );
+}
+
+function GeneralInfo({ span }: SpanProps) {
+  return (
+    <div className="flex flex-col gap-3 border-b p-4">
+      <div className="flex items-center justify-between text-text-primary">
+        <span className="font-medium">{span.name}</span>
+      </div>
+      <div className="flex gap-3">
+        <Badge variant="secondary">{span.kind}</Badge>
+        <Badge variant="outline">
+          <Timer />
+          {span.duration} ms
+        </Badge>
+      </div>
+    </div>
+  );
+}
+
+function AccordionProperties({ span }: SpanProps) {
+  // TODO select the properties to show
+  const startTime = formatDate(span.start_time);
+  const endTime = formatDate(span.end_time);
+  const usage = span.completion?.usage;
+  // input should pop messages
+  const { messages, ...inputs } = span.input ?? {};
+  // input parameters display standard: key not starting with __ and value not null or undefined
+  const filteredInputs = Object.entries(inputs).filter(
+    ([key, value]) =>
+      value !== null && value !== undefined && !key.startsWith('__')
+  );
+
+  return (
+    <AccordionItem className="px-4" value="properties">
+      <AccordionTrigger className="hover:no-underline">
+        Properties
+      </AccordionTrigger>
+      <AccordionContent>
+        <div className="flex flex-col gap-2">
+          {filteredInputs.length > 0 && (
+            <PropertyCard title="Patameters">
+              {filteredInputs.map(([key, value]) => (
+                <PropertyItem key={key} label={key} value={value} />
+              ))}
+            </PropertyCard>
+          )}
+          {usage && (
+            <PropertyCard title="Usages">
+              <PropertyItem label="Prompt Tokens" value={usage.prompt_tokens} />
+              <PropertyItem
+                label="Completion Tokens"
+                value={usage.completion_tokens}
+              />
+              <PropertyItem label="Total Tokens" value={usage.total_tokens} />
+            </PropertyCard>
+          )}
+          <PropertyCard title="Metadatas">
+            <PropertyItem label="Start Time" value={startTime} />
+            <PropertyItem label="End Time" value={endTime} />
+          </PropertyCard>
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
+function PropertyCard({
+  title,
+  description,
+  children,
+}: { title: string; description?: string; children: React.ReactNode }) {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description && <CardDescription> {description}</CardDescription>}
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">{children}</CardContent>
+    </Card>
+  );
+}
+
+function PropertyItem({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | number | boolean | null;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="text-sm">{label}</span>
+      <span className="truncate font-light text-sm">{String(value)}</span>
+    </div>
+  );
+}
+
+interface AccordionCardsProps<T> {
+  name: string;
+  datas: T[];
+}
+
+function AccordionJsonCards<T>({ name, datas }: AccordionCardsProps<T>) {
+  return (
+    <AccordionItem value={name} className="px-4">
+      <AccordionTrigger className="hover:no-underline">{name}</AccordionTrigger>
+      <AccordionContent className="flex flex-col gap-3">
+        {datas.map((data, index) => (
+          <Card key={index}>
+            <CardContent>
+              <Highlighter
+                content={JSON.stringify(data, null, 2)}
+                language="json"
+              />
+            </CardContent>
+          </Card>
+        ))}
+      </AccordionContent>
+    </AccordionItem>
+  );
+}

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard/traces/(children)/[id]}/components/responsive-resizable.tsx

@@ -5,6 +5,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@workspace/ui/components/resizable';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import { useIsMobile } from '@workspace/ui/hooks/use-mobile';
 import type { ReactNode } from 'react';
 
@@ -28,10 +29,16 @@ export function ResponsiveResizable({
   return (
     <ResizablePanelGroup direction={_direction}>
       <ResizablePanel defaultSize={50} minSize={25}>
-        {first}
+        <div className="h-full overflow-y-auto">
+          <ScrollArea className="max-h-full">{first}</ScrollArea>
+        </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={50}>{second}</ResizablePanel>
+      <ResizablePanel defaultSize={50}>
+        <div className="h-full overflow-y-auto">
+          <ScrollArea className="max-h-full">{second}</ScrollArea>
+        </div>
+      </ResizablePanel>
     </ResizablePanelGroup>
   );
 }

{divi-0.0.1.dev19/apps/web → divi-0.0.1.dev23/apps/web/app/dashboard/traces/(children)/[id]}/components/trace-board.tsx

@@ -2,6 +2,7 @@
 
 import type { ExtendedSpan } from '@/lib/types/span';
 import { useState } from 'react';
+import { Span } from './Span';
 import { ResponsiveResizable } from './responsive-resizable';
 import { TraceWaterfallChart } from './trace-chart';
 
@@ -25,11 +26,7 @@ export function TraceBoard({ spans, direction }: TraceBoardProps) {
           selectAction={selectAction}
         />
       }
-      second={
-        <span className="font-semibold">
-          {JSON.stringify(spans[index ?? 0])}
-        </span>
-      }
+      second={<Span span={spans[index ?? 0]} />}
       direction={direction}
     />
   );

{divi-0.0.1.dev19 → divi-0.0.1.dev23}/apps/web/app/dashboard/traces/(children)/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { TraceBoard } from '@/components/trace-board';
+import { TraceBoard } from './components/trace-board';
 import { getTraceChartData } from '@/lib/server/span';
 
 interface TracePageProps {