@inkeep/agents-manage-ui 0.1.1 → 0.1.3

package/src/components/traces/timeline/timeline-item.tsx

@@ -1,16 +1,26 @@
 import {
+  ArrowRight,
+  ArrowUpRight,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  Database,
+  Hammer,
+  Settings,
+  Sparkles,
+  User,
+} from 'lucide-react';
+import { Streamdown } from 'streamdown';
+import { formatDateTime } from '@/app/utils/format-date';
+import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
+import { Flow } from '@/components/traces/timeline/flow';
+import { TagRow } from '@/components/traces/timeline/tag-row';
+import {
+  ACTIVITY_TYPES,
   type ActivityItem,
   type ActivityKind,
-  ACTIVITY_TYPES,
+  TOOL_TYPES,
 } from '@/components/traces/timeline/types';
-import { User, Settings, Database, Hammer, Sparkles, ArrowRight, ArrowUpRight, ChevronDown, ChevronRight } from 'lucide-react';
-import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
-import { TagRow } from '@/components/traces/timeline/tag-row';
-import { TOOL_TYPES } from '@/components/traces/timeline/types';
-import { CheckCircle } from 'lucide-react';
-import { Flow } from '@/components/traces/timeline/flow';
-import { Streamdown } from 'streamdown';
-import { formatDateTime } from '@/app/utils/format-date';
 
 function truncateWords(s: string, nWords: number) {
   const words = s.split(/\s+/);
@@ -21,8 +31,10 @@ function truncateChars(s: string, n: number) {
 }
 
 function isAiMessage(activity: ActivityItem): boolean {
-  return activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-         activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT;
+  return (
+    activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+    activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+  );
 }
 
 function statusIcon(
@@ -64,12 +76,12 @@ interface TimelineItemProps {
   onToggleAiMessageCollapse?: (activityId: string) => void;
 }
 
-export function TimelineItem({ 
-  activity, 
-  isLast, 
-  onSelect, 
-  isAiMessageCollapsed = false, 
-  onToggleAiMessageCollapse 
+export function TimelineItem({
+  activity,
+  isLast,
+  onSelect,
+  isAiMessageCollapsed = false,
+  onToggleAiMessageCollapse,
 }: TimelineItemProps) {
   const typeForIcon =
     activity.type === ACTIVITY_TYPES.TOOL_CALL && activity.toolType === TOOL_TYPES.TRANSFER
@@ -128,7 +140,7 @@ export function TimelineItem({
                   type="button"
                   onClick={() => onToggleAiMessageCollapse(activity.id)}
                   className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                  title={isAiMessageCollapsed ? "Expand AI response" : "Collapse AI response"}
+                  title={isAiMessageCollapsed ? 'Expand AI response' : 'Collapse AI response'}
                 >
                   {isAiMessageCollapsed ? (
                     <ChevronRight className="h-3 w-3" />
@@ -154,7 +166,11 @@ export function TimelineItem({
                   type="button"
                   onClick={() => onToggleAiMessageCollapse(activity.id)}
                   className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                  title={isAiMessageCollapsed ? "Expand AI streaming response" : "Collapse AI streaming response"}
+                  title={
+                    isAiMessageCollapsed
+                      ? 'Expand AI streaming response'
+                      : 'Collapse AI streaming response'
+                  }
                 >
                   {isAiMessageCollapsed ? (
                     <ChevronRight className="h-3 w-3" />
@@ -165,9 +181,7 @@ export function TimelineItem({
                 </button>
               )}
               {!isAiMessageCollapsed && (
-                <Bubble>
-                  {truncateWords(activity.aiStreamTextContent, 100)}
-                </Bubble>
+                <Bubble>{truncateWords(activity.aiStreamTextContent, 100)}</Bubble>
               )}
             </div>
           )}

package/src/components/traces/timeline/timeline-wrapper.tsx

@@ -1,20 +1,21 @@
+import { AlertTriangle, ChevronDown, ChevronUp, Loader2, RefreshCw } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { StickToBottom } from 'use-stick-to-bottom';
+import { ConversationTracesLink } from '@/components/traces/signoz-link';
+import { ActivityDetailsSidePane } from '@/components/traces/timeline/activity-details-sidepane';
 import { ActivityTimeline } from '@/components/traces/timeline/activity-timeline';
+import { renderPanelContent } from '@/components/traces/timeline/render-panel-content';
 import type {
   ActivityItem,
-  SelectedPanel,
-  PanelType,
   ConversationDetail,
+  PanelType,
+  SelectedPanel,
 } from '@/components/traces/timeline/types';
-import { ActivityDetailsSidePane } from '@/components/traces/timeline/activity-details-sidepane';
-import { ACTIVITY_TYPES } from '@/components/traces/timeline/types';
-import { TOOL_TYPES } from '@/components/traces/timeline/types';
-import { renderPanelContent } from '@/components/traces/timeline/render-panel-content';
-import { StickToBottom } from 'use-stick-to-bottom';
-import { ResizableHandle, ResizablePanel } from '@/components/ui/resizable';
-import { Loader2, ChevronDown, ChevronUp } from 'lucide-react';
-import { ConversationTracesLink } from '@/components/traces/signoz-link';
+import { ACTIVITY_TYPES, TOOL_TYPES } from '@/components/traces/timeline/types';
+import { Alert, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { ResizableHandle, ResizablePanel } from '@/components/ui/resizable';
 
 function panelTitle(selected: SelectedPanel) {
   switch (selected.type) {
@@ -49,9 +50,42 @@ interface TimelineWrapperProps {
   conversation?: ConversationDetail | null;
   enableAutoScroll?: boolean;
   isPolling?: boolean;
+  error?: string | null;
+  retryConnection?: () => void;
+  refreshOnce?: () => Promise<{ hasNewActivity: boolean }>;
+  showConversationTracesLink?: boolean;
 }
 
-function EmptyTimeline({ isPolling }: { isPolling: boolean }) {
+function EmptyTimeline({
+  isPolling,
+  error,
+  retryConnection,
+}: {
+  isPolling: boolean;
+  error?: string | null;
+  retryConnection?: () => void;
+}) {
+  if (error) {
+    return (
+      <div className="flex flex-col gap-4 h-full justify-center items-center px-6">
+        <Alert variant="destructive" className="max-w-md">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>{error}</AlertTitle>
+        </Alert>
+        {retryConnection && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={retryConnection}
+            className="flex items-center gap-2"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Retry Connection
+          </Button>
+        )}
+      </div>
+    );
+  }
   return (
     <div className="flex flex-col gap-2 h-full justify-center items-center">
       {isPolling ? (
@@ -72,13 +106,19 @@ export function TimelineWrapper({
   conversation,
   enableAutoScroll = false,
   isPolling = false,
+  error,
+  retryConnection,
+  refreshOnce,
+  showConversationTracesLink = false,
 }: TimelineWrapperProps) {
   const [selected, setSelected] = useState<SelectedPanel | null>(null);
   const [panelVisible, setPanelVisible] = useState(false);
-  
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   // State for collapsible AI messages
   const [collapsedAiMessages, setCollapsedAiMessages] = useState<Set<string>>(new Set());
-  const [aiMessagesGloballyCollapsed, setAiMessagesGloballyCollapsed] = useState<boolean>(enableAutoScroll);
+  const [aiMessagesGloballyCollapsed, setAiMessagesGloballyCollapsed] =
+    useState<boolean>(enableAutoScroll);
 
   useEffect(() => {
     if (selected) {
@@ -117,12 +157,13 @@ export function TimelineWrapper({
   // Initialize AI messages based on view type when activities change
   useEffect(() => {
     const aiMessageIds = sortedActivities
-      .filter(activity => 
-        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      .filter(
+        (activity) =>
+          activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+          activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
       )
-      .map(activity => activity.id);
-    
+      .map((activity) => activity.id);
+
     if (enableAutoScroll) {
       // Live trace view: default collapsed
       setCollapsedAiMessages(new Set(aiMessageIds));
@@ -133,7 +174,7 @@ export function TimelineWrapper({
       setAiMessagesGloballyCollapsed(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortedActivities.length, enableAutoScroll]); // Run when activities count or view type changes
+  }, [sortedActivities.length, enableAutoScroll]); //  Run when activities count or view type changes
 
   // Functions to handle expand/collapse all
   const expandAllAiMessages = () => {
@@ -143,11 +184,12 @@ export function TimelineWrapper({
 
   const collapseAllAiMessages = () => {
     const aiMessageIds = sortedActivities
-      .filter(activity => 
-        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      .filter(
+        (activity) =>
+          activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+          activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
       )
-      .map(activity => activity.id);
+      .map((activity) => activity.id);
     setCollapsedAiMessages(new Set(aiMessageIds));
     setAiMessagesGloballyCollapsed(true);
   };
@@ -160,15 +202,16 @@ export function TimelineWrapper({
       newCollapsed.add(activityId);
     }
     setCollapsedAiMessages(newCollapsed);
-    
+
     // Update global state based on current state
     const aiMessageIds = sortedActivities
-      .filter(activity => 
-        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      .filter(
+        (activity) =>
+          activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+          activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
       )
-      .map(activity => activity.id);
-    const allCollapsed = aiMessageIds.every(id => newCollapsed.has(id));
+      .map((activity) => activity.id);
+    const allCollapsed = aiMessageIds.every((id) => newCollapsed.has(id));
     setAiMessagesGloballyCollapsed(allCollapsed);
   };
 
@@ -183,7 +226,8 @@ export function TimelineWrapper({
     );
 
   const determinePanelType = (a: ActivityItem): Exclude<PanelType, 'mcp_tool_error'> => {
-    if (a.type === ACTIVITY_TYPES.TOOL_CALL && a.toolType === TOOL_TYPES.TRANSFER) return 'transfer';
+    if (a.type === ACTIVITY_TYPES.TOOL_CALL && a.toolType === TOOL_TYPES.TRANSFER)
+      return 'transfer';
     if (a.type === ACTIVITY_TYPES.TOOL_CALL && a.toolName?.includes('delegate'))
       return 'delegation';
     if (
@@ -196,6 +240,21 @@ export function TimelineWrapper({
     return a.type;
   };
 
+  const handleRefresh = async () => {
+    if (!refreshOnce || isRefreshing) return;
+    setIsRefreshing(true);
+    try {
+      const result = await refreshOnce();
+      if (!result.hasNewActivity) {
+        toast.info('No new activity found');
+      }
+      setIsRefreshing(false);
+    } catch {
+      toast.error('Failed to refresh activities');
+      setIsRefreshing(false);
+    }
+  };
+
   return (
     <>
       <ResizablePanel order={2}>
@@ -205,17 +264,24 @@ export function TimelineWrapper({
               <div className="text-foreground text-md font-medium">Activity Timeline</div>
               <div className="flex items-center gap-2">
                 {/* Expand/Collapse AI Messages Buttons */}
-                {sortedActivities.some(activity => 
-                  activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-                  activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+                {sortedActivities.some(
+                  (activity) =>
+                    activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+                    activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
                 ) && (
                   <div className="flex items-center gap-1">
                     <Button
                       variant="ghost"
                       size="sm"
-                      onClick={aiMessagesGloballyCollapsed ? expandAllAiMessages : collapseAllAiMessages}
+                      onClick={
+                        aiMessagesGloballyCollapsed ? expandAllAiMessages : collapseAllAiMessages
+                      }
                       className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
-                      title={aiMessagesGloballyCollapsed ? "Expand all AI messages" : "Collapse all AI messages"}
+                      title={
+                        aiMessagesGloballyCollapsed
+                          ? 'Expand all AI messages'
+                          : 'Collapse all AI messages'
+                      }
                     >
                       {aiMessagesGloballyCollapsed ? (
                         <>
@@ -231,7 +297,7 @@ export function TimelineWrapper({
                     </Button>
                   </div>
                 )}
-                {conversation?.conversationId && (
+                {showConversationTracesLink && conversation?.conversationId && (
                   <ConversationTracesLink conversationId={conversation.conversationId} />
                 )}
               </div>
@@ -239,7 +305,11 @@ export function TimelineWrapper({
           </div>
           <div className="p-0 flex-1 min-h-0">
             {sortedActivities.length === 0 ? (
-              <EmptyTimeline isPolling={isPolling} />
+              <EmptyTimeline
+                isPolling={isPolling}
+                error={error}
+                retryConnection={retryConnection}
+              />
             ) : enableAutoScroll ? (
               <StickToBottom
                 className="h-full [&>div]:overflow-y-auto [&>div]:scrollbar-thin [&>div]:scrollbar-thumb-muted-foreground/30 [&>div]:scrollbar-track-transparent dark:[&>div]:scrollbar-thumb-muted-foreground/50"
@@ -255,6 +325,24 @@ export function TimelineWrapper({
                     collapsedAiMessages={collapsedAiMessages}
                     onToggleAiMessageCollapse={toggleAiMessageCollapse}
                   />
+                  {!isPolling && sortedActivities.length > 0 && !error && refreshOnce && (
+                    <div className="flex justify-center items-center z-10">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={handleRefresh}
+                        disabled={isRefreshing}
+                        className=" text-xs bg-background/80 backdrop-blur-sm  hover:bg-background/90 transition-all duration-200 opacity-70 hover:opacity-100"
+                      >
+                        {isRefreshing ? (
+                          <Loader2 className="h-3 w-3 mr-1.5 animate-spin" />
+                        ) : (
+                          <RefreshCw className="h-3 w-3 mr-1.5" />
+                        )}
+                        {isRefreshing ? 'Refreshing...' : 'Refresh'}
+                      </Button>
+                    </div>
+                  )}
                 </StickToBottom.Content>
               </StickToBottom>
             ) : (

package/src/components/traces/traces-overview.tsx

@@ -26,10 +26,10 @@ import {
 import { useAggregateStats, useConversationStats } from '@/hooks/use-traces';
 import { type TimeRange, useTracesQueryState } from '@/hooks/use-traces-query-state';
 import { getSigNozStatsClient, type SpanFilterOptions } from '@/lib/api/signoz-stats';
-import { ConversationStatsCard } from './conversation-stats/conversation-stats-card';
-import { StatCard } from './charts/stat-card';
 import { AreaChartCard } from './charts/area-chart-card';
-import { DatePickerWithPresets, CUSTOM } from './filters/date-picker';
+import { StatCard } from './charts/stat-card';
+import { ConversationStatsCard } from './conversation-stats/conversation-stats-card';
+import { CUSTOM, DatePickerWithPresets } from './filters/date-picker';
 import { GraphFilter } from './filters/graph-filter';
 
 // Time range options

package/src/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/calendar.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import * as React from 'react';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { type DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 import { Button, buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 
 function Calendar({
   className,

package/src/components/ui/external-link.tsx

@@ -10,13 +10,13 @@ export function ExternalLink({ href, children, ...props }: ComponentProps<typeof
       target="_blank"
       rel="noreferrer noopener"
       className={cn(
-        'text-sm text-muted-foreground underline underline-offset-2 inline-flex items-center gap-1 hover:text-primary ml-1 group font-mono',
+        'text-sm text-muted-foreground underline underline-offset-2 inline-flex items-center gap-1 hover:text-primary ml-1 group/link font-mono uppercase transition-colors',
         props.className
       )}
       {...props}
     >
       {children}
-      <ArrowUpRight className="size-3.5 text-muted-foreground/60 group-hover:text-primary" />
+      <ArrowUpRight className="size-3.5 text-muted-foreground/60 group-hover/link:text-primary" />
     </Link>
   );
 }

package/src/components/ui/form.tsx

@@ -78,17 +78,24 @@ function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({
+  className,
+  isRequired,
+  children,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> & { isRequired?: boolean }) {
   const { error, formItemId } = useFormField();
-
   return (
     <Label
       data-slot="form-label"
       data-error={!!error}
-      className={cn('data-[error=true]:text-destructive', className)}
+      className={cn('data-[error=true]:text-destructive gap-1', className)}
       htmlFor={formItemId}
       {...props}
-    />
+    >
+      {children}
+      {isRequired && <span className="text-red-500">*</span>}
+    </Label>
   );
 }
 

package/src/components/ui/inheritance-indicator.tsx

@@ -2,12 +2,7 @@
 
 import { ArrowDown, Check, Info } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
-import { 
-  Tooltip, 
-  TooltipContent, 
-  TooltipProvider, 
-  TooltipTrigger 
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export interface InheritanceIndicatorProps {
   /** Whether this value is explicitly set (not inherited) */
@@ -34,8 +29,8 @@ export function InheritanceIndicator({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Badge 
-              variant="outline" 
+            <Badge
+              variant="outline"
               className={`
                 ${size === 'sm' ? 'h-5 px-1.5 text-xs' : 'h-6 px-2 text-sm'}
                 ${position === 'absolute' ? 'absolute -top-2 -right-2' : 'inline-flex'}
@@ -60,8 +55,8 @@ export function InheritanceIndicator({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Badge 
-              variant="outline" 
+            <Badge
+              variant="outline"
               className={`
                 ${size === 'sm' ? 'h-5 px-1.5 text-xs' : 'h-6 px-2 text-sm'}
                 ${position === 'absolute' ? 'absolute -top-2 -right-2' : 'inline-flex'}
@@ -86,8 +81,8 @@ export function InheritanceIndicator({
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Badge 
-            variant="outline" 
+          <Badge
+            variant="outline"
             className={`
               ${size === 'sm' ? 'h-5 px-1.5 text-xs' : 'h-6 px-2 text-sm'}
               ${position === 'absolute' ? 'absolute -top-2 -right-2' : 'inline-flex'}
@@ -118,9 +113,11 @@ export function getModelInheritanceStatus(
   inheritedFrom?: string;
   tooltip?: string;
 } {
-  const hasCurrentValue = currentValue !== undefined && currentValue !== null && currentValue !== '';
+  const hasCurrentValue =
+    currentValue !== undefined && currentValue !== null && currentValue !== '';
   const hasParentValue = parentValue !== undefined && parentValue !== null && parentValue !== '';
-  const hasGrandparentValue = grandparentValue !== undefined && grandparentValue !== null && grandparentValue !== '';
+  const hasGrandparentValue =
+    grandparentValue !== undefined && grandparentValue !== null && grandparentValue !== '';
 
   // For non-project levels: if current value matches parent value exactly, it's likely inherited
   // This handles the case where the builder resolves inheritance and stores the actual values
@@ -133,9 +130,15 @@ export function getModelInheritanceStatus(
         tooltip: `This model is inherited from the ${inheritedFromLevel.toLowerCase()} level`,
       };
     }
-    
+
     // For agent level: also check if it matches grandparent (when graph doesn't have it set)
-    if (currentLevel === 'agent' && hasCurrentValue && !hasParentValue && hasGrandparentValue && currentValue === grandparentValue) {
+    if (
+      currentLevel === 'agent' &&
+      hasCurrentValue &&
+      !hasParentValue &&
+      hasGrandparentValue &&
+      currentValue === grandparentValue
+    ) {
       return {
         isExplicit: false,
         inheritedFrom: 'Project',
@@ -261,4 +264,4 @@ export function getExecutionLimitInheritanceStatus(
     isExplicit: false,
     tooltip: `Using system default (${defaultValue})`,
   };
-}
+}

package/src/components/ui/resizable.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVerticalIcon } from 'lucide-react';
+import type * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function ResizablePanelGroup({
   className,
@@ -13,19 +13,14 @@ function ResizablePanelGroup({
   return (
     <ResizablePrimitive.PanelGroup
       data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
+      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -33,13 +28,13 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
         className
       )}
       {...props}
@@ -50,7 +45,7 @@ function ResizableHandle({
         </div>
       )}
     </ResizablePrimitive.PanelResizeHandle>
-  )
+  );
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };