Implement Agentic Fleet Visualization #15

google-labs-jules · 2025-12-09T02:58:19Z

This PR implements the requested Agentic Fleet visualization, replacing the existing workflow builder.

Key changes:

Created new React Flow node types: Config, DSPy, Phase, Strategy, Agent, Tool, Task.
Implemented lib/agentic-fleet/layout.ts for strict hierarchical auto-layout.
Created UI components in components/agentic-fleet/nodes/.
Updated app/page.tsx to use the new AgenticFleetCanvas.
Added lib/agentic-fleet/types.ts for type definitions.
Created app/agentic/page.tsx as a secondary route.

PR created automatically by Jules for task 17977506241189105345 started by @Zochory

google-labs-jules · 2025-12-09T02:58:20Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

vercel · 2025-12-09T02:58:21Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
agentic-fabric	Ready	Preview	Comment	Dec 9, 2025 6:00am
agenticfabric	Ready	Preview	Comment	Dec 9, 2025 6:00am

coderabbitai · 2025-12-09T02:58:27Z

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

components/agentic-fleet/nodes/agent-node.tsx

components/agentic-fleet/agentic-fleet-canvas.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import React, { useMemo, useEffect } from 'react';


components/agentic-fleet/agentic-fleet-canvas.tsx

+import {
+  ReactFlow,
+  Background,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  ReactFlowProvider,
+  MarkerType,
+} from '@xyflow/react';


components/agentic-fleet/nodes/phase-node.tsx

components/agentic-fleet/nodes/strategy-node.tsx

components/agentic-fleet/nodes/task-node.tsx

lib/agentic-fleet/layout.ts

components/agentic-fleet/nodes/base-node.tsx

+import React, { ReactNode } from 'react';
+import { BookOpen, Trash2, LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';


components/agentic-fleet/nodes/phase-node.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Handle, Position, NodeProps } from '@xyflow/react';
+import { Activity, Clock, Timer, Zap, Server } from 'lucide-react';


components/agentic-fleet/nodes/phase-node.tsx

+import { Handle, Position, NodeProps } from '@xyflow/react';
+import { Activity, Clock, Timer, Zap, Server } from 'lucide-react';
+import { PhaseNode as PhaseNodeType } from '@/lib/agentic-fleet/types';
+import { BaseNode, NodeSection, NodePill, NodeProperty } from './base-node';


app/page.original.tsx

+import React, {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+  useMemo,
+  useEffect,
+  type DragEvent,
+} from 'react';


app/page.original.tsx

+import {
+  Node,
+  NodeContent,
+  NodeDescription,
+  NodeFooter,
+  NodeHeader,
+  NodeTitle,
+} from '@/components/ai-elements/node';


app/page.original.tsx

+  NodeHeader,
+  NodeTitle,
+} from '@/components/ai-elements/node';
+import { Toolbar } from '@/components/ai-elements/toolbar';


app/page.original.tsx

+  NodeTitle,
+} from '@/components/ai-elements/node';
+import { Toolbar } from '@/components/ai-elements/toolbar';
+import { TextBlockCard } from '@/components/ai-elements/text-block-card';


app/page.original.tsx

+} from '@/components/ai-elements/node';
+import { Toolbar } from '@/components/ai-elements/toolbar';
+import { TextBlockCard } from '@/components/ai-elements/text-block-card';
+import { AttributeNode } from '@/components/ai-elements/attribute-node';


…5345

Zochory · 2025-12-09T05:49:10Z

@copilot review

Copilot · 2025-12-09T05:49:18Z

@Zochory I've opened a new pull request, #16, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot

Pull request overview

This PR implements a new Agentic Fleet visualization system that replaces the existing workflow builder interface. The implementation introduces a hierarchical, auto-layouted graph visualization using React Flow to display various components of an agentic system including configuration, DSPy modules, pipeline phases, execution strategies, agents, tools, and tasks.

Key Changes

