@inkeep/agents-manage-ui 0.1.0

package/src/components/traces/filters/date-picker.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import type { SelectOption } from '@/components/form/generic-select';
+import { FilterTriggerComponent } from './filter-trigger';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
+import { Popover, PopoverContent } from '@/components/ui/popover';
+import { useDisclosure } from '@/hooks/use-disclosure';
+import { cn } from '@/lib/utils';
+import { format } from 'date-fns';
+import { Check } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
+import type { DateRange } from 'react-day-picker';
+import type { TimeRange } from '@/hooks/use-traces-query-state';
+
+interface DatePickerWithPresetsProps {
+  label: string;
+  value?: TimeRange | { from: string; to: string } | undefined;
+  onAdd: (value: TimeRange) => void;
+  onRemove: () => void;
+  disabled?: boolean;
+  options?: SelectOption[];
+  setCustomDateRange: (start: string, end: string) => void;
+}
+
+export const CUSTOM = 'custom';
+
+export function DatePickerWithPresets({
+  onAdd,
+  onRemove,
+  value,
+  options = [],
+  disabled,
+  label,
+  setCustomDateRange,
+}: DatePickerWithPresetsProps) {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const { isOpen, onClose, onToggle } = useDisclosure();
+
+  const commandRef = useRef<HTMLDivElement>(null);
+
+  const handleChangeOnOpen = () => {
+    onToggle();
+  };
+
+  const presetValue = options.find((option) => option.value === value);
+
+  // Memoize only the expensive date formatting operations
+  const dateComputations = useMemo(() => {
+    if (!value || typeof value !== 'object') {
+      return { initialDate: undefined, dateFormattedValue: undefined };
+    }
+
+    const initialDate: DateRange = {
+      from: value.from ? new Date(value.from) : undefined,
+      to: value.to ? new Date(value.to) : undefined,
+    };
+
+    const dateFormattedValue = value.from
+      ? value.to
+        ? `${format(new Date(value.from), 'LLL dd, y')} - ${format(new Date(value.to), 'LLL dd, y')}`
+        : format(new Date(value.from), 'LLL dd, y')
+      : undefined;
+
+    return { initialDate, dateFormattedValue };
+  }, [value]);
+
+  // Combine preset and date values (preset lookup is cheap, no need to memoize)
+  const initialDate = dateComputations.initialDate;
+  const formattedValue = presetValue?.value || dateComputations.dateFormattedValue;
+
+  const [date, setDate] = useState<DateRange | undefined>(initialDate);
+
+  return (
+    <Popover onOpenChange={handleChangeOnOpen} open={isOpen}>
+      <FilterTriggerComponent
+        disabled={disabled}
+        filterLabel={label}
+        multipleCheckboxValues={formattedValue ? [formattedValue] : []}
+        onDeleteFilter={() => {
+          onRemove();
+          setDate(undefined);
+        }}
+        options={options}
+        isRemovable={false}
+      />
+
+      <PopoverContent align="start" className="flex min-w-[250px] p-0 w-auto flex-col space-y-2">
+        {showCalendar ? (
+          <div className="flex flex-col gap-2 p-2">
+            <div className="border-b ">
+              <Calendar
+                defaultMonth={date?.from}
+                initialFocus
+                mode="range"
+                numberOfMonths={2}
+                onSelect={(val) => {
+                  setDate(val);
+                }}
+                selected={date}
+                disabled={{ after: new Date() }}
+              />
+            </div>
+            <div className="flex justify-end gap-2 py-2 px-3">
+              <Button
+                onClick={() => {
+                  setShowCalendar(false);
+                }}
+                size="sm"
+                variant="outline"
+              >
+                Back
+              </Button>
+              <Button
+                onClick={() => {
+                  if (date?.from) {
+                    onAdd(CUSTOM);
+                    setCustomDateRange(date.from.toISOString(), date.to?.toISOString() || '');
+                  } else {
+                    onRemove();
+                  }
+                  onClose();
+                }}
+                size="sm"
+                variant="default"
+              >
+                Apply
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Command ref={commandRef}>
+            <CommandList
+              style={{
+                scrollbarColor: '#E4E4E7 transparent',
+                scrollbarWidth: 'thin',
+              }}
+            >
+              <CommandGroup>
+                {[...options, { label: 'Custom', value: CUSTOM }].map((option) => (
+                  <CommandItem
+                    className={cn('cursor-pointer', 'flex items-center justify-between')}
+                    key={option.value}
+                    onSelect={(value) => {
+                      if (value === CUSTOM) {
+                        setShowCalendar(true);
+                      } else {
+                        setDate(undefined);
+                        onAdd(value as TimeRange);
+                        setCustomDateRange('', '');
+                        onClose();
+                      }
+                    }}
+                    value={option.value}
+                  >
+                    {option.label}
+                    <Check
+                      className={cn(
+                        'ml-2 h-4 w-4 text-gray-400 dark:text-white/50',
+                        value === option.value ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/traces/filters/filter-trigger.tsx

@@ -0,0 +1,92 @@
+import { ChevronDown, type LucideIcon, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { PopoverTrigger } from '@/components/ui/popover';
+import type { OptionType } from '@/components/ui/combobox';
+
+interface FilterTriggerComponentProps {
+  Icon?: LucideIcon;
+  options: OptionType[];
+  filterLabel: string;
+  pluralFilterLabel?: string;
+  multipleCheckboxValues: string[];
+  onDeleteFilter: () => void;
+  disabled?: boolean;
+  isRemovable?: boolean;
+  hideFilterLabelWhenSelected?: boolean;
+}
+
+export function FilterTriggerComponent({
+  Icon,
+  options,
+  filterLabel,
+  pluralFilterLabel,
+  multipleCheckboxValues,
+  onDeleteFilter,
+  disabled,
+  isRemovable = true,
+  hideFilterLabelWhenSelected = false,
+}: FilterTriggerComponentProps) {
+  const countMultipleFilterValues = multipleCheckboxValues.length;
+  const isShowSelectedOptions = !!countMultipleFilterValues;
+
+  const firstSelectedOptionValue = countMultipleFilterValues && multipleCheckboxValues[0];
+  const firstSelectedOptionLabel =
+    options.find((option) => option.value === firstSelectedOptionValue)?.label ||
+    firstSelectedOptionValue;
+
+  const isShowOneSelectedOption = countMultipleFilterValues === 1;
+
+  return (
+    <div className="flex items-center max-w-full">
+      <PopoverTrigger asChild>
+        <Button
+          className={`flex items-center gap-2 justify-between focus:ring-0 ${isShowSelectedOptions && isRemovable && 'rounded-tr-none rounded-br-none '}  max-w-full min-w-0`}
+          disabled={disabled}
+          size="sm"
+          variant="gray-outline"
+        >
+          {hideFilterLabelWhenSelected && isShowSelectedOptions ? null : (
+            <div className="flex items-center gap-2">
+              {Icon && <Icon className="h-4 w-4 text-gray-400 dark:text-white/50" />}
+              {filterLabel}
+            </div>
+          )}
+          {isShowSelectedOptions &&
+            (isShowOneSelectedOption ? (
+              <div className="flex items-center gap-2 truncate">
+                {!hideFilterLabelWhenSelected && (
+                  <p className="text-gray-400 dark:text-white/50">is</p>
+                )}
+                {firstSelectedOptionLabel}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 truncate">
+                {Icon && <Icon className="h-4 w-4 text-gray-400 dark:text-white/50" />}
+                <p className="text-gray-500">
+                  {!hideFilterLabelWhenSelected && (
+                    <p className="text-gray-400 dark:text-white/50">is any of</p>
+                  )}
+                  {countMultipleFilterValues} {pluralFilterLabel || filterLabel}
+                </p>
+              </div>
+            ))}
+          <ChevronDown
+            className="mt-[2.5px] text-gray-400 dark:text-white/50"
+            height={14}
+            width={14}
+          />
+        </Button>
+      </PopoverTrigger>
+      {isShowSelectedOptions && isRemovable && (
+        <Button
+          className="flex items-center gap-2 justify-between h-[32px] !p-2 border-[1px] border-solid border-l-0 rounded-tl-none rounded-bl-none bg-background focus:ring-0"
+          onClick={onDeleteFilter}
+          variant="ghost"
+        >
+          <span className="sr-only">remove filter</span>
+          <X className="text-gray-400 dark:text-white/50" />
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/traces/filters/graph-filter.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { getAllGraphsAction } from '@/lib/actions/graph-full';
+import { Combobox } from '@/components/ui/combobox';
+import { FilterTriggerComponent } from './filter-trigger';
+import type { OptionType } from '@/components/ui/combobox';
+
+interface GraphFilterProps {
+  onSelect: (value: string | undefined) => void;
+  selectedValue: string | undefined;
+}
+
+export const GraphFilter = ({ onSelect, selectedValue }: GraphFilterProps) => {
+  const { tenantId, projectId } = useParams() as { tenantId: string; projectId: string };
+  const [graphOptions, setGraphOptions] = useState<OptionType[]>([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    const fetchGraphs = async () => {
+      try {
+        setLoading(true);
+        const response = await getAllGraphsAction(tenantId, projectId);
+        if (!cancelled && response.success) {
+          setGraphOptions(
+            response.data?.map((graph) => ({
+              value: graph.id,
+              label: graph.name,
+              searchBy: graph.name,
+            })) || []
+          );
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.error('Failed to fetch graphs:', error);
+          setGraphOptions([]);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    fetchGraphs();
+    return () => {
+      cancelled = true;
+    };
+  }, [tenantId, projectId]);
+  return (
+    <Combobox
+      defaultValue={selectedValue}
+      notFoundMessage={'No graphs found'}
+      onSelect={(value) => {
+        onSelect(value);
+      }}
+      options={graphOptions}
+      TriggerComponent={
+        <FilterTriggerComponent
+          disabled={loading}
+          filterLabel={'Graph'}
+          isRemovable={true}
+          onDeleteFilter={() => {
+            onSelect(undefined);
+          }}
+          multipleCheckboxValues={selectedValue ? [selectedValue] : []}
+          options={graphOptions}
+        />
+      }
+    />
+  );
+};

package/src/components/traces/signoz-link.tsx

@@ -0,0 +1,152 @@
+import { ExternalLink } from '../ui/external-link';
+
+const SIGNOZ_BASE = process.env.NEXT_PUBLIC_SIGNOZ_URL ?? 'http://localhost:3080';
+
+function makeTracesUrl(conversationId: string, relativeTime = '2months') {
+  const compositeQuery = {
+    queryType: 'builder',
+    builder: {
+      queryData: [
+        {
+          dataSource: 'traces',
+          queryName: 'A',
+          aggregateOperator: 'noop',
+          aggregateAttribute: {
+            id: 'false',
+            dataType: '',
+            key: '',
+            isColumn: false,
+            type: '',
+            isJSON: false,
+          },
+          timeAggregation: 'rate',
+          spaceAggregation: 'sum',
+          functions: [],
+          filters: {
+            op: 'AND',
+            items: [
+              {
+                key: {
+                  key: 'conversation.id',
+                  dataType: 'string',
+                  type: 'tag',
+                  isColumn: false,
+                  isJSON: false,
+                  id: 'false',
+                },
+                op: '=',
+                value: conversationId,
+              },
+            ],
+          },
+          expression: 'A',
+          disabled: false,
+          stepInterval: 60,
+          having: [],
+          limit: null,
+          orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+          groupBy: [],
+          legend: '',
+          reduceTo: 'avg',
+        },
+      ],
+      queryFormulas: [],
+      promql: [{ name: 'A', query: '', legend: '', disabled: false }],
+      clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
+    },
+  };
+
+  const options = {
+    selectColumns: [
+      {
+        key: 'serviceName',
+        dataType: 'string',
+        type: 'tag',
+        isColumn: true,
+        isJSON: false,
+        id: 'serviceName--string--tag--true',
+        isIndexed: false,
+      },
+      {
+        key: 'name',
+        dataType: 'string',
+        type: 'tag',
+        isColumn: true,
+        isJSON: false,
+        id: 'name--string--tag--true',
+        isIndexed: false,
+      },
+      {
+        key: 'durationNano',
+        dataType: 'float64',
+        type: 'tag',
+        isColumn: true,
+        isJSON: false,
+        id: 'durationNano--float64--tag--true',
+        isIndexed: false,
+      },
+      {
+        key: 'httpMethod',
+        dataType: 'string',
+        type: 'tag',
+        isColumn: true,
+        isJSON: false,
+        id: 'httpMethod--string--tag--true',
+        isIndexed: false,
+      },
+      {
+        key: 'responseStatusCode',
+        dataType: 'string',
+        type: 'tag',
+        isColumn: true,
+        isJSON: false,
+        id: 'responseStatusCode--string--tag--true',
+        isIndexed: false,
+      },
+    ],
+    maxLines: 2,
+    format: 'raw',
+    fontSize: 'small',
+  };
+
+  const params = new URLSearchParams();
+  params.set('compositeQuery', JSON.stringify(compositeQuery));
+  params.set('options', JSON.stringify(options));
+  params.set('pagination', JSON.stringify({ limit: 10, offset: 0 }));
+  params.set('panelTypes', '"trace"');
+  params.set('viewName', '""');
+  params.set('viewKey', '""');
+  params.set('relativeTime', relativeTime);
+
+  return `${SIGNOZ_BASE}/traces-explorer?${params.toString()}`;
+}
+
+function makeSpanUrl(traceId: string, spanId: string) {
+  return `${SIGNOZ_BASE}/trace/${traceId}?spanId=${spanId}`;
+}
+
+interface SignozLinkProps {
+  conversationId: string;
+}
+
+interface SignozSpanLinkProps {
+  traceId: string;
+  spanId: string;
+}
+
+export function SignozLink({ conversationId }: SignozLinkProps) {
+  return <ExternalLink href={makeTracesUrl(conversationId)}>View in SigNoz</ExternalLink>;
+}
+
+export function SignozSpanLink({ traceId, spanId }: SignozSpanLinkProps) {
+  return <ExternalLink href={makeSpanUrl(traceId, spanId)}>View in SigNoz</ExternalLink>;
+}
+
+interface ConversationTracesLinkProps {
+  conversationId: string;
+}
+
+export function ConversationTracesLink({ conversationId }: ConversationTracesLinkProps) {
+  const tracesUrl = `http://localhost:3000/inkeep/projects/default/traces/conversations/${conversationId}`;
+  return <ExternalLink href={tracesUrl}>View Conversation Traces</ExternalLink>;
+}

package/src/components/traces/timeline/activity-details-sidepane.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/button';
+import { X } from 'lucide-react';
+
+export function ActivityDetailsSidePane({
+  title,
+  children,
+  open,
+  onClose,
+}: {
+  title: string;
+  children: React.ReactNode;
+  open: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      className={`bg-background h-full flex flex-col py-4 transform transition-transform duration-300 ease-out ${
+        open ? 'translate-x-0' : 'translate-x-full'
+      }`}
+    >
+      <div className="flex-shrink-0">
+        <div className="text-foreground text-md font-medium px-6 pb-4 flex items-center justify-between">
+          <h3 className="text-md font-medium text-foreground">{title}</h3>
+          <Button variant="ghost" size="icon-sm" onClick={onClose} className=" p-0">
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      <div className="pt-2 px-6 pb-6 flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent dark:scrollbar-thumb-muted-foreground/50">
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+import type { ActivityItem } from '@/components/traces/timeline/types';
+import { TimelineItem } from '@/components/traces/timeline/timeline-item';
+
+export function ActivityTimeline({
+  activities,
+  onSelect,
+  collapsedAiMessages,
+  onToggleAiMessageCollapse,
+}: {
+  activities: ActivityItem[];
+  onSelect: (a: ActivityItem) => void;
+  collapsedAiMessages?: Set<string>;
+  onToggleAiMessageCollapse?: (activityId: string) => void;
+}) {
+  return (
+    <div className="pt-2 px-6 pb-6">
+      <div className="relative grid gap-8">
+        {activities.map((activity, index) => (
+          <TimelineItem
+            key={`${activity.id}-${activity.type}-${index}`}
+            activity={activity}
+            isLast={index === activities.length - 1}
+            onSelect={() => onSelect(activity)}
+            isAiMessageCollapsed={collapsedAiMessages?.has(activity.id) || false}
+            onToggleAiMessageCollapse={onToggleAiMessageCollapse}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/traces/timeline/blocks.tsx

@@ -0,0 +1,66 @@
+import { Badge } from '@/components/ui/badge';
+import type { ActivityItem } from './types';
+import { AnthropicIcon } from '@/components/icons/anthropic';
+import { OpenAIIcon } from '@/components/icons/openai';
+
+export function LabeledBlock({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <span className="text-sm font-medium text-foreground">{label}</span>
+      <div className="mt-1">{children}</div>
+    </div>
+  );
+}
+
+export function Section({ children }: { children: React.ReactNode }) {
+  return <div className="space-y-6">{children}</div>;
+}
+
+export function Divider() {
+  return <div className="mt-6 border-t border-border pt-4" />;
+}
+
+export function Info({ label, value }: { label: string; value?: React.ReactNode }) {
+  return (
+    <div>
+      <div className="text-sm font-medium text-foreground">{label}</div>
+      <p className="text-sm text-foreground mt-1">{value ?? '-'}</p>
+    </div>
+  );
+}
+
+export function StatusBadge({ status }: { status: ActivityItem['status'] }) {
+  console.log(status);
+  return (
+    <div>
+      <span className="text-sm font-medium text-foreground">Status</span>
+      <div className="mt-1">
+        <Badge className="uppercase" variant={status === 'success' ? 'primary' : 'error'}>
+          {status}
+        </Badge>
+      </div>
+    </div>
+  );
+}
+
+export function InfoRow({ label, value }: { label: string; value?: string | number }) {
+  return (
+    <div className="flex justify-between text-xs">
+      <span className="text-muted-foreground">{label}:</span>
+      <span className="font-mono font-medium text-foreground">{value ?? '-'}</span>
+    </div>
+  );
+}
+
+export function ModelBadge({ model }: { model: string }) {
+  return (
+    <Badge className="text-xs max-w-full flex-1" variant="code">
+      {model?.startsWith('gpt-') ? (
+        <OpenAIIcon className="size-3 text-xs text-muted-foreground flex-shrink-0" />
+      ) : model?.startsWith('claude-') ? (
+        <AnthropicIcon className="size-3 text-xs flex-shrink-0" />
+      ) : null}
+      <div className="truncate w-full">{model}</div>
+    </Badge>
+  );
+}

package/src/components/traces/timeline/bubble.tsx

@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils';
+
+export function Bubble({
+  className,
+  children,
+  onClick,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        // `mt-2 py-3 px-4 border text-foreground rounded-lg max-w-full text-sm`,
+        'text-sm text-gray-600 dark:text-white/60 my-2',
+        className
+      )}
+      // onClick={onClick}
+      // role={onClick ? 'button' : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CodeBubble({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'text-xs text-muted-foreground border bg-muted/80 dark:bg-muted/50 rounded-sm p-0.5 px-1.5 font-mono',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/traces/timeline/flow.tsx

@@ -0,0 +1,16 @@
+import { ArrowRight } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+export function Flow({ from, to }: { from: string; to: string }) {
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <Badge variant="code" className=" ">
+        {from}
+      </Badge>
+      <ArrowRight className="h-4 w-4 " />
+      <Badge variant="code" className=" ">
+        {to}
+      </Badge>
+    </div>
+  );
+}