@llamaindex/workflow-debugger 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,205 @@
+# @llamaindex/workflow-debugger
+
+## 0.2.0
+
+### Minor Changes
+
+- 7538c69: Publish workflow-debugger to npm for serving via jsdelivr
+
+### Patch Changes
+
+- Updated dependencies [68edbac]
+- Updated dependencies [68edbac]
+- Updated dependencies [68edbac]
+- Updated dependencies [68edbac]
+- Updated dependencies [68edbac]
+- Updated dependencies [f67ae7c]
+  - @llamaindex/ui@3.3.2
+  - @llamaindex/workflows-client@1.8.2
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [e2481f0]
+- Updated dependencies [e2481f0]
+- Updated dependencies [8c994a5]
+  - @llamaindex/ui@3.3.1
+
+## 0.1.3
+
+### Patch Changes
+
+- bf1f472: Add support for agent workflow in debugger
+- Updated dependencies [bf1f472]
+  - @llamaindex/ui@3.3.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [accf7eb]
+  - @llamaindex/ui@3.2.2
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [5c395e6]
+  - @llamaindex/ui@3.2.1
+
+## 0.1.0
+
+### Minor Changes
+
+- 8544bc4: Add more functionality to workflow hooks
+
+### Patch Changes
+
+- Updated dependencies [8544bc4]
+- Updated dependencies [2641426]
+  - @llamaindex/ui@3.2.0
+  - @llamaindex/workflows-client@1.8.1
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [029e2ea]
+- Updated dependencies [35b0ca2]
+- Updated dependencies [3b11809]
+  - @llamaindex/ui@3.1.1
+  - @llamaindex/workflows-client@1.8.0
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [ac461c9]
+- Updated dependencies [3658344]
+- Updated dependencies [ac461c9]
+  - @llamaindex/ui@3.1.0
+
+## 0.0.6
+
+### Patch Changes
+
+- 5578071: refactor workflow/handler store
+- d3423fd: Upgrade to better support react 19
+- Updated dependencies [acb31b5]
+- Updated dependencies [5578071]
+- Updated dependencies [ee7de57]
+- Updated dependencies [1d56861]
+- Updated dependencies [d3423fd]
+- Updated dependencies [31a2a69]
+- Updated dependencies [659ebae]
+  - @llamaindex/workflows-client@1.7.0
+  - @llamaindex/ui@3.0.0
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [542f658]
+  - @llamaindex/workflows-client@1.6.2
+  - @llamaindex/ui@2.1.8
+
+## 0.0.4
+
+### Patch Changes
+
+- 762c881: bump version
+
+## 0.0.3
+
+### Patch Changes
+
+- 1d776f7: bump version
+
+## 0.0.2
+
+### Patch Changes
+
+- 1d5b72c: use cloudflare as cdn
+
+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [db491f1]
+  - @llamaindex/workflows-client@1.6.1
+  - @llamaindex/ui@2.1.8
+
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [aad82ca]
+  - @llamaindex/ui@2.1.8
+
+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [b4e70ab]
+  - @llamaindex/workflows-client@1.6.0
+  - @llamaindex/ui@2.1.7
+
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [ef43b90]
+  - @llamaindex/ui@2.1.7
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [0a795fb]
+  - @llamaindex/ui@2.1.6
+
+## 0.1.4
+
+### Patch Changes
+
+- 45ab264: Make workflow handler internal event inclusion configurable
+- Updated dependencies [45ab264]
+- Updated dependencies [45ab264]
+- Updated dependencies [b9f5d60]
+  - @llamaindex/ui@2.1.5
+  - @llamaindex/workflows-client@1.5.0
+
+## 0.1.3
+
+### Patch Changes
+
+- 50ceb5f: Add toggle to hide/show internal events
+- 4277687: Fix json editor for complex start event fields
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [5f61fdf]
+  - @llamaindex/ui@2.1.4
+
+## 0.1.1
+
+### Patch Changes
+
+- cadb023: improve debugger interface
+- Updated dependencies [90216b7]
+  - @llamaindex/workflows-client@1.4.0
+  - @llamaindex/ui@2.1.3
+
+## 0.1.0
+
+### Minor Changes
+
+- 2e17c68: Add workflow debugger, and fix minor bugs in workflow hooks
+
+### Patch Changes
+
+- Updated dependencies [2e17c68]
+  - @llamaindex/ui@2.1.3

package/eslint.config.js