Created a comprehensive type system with 7 node types (Config, DSPy, Phase, Strategy, Agent, Tool, Task) and custom edge types for visualizing agentic workflows
Implemented a hierarchical auto-layout algorithm that positions nodes in vertical tiers with horizontal centering
Replaced app/page.tsx with a simplified component that renders the new AgenticFleetCanvas, preserving the original workflow builder as app/page.original.tsx for reference

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
`lib/agentic-fleet/types.ts`	Defines TypeScript interfaces for 7 node types and edge types extending React Flow's base types; includes comprehensive data structures for agent properties, phase status, tool configurations, and more
`lib/agentic-fleet/layout.ts`	Implements hierarchical auto-layout algorithm with configurable tier spacing, phase sorting logic, and horizontal centering calculations for multi-node tiers
`components/agentic-fleet/nodes/base-node.tsx`	Provides shared base component and helper components (NodeSection, NodePill, NodeProperty) with consistent dark theme styling and hover-based action buttons
`components/agentic-fleet/nodes/config-node.tsx`	Displays configuration file path and sections using the base node structure
`components/agentic-fleet/nodes/dspy-node.tsx`	Shows DSPy module details including compilation status, signature file, and input/output fields
`components/agentic-fleet/nodes/phase-node.tsx`	Renders pipeline phase nodes with status indicators, executor information, and performance metrics (duration, tokens)
`components/agentic-fleet/nodes/strategy-node.tsx`	Visualizes execution strategies (delegated, parallel, sequential, etc.) with concurrency limits and participant lists
`components/agentic-fleet/nodes/agent-node.tsx`	Displays agent information including role, model, available tools, status indicator, and current task
`components/agentic-fleet/nodes/tool-node.tsx`	Shows tool details with category badges and API key requirement indicators
`components/agentic-fleet/nodes/task-node.tsx`	Presents task cards with content, priority levels, status indicators, and agent assignments
`components/agentic-fleet/agentic-fleet-canvas.tsx`	Main canvas component integrating React Flow with custom node types, initial demo data showing full system hierarchy, and layout computation on mount
`app/page.tsx`	Simplified to render the new AgenticFleetCanvas wrapped in ReactFlowProvider (reduced from ~1269 lines to 15 lines)
`app/page.original.tsx`	Backup of the complete original workflow builder implementation for reference or potential restoration
`app/agentic/page.tsx`	Alternative route providing the same agentic fleet visualization at `/agentic` path

Comments suppressed due to low confidence (3)

components/agentic-fleet/nodes/base-node.tsx:4

Unused import Button.

import { Button } from '@/components/ui/button';

lib/agentic-fleet/layout.ts:3

Unused variable TIER_HEIGHT.

const TIER_HEIGHT = 200;

lib/agentic-fleet/layout.ts:80

Unused variable x.

      const x = startX + index * (nodeWidth + spacingX) + nodeWidth / 2 - nodeWidth / 2;

Copilot · 2025-12-09T05:55:42Z

lib/agentic-fleet/layout.ts

@@ -0,0 +1,98 @@
+import { AgenticFleetNode, AgenticFleetEdge, PhaseNode } from './types';
+
+const TIER_HEIGHT = 200;


Unused constant: TIER_HEIGHT is defined but never used in the layout calculation. Consider removing it or documenting why it's kept for future use.

Suggested change

const TIER_HEIGHT = 200;

Copilot · 2025-12-09T05:55:43Z

components/agentic-fleet/agentic-fleet-canvas.tsx

+    // Cast to any to avoid strict type check issues with ReactFlow's generic constraints
+    setNodes(layoutedNodes as any);


Type safety issue: Using as any to bypass TypeScript's type checking defeats the purpose of type safety. This suggests a mismatch between the custom node types and React Flow's expected types. Consider properly typing the nodes to satisfy React Flow's generic constraints, or investigate if there's a type compatibility issue that needs addressing at the type definition level.

Copilot · 2025-12-09T05:55:43Z

lib/agentic-fleet/types.ts

+  id: string;
+  type: 'strategy';
+  data: StrategyNodeData;
+  position: { x: number; y: number };
+}
+
+export interface DSPyNode extends Node {
+  id: string;
+  type: 'dspy_module';
+  data: DSPyNodeData;
+  position: { x: number; y: number };
+}
+
+export interface ConfigNode extends Node {
+  id: string;
+  type: 'config';
+  data: ConfigNodeData;
+  position: { x: number; y: number };
+}
+
+export interface TaskNode extends Node {
+  id: string;
+  type: 'task';
+  data: TaskNodeData;
+  position: { x: number; y: number };


Redundant type definitions: The node type interfaces (PhaseNode, AgentNode, etc.) redundantly define id, type, and position fields that are already part of the base Node interface from @xyflow/react. These interfaces only need to specify the type literal and data field. For example:

export interface PhaseNode extends Node { type: 'phase'; data: PhaseNodeData; }

This makes the types more maintainable and aligns with React Flow's type patterns.

Suggested change

id: string;

type: 'strategy';

data: StrategyNodeData;

position: { x: number; y: number };

}

