@workglow/task-graph 0.0.124 → 0.0.125

package/dist/debug/console/ConsoleFormatters.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2025 Steven Roussey <sroussey@gmail.com>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+type Config = Record<string, unknown>;
+type JsonMLTagName = string;
+interface JsonMLAttributes {
+    readonly [key: string]: unknown;
+}
+type JsonMLNode = JsonMLText | JsonMLElementDef;
+type JsonMLText = string;
+type JsonMLElementDef = [JsonMLTagName, JsonMLAttributes?, ...JsonMLNode[]];
+declare abstract class ConsoleFormatter {
+    abstract header(value: unknown, config?: Config): JsonMLElementDef | null;
+    abstract hasBody(value: unknown, config?: Config): boolean;
+    abstract body(value: unknown, config?: Config): JsonMLElementDef | null;
+}
+/**
+ * Returns whether the browser is in dark mode
+ */
+export declare function isDarkMode(): boolean;
+declare global {
+    interface Window {
+        devtoolsFormatters?: ConsoleFormatter[];
+    }
+}
+/**
+ * Installs custom DevTools formatters for Workglow task graphs, workflows, and related objects.
+ * Call this function once in your application to enable rich console output for debugging.
+ *
+ * @example
+ * ```ts
+ * import { installDevToolsFormatters } from "@workglow/task-graph";
+ *
+ * // Call early in your app initialization
+ * installDevToolsFormatters();
+ *
+ * // Now console.log will show rich output for Workflow, Task, TaskGraph, etc.
+ * console.log(myWorkflow);
+ * ```
+ */
+export declare function installDevToolsFormatters(): void;
+export {};
+//# sourceMappingURL=ConsoleFormatters.d.ts.map

package/dist/debug/console/ConsoleFormatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleFormatters.d.ts","sourceRoot":"","sources":["../../../src/debug/console/ConsoleFormatters.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAwBtC,KAAK,aAAa,GAAG,MAAM,CAAC;AAE5B,UAAU,gBAAgB;IACxB,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC;AAED,KAAK,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEhD,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,KAAK,gBAAgB,GAAG,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;AAE5E,uBAAe,gBAAgB;IAC7B,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAAC;IAC1E,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3D,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAAC;CACzE;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,OAAO,CAEpC;AAk0BD,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,MAAM;QACd,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;KACzC;CACF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,yBAAyB,IAAI,IAAI,CAWhD"}

package/dist/types.d.ts

@@ -4,4 +4,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 export * from "./common";
+export * from "./debug/console/ConsoleFormatters";
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workglow/task-graph",
   "type": "module",
-  "version": "0.0.124",
+  "version": "0.0.125",
   "description": "Task graph management for Workglow, providing DAG construction, execution planning, and workflow orchestration.",
   "scripts": {
     "watch": "concurrently -c 'auto' 'bun:watch-*'",
@@ -37,9 +37,9 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@workglow/job-queue": "0.0.124",
-    "@workglow/storage": "0.0.124",
-    "@workglow/util": "0.0.124"
+    "@workglow/job-queue": "0.0.125",
+    "@workglow/storage": "0.0.125",
+    "@workglow/util": "0.0.125"
   },
   "peerDependenciesMeta": {
     "@workglow/job-queue": {
@@ -53,8 +53,8 @@
     }
   },
   "devDependencies": {
-    "@workglow/job-queue": "0.0.124",
-    "@workglow/storage": "0.0.124",
-    "@workglow/util": "0.0.124"
+    "@workglow/job-queue": "0.0.125",
+    "@workglow/storage": "0.0.125",
+    "@workglow/util": "0.0.125"
   }
 }

package/src/debug/README.md

@@ -0,0 +1,115 @@
+# Chrome DevTools formatters (`ConsoleFormatters`)
+
+Debug utilities for Workglow task graphs and workflows.
+
+## Overview
+
+`ConsoleFormatters.ts` is re-exported from the main **`@workglow/task-graph`** entry when using the **browser** build (`dist/browser.js`). It provides Chrome DevTools custom formatters for rich console output for task graphs, workflows, tasks, and dataflows.
+
+This code is **browser-oriented** (it uses `window` and the DevTools formatter API). Do not call it from Node-only bundles.
+
+## Features
+
+- **Chrome DevTools Custom Formatters**: Rich, colored console output for Workglow objects
+  - **Dark Mode Support**: Automatically adapts colors based on browser theme
+  - **DAG Visualization**: Visual graph rendering for directed acyclic graphs
+  - **React Element Formatting**: Pretty-print React elements in the console
+
+## Installation
+
+`@workglow/util` is a peer dependency of `@workglow/task-graph` (graph and schema types used by the formatters).
+
+```bash
+npm install @workglow/task-graph @workglow/util
+# or
+bun add @workglow/task-graph @workglow/util
+```
+
+## Usage
+
+### Installing DevTools Formatters
+
+Call `installDevToolsFormatters()` early in your application to enable rich console output:
+
+```typescript
+import { installDevToolsFormatters } from "@workglow/task-graph";
+
+// Call once during app initialization
+installDevToolsFormatters();
+```
+
+### Enabling Custom Formatters in Chrome DevTools
+
+1. Open Chrome DevTools (F12 or Cmd+Option+I)
+2. Go to Settings (gear icon or F1)
+3. Under "Console", check "Enable custom formatters"
+4. Refresh the page
+
+### Viewing Rich Output
+
+Once formatters are installed and enabled, simply `console.log` any Workglow object:
+
+```typescript
+import { Workflow } from "@workglow/task-graph";
+import { installDevToolsFormatters } from "@workglow/task-graph";
+
+installDevToolsFormatters();
+
+const workflow = new Workflow();
+// ... add tasks ...
+
+// Rich formatted output in DevTools
+console.log(workflow);
+```
+
+## Supported Objects
+
+The following Workglow objects will display with rich formatting:
+
+- **Workflow**: Shows task count, error state, and expandable task list
+- **TaskGraph**: Displays all tasks and dataflows with DAG visualization
+- **Task**: Shows input/output data, configuration, and status with color coding
+- **Dataflow**: Displays source and target connections with values
+- **DirectedAcyclicGraph**: Renders a visual canvas representation
+- **React Elements**: Pretty-prints React components with props
+
+## API
+
+### `installDevToolsFormatters()`
+
+Registers custom formatters with Chrome DevTools. Call once during application startup.
+
+```typescript
+import { installDevToolsFormatters } from "@workglow/task-graph";
+
+installDevToolsFormatters();
+```
+
+### `isDarkMode()`
+
+Returns whether the browser is currently in dark mode.
+
+```typescript
+import { isDarkMode } from "@workglow/task-graph";
+
+if (isDarkMode()) {
+  console.log("Using dark theme colors");
+}
+```
+
+## Color Coding
+
+The formatters use consistent color coding:
+
+| Color     | Meaning                        |
+| --------- | ------------------------------ |
+| Green     | Input parameters               |
+| Red/Brown | Output values                  |
+| Yellow    | Highlighted names/keywords     |
+| Grey      | Punctuation and secondary text |
+
+Colors automatically adjust for dark/light mode.
+
+## License
+
+Apache 2.0 - See [LICENSE](../../LICENSE) for details.