@@ -0,0 +1,26 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]);

package/{dist/index.html → index.html}

@@ -4,10 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>workflow-debugger</title>
-    <script type="module" crossorigin src="/app.js"></script>
-    <link rel="stylesheet" crossorigin href="/app.css">
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/package.json

@@ -1,28 +1,23 @@
 {
   "name": "@llamaindex/workflow-debugger",
-  "version": "0.1.8",
+  "version": "0.2.0",
+  "private": false,
   "type": "module",
-  "files": [
-    "dist/*"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
     "@types/react-syntax-highlighter": "^15.5.13",
     "@xyflow/react": "^12.8.5",
     "lucide-react": "^0.514.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-syntax-highlighter": "^15.6.6",
-    "@llamaindex/ui": "2.1.8",
-    "@llamaindex/workflows-client": "1.6.0"
+    "@llamaindex/ui": "3.3.2",
+    "@llamaindex/workflows-client": "1.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
     "@tailwindcss/postcss": "^4.1.13",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "@vitejs/plugin-react-swc": "^4.1.0",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
@@ -31,13 +26,12 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
     "tailwindcss": "^4.1.13",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.7",
-    "@llamaindex/ui": "2.1.8",
-    "@llamaindex/workflows-client": "1.6.0"
+    "vite": "^6.3.5",
+    "@llamaindex/ui": "3.3.2",
+    "@llamaindex/workflows-client": "1.8.2"
   },
   "scripts": {
     "dev": "vite",

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

package/src/App.tsx

@@ -0,0 +1,18 @@
+import { ApiProvider, createWorkflowsClient } from "@llamaindex/ui";
+import { WorkflowDebugger } from "./components/workflow-debugger";
+import { ErrorBoundary } from "./components/error-boundary";
+
+function App() {
+  const url = "http://localhost:8000";
+  const client = createWorkflowsClient({ baseUrl: url });
+
+  return (
+    <ErrorBoundary>
+      <ApiProvider clients={{ workflowsClient: client }}>
+        <WorkflowDebugger />
+      </ApiProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;

package/src/components/code-block.tsx

@@ -0,0 +1,48 @@
+import { CSSProperties } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  oneDark,
+  oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+const customStyle: CSSProperties = {
+  margin: 0,
+  fontSize: "12px",
+  padding: "12px",
+  borderRadius: "6px",
+  width: "100%",
+  boxSizing: "border-box",
+  maxHeight: "none",
+  overflow: "visible",
+};
+export interface CodeBlockProps {
+  language: string;
+  value: string;
+  wrapLongLines?: boolean;
+  className?: string;
+}
+
+export function CodeBlock({
+  language,
+  value,
+  wrapLongLines = false,
+  className,
+}: CodeBlockProps) {
+  const isDark =
+    typeof document !== "undefined" &&
+    document.documentElement.classList.contains("dark");
+
+  return (
+    <div className={className}>
+      <SyntaxHighlighter
+        language={language}
+        style={isDark ? oneDark : oneLight}
+        customStyle={customStyle}
+        wrapLongLines={wrapLongLines}
+        showLineNumbers={false}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
+}

package/src/components/error-boundary.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ComponentType<{ error: Error; resetError: () => void }>;
+}
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  resetError = () => {
+    this.setState({ hasError: false, error: undefined });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        const FallbackComponent = this.props.fallback;
+        return (
+          <FallbackComponent
+            error={this.state.error}
+            resetError={this.resetError}
+          />
+        );
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-background">
+          <div className="max-w-md p-6 bg-card border border-border rounded-lg shadow-sm">
+            <h2 className="text-lg font-semibold text-destructive mb-2">
+              Something went wrong
+            </h2>
+            <p className="text-sm text-muted-foreground mb-4">
+              The workflow debugger encountered an error. This might happen if
+              the workflow server is unreachable.
+            </p>
+            <details className="mb-4">
+              <summary className="text-sm font-medium cursor-pointer hover:text-foreground">
+                Error Details
+              </summary>
+              <pre className="mt-2 text-xs bg-muted p-3 rounded border overflow-auto">
+                {this.state.error.message}
+              </pre>
+            </details>
+            <div className="flex gap-2">
+              <button
+                onClick={this.resetError}
+                className="px-3 py-2 text-sm bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
+              >
+                Try Again
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="px-3 py-2 text-sm bg-secondary text-secondary-foreground rounded hover:bg-secondary/90 transition-colors"
+              >
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}