export interface DSPyNode extends Node {

id: string;

type: 'dspy_module';

data: DSPyNodeData;

position: { x: number; y: number };

}

export interface ConfigNode extends Node {

id: string;

type: 'config';

data: ConfigNodeData;

position: { x: number; y: number };

}

export interface TaskNode extends Node {

id: string;

type: 'task';

data: TaskNodeData;

position: { x: number; y: number };

type: 'strategy';

data: StrategyNodeData;

}

export interface DSPyNode extends Node {

type: 'dspy_module';

data: DSPyNodeData;

}

export interface ConfigNode extends Node {

type: 'config';

data: ConfigNodeData;

}

export interface TaskNode extends Node {

type: 'task';

data: TaskNodeData;

Copilot · 2025-12-09T05:55:43Z

lib/agentic-fleet/types.ts

+export interface FlowEdge extends Edge {
+  id: string;
+  source: string;
+  target: string;
+  type: 'phase_flow' | 'agent_tool' | 'delegation' | 'data_flow' | 'config_link';
+  animated?: boolean;
+  label?: string;
+  data?: FlowEdgeData;
+}


Redundant edge type definition: The FlowEdge interface redundantly defines id, source, and target fields that are already part of the base Edge interface from @xyflow/react. Only the type constraint and optional data field need to be specified:

export interface FlowEdge extends Edge { type: 'phase_flow' | 'agent_tool' | 'delegation' | 'data_flow' | 'config_link'; data?: FlowEdgeData; }

Copilot · 2025-12-09T05:55:43Z

components/agentic-fleet/nodes/base-node.tsx

+import { Button } from '@/components/ui/button';
+


Unused import: Button is imported but never used in this file. The header action buttons are implemented using plain HTML <button> elements instead. Consider removing this import.

Suggested change

import { Button } from '@/components/ui/button';

Copilot · 2025-12-09T05:55:46Z

app/page.original.tsx

+  NodeTitle,
+} from '@/components/ai-elements/node';
+import { Toolbar } from '@/components/ai-elements/toolbar';
+import { TextBlockCard } from '@/components/ai-elements/text-block-card';


Unused import TextBlockCard.

Suggested change

import { TextBlockCard } from '@/components/ai-elements/text-block-card';

Copilot · 2025-12-09T05:55:47Z

app/page.original.tsx

+} from '@/components/ai-elements/node';
+import { Toolbar } from '@/components/ai-elements/toolbar';
+import { TextBlockCard } from '@/components/ai-elements/text-block-card';
+import { AttributeNode } from '@/components/ai-elements/attribute-node';


Unused import AttributeNode.

Suggested change

import { AttributeNode } from '@/components/ai-elements/attribute-node';

Copilot · 2025-12-09T05:55:47Z

app/page.original.tsx

+import { Toolbar } from '@/components/ai-elements/toolbar';
+import { TextBlockCard } from '@/components/ai-elements/text-block-card';
+import { AttributeNode } from '@/components/ai-elements/attribute-node';
+import { Action, Actions } from '@/components/ai-elements/actions';


Unused imports Action, Actions.

Suggested change

import { Action, Actions } from '@/components/ai-elements/actions';

Copilot · 2025-12-09T05:55:47Z

app/page.original.tsx

