@llamaindex/workflow-debugger 0.1.9 → 0.2.0

package/src/components/json-schema-editor.tsx

@@ -0,0 +1,291 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Input,
+  Textarea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@llamaindex/ui";
+import type { JSONValue } from "./workflow-config-panel";
+
+export interface SimpleSchemaProperty {
+  type?: string;
+  title?: string;
+  description?: string;
+}
+
+export interface SimpleSchema {
+  properties?: Record<string, SimpleSchemaProperty>;
+  required?: string[];
+}
+
+export interface JsonSchemaEditorProps {
+  schema: SimpleSchema | null;
+  values: Record<string, JSONValue>;
+  onChange: (values: Record<string, JSONValue>) => void;
+  onErrorsChange?: (errors: Record<string, string | null>) => void;
+  className?: string;
+}
+
+function isComplexType(type?: string): boolean {
+  if (!type) return false;
+  const lower = type.toLowerCase();
+  return (
+    lower.includes("object") ||
+    lower.includes("array") ||
+    lower.includes("map") ||
+    lower.includes("dict") ||
+    /\w+\s*\[.*\]/.test(type)
+  );
+}
+
+function getTypeHintAndPlaceholder(type?: string): {
+  hint: string;
+  placeholder: string;
+} {
+  const lower = (type || "").toLowerCase();
+  const looksLikeArray =
+    lower.includes("array") ||
+    lower.includes("list") ||
+    /\w+\s*\[.*\]/.test(type || "");
+  const looksLikeObject =
+    lower.includes("object") || lower.includes("map") || lower.includes("dict");
+  if (looksLikeArray) {
+    return {
+      hint: 'Expected: JSON array (e.g., ["a", "b"])',
+      placeholder: '["item1", "item2"]',
+    };
+  }
+  if (looksLikeObject) {
+    return {
+      hint: 'Expected: JSON object (e.g., {"key": "value"})',
+      placeholder: '{"key": "value"}',
+    };
+  }
+  return {
+    hint: "Expected: valid JSON (object or array)",
+    placeholder: "Enter value as JSON",
+  };
+}
+
+export function JsonSchemaEditor({
+  schema,
+  values,
+  onChange,
+  onErrorsChange,
+  className,
+}: JsonSchemaEditorProps) {
+  const properties = schema?.properties || {};
+  const required = new Set(schema?.required || []);
+
+  const [rawJsonValues, setRawJsonValues] = useState<Record<string, string>>(
+    {},
+  );
+  const [rawJsonErrors, setRawJsonErrors] = useState<
+    Record<string, string | null>
+  >({});
+
+  useEffect(() => {
+    onErrorsChange?.(rawJsonErrors);
+  }, [rawJsonErrors, onErrorsChange]);
+
+  // Initialize raw values for complex fields when schema or values change
+  useEffect(() => {
+    const nextRaw: Record<string, string> = { ...rawJsonValues };
+    for (const [key, def] of Object.entries(properties)) {
+      if (!isComplexType(def.type)) continue;
+      if (nextRaw[key] === undefined) {
+        const v = values[key];
+        nextRaw[key] = v !== undefined ? JSON.stringify(v, null, 2) : "";
+      }
+    }
+    setRawJsonValues(nextRaw);
+  }, [properties, values]);
+
+  const handleValueChange = (key: string, newValue: JSONValue) => {
+    onChange({ ...values, [key]: newValue });
+  };
+
+  const items = useMemo(() => Object.entries(properties), [properties]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {items.map(([fieldName, fieldSchema]) => {
+        const fieldId = `field-${fieldName}`;
+        const fieldTitle = fieldSchema.title || fieldName;
+        const fieldType = fieldSchema.type || "string";
+        const fieldDescription = fieldSchema.description || "";
+
+        if (fieldType === "string") {
+          return (
+            <div key={fieldName} className="space-y-2">
+              <label htmlFor={fieldId} className="text-sm font-medium">
+                {fieldTitle}
+                {required.has(fieldName) && (
+                  <span className="text-destructive ml-1">*</span>
+                )}
+              </label>
+              <Textarea
+                id={fieldId}
+                value={(values[fieldName] as string) || ""}
+                onChange={(e) => handleValueChange(fieldName, e.target.value)}
+                placeholder={
+                  fieldDescription || `Enter ${fieldTitle.toLowerCase()}`
+                }
+                rows={3}
+              />
+              {fieldDescription && (
+                <p className="text-xs text-muted-foreground">
+                  {fieldDescription}
+                </p>
+              )}
+            </div>
+          );
+        }
+
+        if (fieldType === "number" || fieldType === "integer") {
+          return (
+            <div key={fieldName} className="space-y-2">
+              <label htmlFor={fieldId} className="text-sm font-medium">
+                {fieldTitle}
+                {required.has(fieldName) && (
+                  <span className="text-destructive ml-1">*</span>
+                )}
+              </label>
+              <Input
+                id={fieldId}
+                type="number"
+                value={
+                  ((values[fieldName] as number) ?? "") as unknown as string
+                }
+                onChange={(e) => {
+                  const val = e.target.value;
+                  if (val === "") {
+                    handleValueChange(fieldName, null);
+                    return;
+                  }
+                  const parsed =
+                    fieldType === "integer"
+                      ? parseInt(val, 10)
+                      : parseFloat(val);
+                  handleValueChange(
+                    fieldName,
+                    Number.isNaN(parsed)
+                      ? null
+                      : (parsed as unknown as JSONValue),
+                  );
+                }}
+                placeholder={
+                  fieldDescription || `Enter ${fieldTitle.toLowerCase()}`
+                }
+                step={fieldType === "integer" ? "1" : "any"}
+              />
+              {fieldDescription && (
+                <p className="text-xs text-muted-foreground">
+                  {fieldDescription}
+                </p>
+              )}
+            </div>
+          );
+        }
+
+        if (fieldType === "boolean") {
+          return (
+            <div key={fieldName} className="space-y-2">
+              <label htmlFor={fieldId} className="text-sm font-medium">
+                {fieldTitle}
+                {required.has(fieldName) && (
+                  <span className="text-destructive ml-1">*</span>
+                )}
+              </label>
+              <Select
+                onValueChange={(value) =>
+                  handleValueChange(fieldName, value === "true")
+                }
+                value={String(Boolean(values[fieldName]))}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select..." />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="true">True</SelectItem>
+                  <SelectItem value="false">False</SelectItem>
+                </SelectContent>
+              </Select>
+              {fieldDescription && (
+                <p className="text-xs text-muted-foreground">
+                  {fieldDescription}
+                </p>
+              )}
+            </div>
+          );
+        }
+
+        // Complex types: object / array / list[...] / map
+        const { hint, placeholder } = getTypeHintAndPlaceholder(fieldType);
+        const raw =
+          rawJsonValues[fieldName] ??
+          (values[fieldName] !== undefined
+            ? JSON.stringify(values[fieldName], null, 2)
+            : "");
+        const hasError = Boolean(rawJsonErrors[fieldName]);
+
+        return (
+          <div key={fieldName} className="space-y-2">
+            <label htmlFor={fieldId} className="text-sm font-medium">
+              {fieldTitle} (JSON)
+              {required.has(fieldName) && (
+                <span className="text-destructive ml-1">*</span>
+              )}
+            </label>
+            <Textarea
+              id={fieldId}
+              value={raw}
+              onChange={(e) => {
+                const text = e.target.value;
+                setRawJsonValues((prev) => ({ ...prev, [fieldName]: text }));
+                if (text.trim() === "") {
+                  setRawJsonErrors((prev) => ({ ...prev, [fieldName]: null }));
+                  // Clear value when empty
+                  const next = { ...values };
+                  delete next[fieldName];
+                  onChange(next);
+                  return;
+                }
+                try {
+                  const parsed = JSON.parse(text);
+                  setRawJsonErrors((prev) => ({ ...prev, [fieldName]: null }));
+                  handleValueChange(fieldName, parsed);
+                } catch {
+                  setRawJsonErrors((prev) => ({
+                    ...prev,
+                    [fieldName]: "Invalid JSON",
+                  }));
+                }
+              }}
+              placeholder={fieldDescription || placeholder}
+              className={`font-mono ${hasError ? "border-destructive focus-visible:ring-destructive" : ""}`}
+              rows={3}
+            />
+            {hasError ? (
+              <p className="text-xs text-destructive mt-1">
+                {rawJsonErrors[fieldName]}
+              </p>
+            ) : (
+              <p className="text-xs text-muted-foreground">{hint}</p>
+            )}
+            {fieldDescription && (
+              <p className="text-xs text-muted-foreground">
+                {fieldDescription}
+              </p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/run-details-panel.tsx

@@ -0,0 +1,290 @@
+import { useState, useEffect, useMemo } from "react";
+import {
+  Badge,
+  Button,
+  Label,
+  StopEvent,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  isBuiltInEvent,
+} from "@llamaindex/ui";
+import { useHandler, type WorkflowEvent } from "@llamaindex/ui";
+import { CodeBlock } from "./code-block";
+import { useStreamEventBatcher } from "@llamaindex/ui";
+import { WorkflowVisualization } from "./workflow-visualization";
+import { SendEventDialog } from "./send-event-dialog";
+
+type JSONValue =
+  | null
+  | string
+  | number
+  | boolean
+  | { [key: string]: JSONValue }
+  | Array<JSONValue>;
+
+interface RunDetailsPanelProps {
+  handlerId: string;
+  selectedWorkflow?: string | null;
+  tab?: "visualization" | "events";
+  onTabChange?: (value: "visualization" | "events") => void;
+}
+
+export function RunDetailsPanel({
+  handlerId,
+  selectedWorkflow,
+}: RunDetailsPanelProps) {
+  const { state, subscribeToEvents } = useHandler(handlerId);
+  const [compactJson, setCompactJson] = useState(false);
+  const [hideInternal, setHideInternal] = useState(true);
+  const [finalResult, setFinalResult] = useState<JSONValue | null>(null);
+  const [finalResultError, setFinalResultError] = useState<string | null>(null);
+  const {
+    items: events,
+    push,
+    clear,
+  } = useStreamEventBatcher<WorkflowEvent>(
+    100,
+    (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
+  );
+
+  const formatJsonData = (data: unknown) => {
+    if (typeof data === "string") {
+      return data;
+    }
+    if (!data || typeof data !== "object") {
+      return String(data ?? "");
+    }
+    return JSON.stringify(data, null, compactJson ? 0 : 2);
+  };
+
+  const formatTime = (epochMs?: number): string => {
+    if (!epochMs) return "";
+    const d = new Date(epochMs);
+    const base = d.toLocaleTimeString([], {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+    const ms = String(d.getMilliseconds()).padStart(3, "0");
+    return `${base}.${ms}`;
+  };
+
+  useEffect(() => {
+    if (state.status === "running") {
+      const { disconnect } = subscribeToEvents(
+        {
+          onData: (event: WorkflowEvent) => {
+            push(event);
+          },
+          onSuccess(allEvents) {
+            setFinalResult(
+              ((allEvents[allEvents.length - 1] as StopEvent)?.data?.[
+                "result"
+              ] ?? null) as JSONValue | null,
+            );
+          },
+          onError(error) {
+            setFinalResultError(error.message);
+          },
+        },
+        true,
+      );
+      return () => {
+        disconnect();
+      };
+    }
+  }, [subscribeToEvents, state.status, push]);
+
+  // Reset events, timestamps and result when switching handlers
+  useEffect(() => {
+    clear();
+    setFinalResult(null);
+    setFinalResultError(null);
+  }, [handlerId, clear]);
+
+  const displayedEvents: WorkflowEvent[] = useMemo(
+    () =>
+      hideInternal ? events.filter((event) => !isBuiltInEvent(event)) : events,
+    [events, hideInternal],
+  );
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-border">
+        <div className="flex items-center justify-between">
+          <h2 className="font-semibold text-sm">Run Details</h2>
+          <div className="flex items-center gap-2">
+            <Badge
+              variant={state.status === "completed" ? "default" : "secondary"}
+            >
+              {state.status}
+            </Badge>
+            <SendEventDialog
+              handlerId={handlerId}
+              workflowName={selectedWorkflow ?? null}
+              disabled={
+                !state ||
+                state.status === "completed" ||
+                state.status === "failed"
+              }
+            />
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-2 mt-2">
+          <span className="text-xs text-muted-foreground font-mono">
+            {state.handler_id}
+          </span>
+          <span className="text-xs text-muted-foreground font-mono">
+            Last updated: {state.updated_at?.getTime()}
+          </span>
+        </div>
+      </div>
+
+      {/* Side-by-side content */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: Visualization */}
+        <div className="flex-1 p-4 overflow-auto border-r border-border">
+          <WorkflowVisualization
+            workflowName={selectedWorkflow || null}
+            events={events.map((e: WorkflowEvent) => ({
+              type: e.type,
+              data: e.data,
+            }))}
+            className="w-full h-full min-h-[400px]"
+            isComplete={
+              state.status === "completed" || state.status === "failed"
+            }
+          />
+        </div>
+
+        {/* Right: Events */}
+        <div className="w-[480px] flex flex-col overflow-hidden">
+          {/* Events Header */}
+          <div className="p-4 pb-2 border-b border-border">
+            <div className="flex items-center justify-between mb-3">
+              <h4 className="font-medium text-sm">
+                Event Stream ({displayedEvents.length})
+              </h4>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2">
+                  <Label htmlFor="hide-internal" className="text-xs">
+                    Hide internal
+                  </Label>
+                  <Switch
+                    id="hide-internal"
+                    checked={hideInternal}
+                    onCheckedChange={(v: boolean) =>
+                      setHideInternal(Boolean(v))
+                    }
+                  />
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setCompactJson(!compactJson)}
+                >
+                  {compactJson ? "Formatted" : "Compact"}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Events List */}
+          <div className="flex-1 overflow-auto">
+            {!state.handler_id ? (
+              <div className="flex items-center justify-center h-full">
+                <p className="text-muted-foreground text-sm">
+                  Start a run to see events
+                </p>
+              </div>
+            ) : events.length === 0 ? (
+              <div className="flex items-center justify-center h-full">
+                <p className="text-muted-foreground text-sm">
+                  No events yet...
+                </p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-8">#</TableHead>
+                    <TableHead>Event</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {displayedEvents.map((item, index) => {
+                    const event = item;
+                    return (
+                      <TableRow
+                        key={`${event.type}-${index}`}
+                        data-event-index={index}
+                        className={`cursor-pointer transition-colors`}
+                      >
+                        <TableCell className="text-xs text-muted-foreground align-top">
+                          {index + 1}
+                        </TableCell>
+                        <TableCell className="py-3">
+                          <div className="space-y-2">
+                            <div className="flex items-baseline justify-between gap-2">
+                              <div className="flex items-center gap-2 flex-1 min-w-0">
+                                <code className="text-sm font-mono truncate">
+                                  {event.type}
+                                </code>
+                              </div>
+                              {event.timestamp !== undefined ? (
+                                <span className="text-[10px] text-muted-foreground font-mono whitespace-nowrap">
+                                  {formatTime(event.timestamp.getTime())}
+                                </span>
+                              ) : null}
+                            </div>
+                            <CodeBlock
+                              language={
+                                typeof event.data === "string" ? "text" : "json"
+                              }
+                              value={formatJsonData(event.data)}
+                              wrapLongLines={compactJson}
+                              className="rounded border max-h-64 overflow-auto"
+                            />
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+
+          {/* Final Result Section */}
+          {(finalResult || finalResultError) && (
+            <div className="p-4 border-t border-border">
+              <h4 className="font-medium text-sm mb-2">Final Result</h4>
+              {finalResultError ? (
+                <div className="text-destructive text-sm p-3 bg-destructive/10 border border-destructive/20 rounded">
+                  Failed to load final result: {finalResultError}
+                </div>
+              ) : (
+                <CodeBlock
+                  language={typeof finalResult === "string" ? "text" : "json"}
+                  value={
+                    typeof finalResult === "string"
+                      ? (finalResult as string)
+                      : JSON.stringify(finalResult, null, 2)
+                  }
+                  className="rounded border overflow-hidden"
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/run-list-panel.tsx

@@ -0,0 +1,83 @@
+import { useState, useEffect } from "react";
+import { Skeleton, HandlerState, useHandlers } from "@llamaindex/ui";
+
+interface RunListPanelProps {
+  activeHandlerId: string | null;
+  onHandlerSelect: (handlerId: string) => void;
+}
+
+export function RunListPanel({
+  activeHandlerId,
+  onHandlerSelect,
+}: RunListPanelProps) {
+  const { state: handlersState, sync } = useHandlers();
+  const handlers = handlersState.handlers;
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    sync().finally(() => setLoading(false));
+  }, [sync]);
+
+  const formatHandlerDisplay = (handler: HandlerState) => {
+    const name = handler.workflow_name || "Unknown";
+    return `${name}`;
+  };
+
+  const handlerList = Object.values(handlers);
+
+  return (
+    <div className="h-full flex flex-col text-sm">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-border">
+        <div className="flex items-center justify-between">
+          <h2 className="font-semibold text-xs tracking-tight">Recent Runs</h2>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        {/* Loading State */}
+        {loading && (
+          <div className="p-2 space-y-2">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+          </div>
+        )}
+
+        {/* Handlers List */}
+        {!loading && (
+          <div className="p-2 divide-y divide-border">
+            {handlerList.length === 0 ? (
+              <div className="text-muted-foreground text-xs p-3 text-center">
+                No runs yet. Start a workflow to see runs here.
+              </div>
+            ) : (
+              handlerList.map((handler) => (
+                <button
+                  key={handler.handler_id}
+                  onClick={() => onHandlerSelect(handler.handler_id)}
+                  className={`w-full text-left px-2 py-1.5 transition-colors cursor-pointer border border-collapse ${
+                    activeHandlerId === handler.handler_id
+                      ? "bg-accent "
+                      : "hover:bg-accent"
+                  }`}
+                >
+                  <div className="grid grid-cols-[1fr_auto] items-center gap-2">
+                    <span className="truncate text-xs">
+                      {formatHandlerDisplay(handler)}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {handler.handler_id.slice(-8)}
+                    </span>
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}