+  const [nodeStatuses, setNodeStatuses] = useState<
+    Record<string, 'idle' | 'running' | 'completed' | 'error'>
+  >({});
+  const setNodeStatus = useCallback(
+    (id: string, status: 'idle' | 'running' | 'completed' | 'error') => {
+      setNodeStatuses((prev) => ({ ...prev, [id]: status }));


Unused variable nodeStatuses.

Suggested change

const [nodeStatuses, setNodeStatuses] = useState<

Record<string, 'idle' | 'running' | 'completed' | 'error'>

>({});

const setNodeStatus = useCallback(

(id: string, status: 'idle' | 'running' | 'completed' | 'error') => {

setNodeStatuses((prev) => ({ ...prev, [id]: status }));

const setNodeStatus = useCallback(

(id: string, status: 'idle' | 'running' | 'completed' | 'error') => {

Copilot · 2025-12-09T05:55:48Z

app/page.original.tsx

+  const [lastTransformMs, setLastTransformMs] = useState<number | null>(null);
+  const recomputeWorkflow = useCallback(() => {
+    const t0 = performance.now();
+    const wf = reactFlowToWorkflow(nodes as any, edges, 'workflow-1', 'Agentic Fabric');
+    setCurrentWorkflow(wf);
+    setLastTransformMs(performance.now() - t0);


Unused variable lastTransformMs.

Suggested change

const [lastTransformMs, setLastTransformMs] = useState<number | null>(null);

const recomputeWorkflow = useCallback(() => {

const t0 = performance.now();

const wf = reactFlowToWorkflow(nodes as any, edges, 'workflow-1', 'Agentic Fabric');

setCurrentWorkflow(wf);

setLastTransformMs(performance.now() - t0);

const recomputeWorkflow = useCallback(() => {

const t0 = performance.now();

const wf = reactFlowToWorkflow(nodes as any, edges, 'workflow-1', 'Agentic Fabric');

setCurrentWorkflow(wf);

// Removed setLastTransformMs as lastTransformMs is unused

- Added new node types: Config, DSPy, Phase, Strategy, Agent, Tool, Task - Implemented strict tiered auto-layout algorithm - Created 'Guardrails' dark theme UI components - Replaced main dashboard with AgenticFleet canvas - Configured straight edges and improved spacing for clarity

Implement Agentic Fleet visualization and replace workflow builder

4abb244

vercel bot deployed to Preview – agentic-fabric December 9, 2025 02:59 View deployment

vercel bot deployed to Preview – agenticfabric December 9, 2025 02:59 View deployment

github-code-quality bot found potential problems Dec 9, 2025

View reviewed changes

Implement Agentic Fleet visualization with Guardrails style nodes

ce2aaed

vercel bot deployed to Preview – agentic-fabric December 9, 2025 03:49 View deployment

vercel bot deployed to Preview – agenticfabric December 9, 2025 03:50 View deployment

github-code-quality bot found potential problems Dec 9, 2025

View reviewed changes

Implement Agentic Fleet visualization with Guardrails style nodes

46b1217

vercel bot deployed to Preview – agentic-fabric December 9, 2025 04:23 View deployment

vercel bot deployed to Preview – agenticfabric December 9, 2025 04:24 View deployment

Merge branch 'main' into agentic-fleet-visualization-1797750624118910…

0d30167

…5345

vercel bot deployed to Preview – agentic-fabric December 9, 2025 05:00 View deployment

vercel bot deployed to Preview – agenticfabric December 9, 2025 05:00 View deployment

Zochory assigned Copilot Dec 9, 2025

Zochory requested a review from Copilot December 9, 2025 05:48

Copilot started reviewing on behalf of Zochory December 9, 2025 05:49 View session

Copilot AI mentioned this pull request Dec 9, 2025

Clean up linting errors and build artifacts from Agentic Fleet implementation #16

Draft

Copilot AI reviewed Dec 9, 2025

View reviewed changes

vercel bot deployed to Preview – agenticfabric December 9, 2025 06:00 View deployment

vercel bot deployed to Preview – agentic-fabric December 9, 2025 06:01 View deployment

		@@ -0,0 +1,256 @@
		'use client';

		import React, { useMemo, useEffect } from 'react';

		@@ -0,0 +1,98 @@
		import { AgenticFleetNode, AgenticFleetEdge, PhaseNode } from './types';

		const TIER_HEIGHT = 200;

		// Cast to any to avoid strict type check issues with ReactFlow's generic constraints
		setNodes(layoutedNodes as any);

Uh oh!

Implement Agentic Fleet Visualization #15

Are you sure you want to change the base?

Implement Agentic Fleet Visualization #15

Uh oh!

Conversation

google-labs-jules bot commented Dec 9, 2025

Uh oh!

google-labs-jules bot commented Dec 9, 2025

Uh oh!

vercel bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Zochory commented Dec 9, 2025

Uh oh!

Copilot AI commented Dec 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Dec 9, 2025 •

edited

Loading

coderabbitai bot commented Dec 9, 2025 •

edited

Loading