{query
- ? highlightMatches(row[colIdx] ?? '', query, theme.colors.accent)
+ ? highlightMatches(
+ row[colIdx] ?? '',
+ query,
+ theme.colors.accent,
+ theme.colors.accentForeground
+ )
: (row[colIdx] ?? '')}
))}
diff --git a/src/renderer/components/CueModal.tsx b/src/renderer/components/CueModal.tsx
index 6be1ebd38e..5d2fabbb9c 100644
--- a/src/renderer/components/CueModal.tsx
+++ b/src/renderer/components/CueModal.tsx
@@ -28,7 +28,6 @@ import { CueHelpContent } from './CueHelpModal';
// import { CueGraphView } from './CueGraphView';
import { CuePipelineEditor } from './CuePipelineEditor';
import { useSessionStore } from '../stores/sessionStore';
-import { getModalActions } from '../stores/modalStore';
import type { CuePipeline } from '../../shared/cue-pipeline-types';
import { getPipelineColorForAgent } from './CuePipelineEditor/pipelineColors';
import { graphSessionsToPipelines } from './CuePipelineEditor/utils/yamlToPipeline';
@@ -732,8 +731,8 @@ export function CueModal({ theme, onClose, cueShortcutKeys }: CueModalProps) {
const pipelineDirtyRef = useRef(false);
pipelineDirtyRef.current = pipelineDirty;
- const handleEditYaml = useCallback((session: CueSessionStatus) => {
- getModalActions().openCueYamlEditor(session.sessionId, session.projectRoot);
+ const handleEditYaml = useCallback((_session: CueSessionStatus) => {
+ // TODO: Implement YAML editor integration
}, []);
const handleViewInPipeline = useCallback((_session: CueSessionStatus) => {
diff --git a/src/renderer/components/CuePipelineEditor/CuePipelineEditor.tsx b/src/renderer/components/CuePipelineEditor/CuePipelineEditor.tsx
index bfc49986d9..a5fb9cde6b 100644
--- a/src/renderer/components/CuePipelineEditor/CuePipelineEditor.tsx
+++ b/src/renderer/components/CuePipelineEditor/CuePipelineEditor.tsx
@@ -13,6 +13,7 @@ import ReactFlow, {
Controls,
MiniMap,
ReactFlowProvider,
+ MarkerType,
useReactFlow,
type Node,
type Edge,
@@ -36,6 +37,7 @@ import type {
import { TriggerNode, type TriggerNodeDataProps } from './nodes/TriggerNode';
import { AgentNode, type AgentNodeDataProps } from './nodes/AgentNode';
import { edgeTypes } from './edges/PipelineEdge';
+import type { PipelineEdgeData } from './edges/PipelineEdge';
import { TriggerDrawer } from './drawers/TriggerDrawer';
import { AgentDrawer } from './drawers/AgentDrawer';
import { PipelineSelector } from './PipelineSelector';
@@ -45,11 +47,6 @@ import { EdgeConfigPanel } from './panels/EdgeConfigPanel';
import { graphSessionsToPipelines } from './utils/yamlToPipeline';
import { pipelinesToYaml } from './utils/pipelineToYaml';
import { mergePipelinesWithSavedLayout } from './utils/pipelineLayout';
-import {
- getTriggerConfigSummary,
- convertToReactFlowNodes,
- convertToReactFlowEdges,
-} from './utils/pipelineGraph';
import { CueSettingsPanel } from './panels/CueSettingsPanel';
import type { CueSettings } from '../../../main/cue/cue-types';
import { DEFAULT_CUE_SETTINGS } from '../../../main/cue/cue-types';
@@ -117,6 +114,209 @@ const DEFAULT_TRIGGER_LABELS: Record
= {
'task.pending': 'Pending Task',
};
+function getTriggerConfigSummary(data: TriggerNodeData): string {
+ const { eventType, config } = data;
+ switch (eventType) {
+ case 'time.heartbeat':
+ return config.interval_minutes ? `every ${config.interval_minutes}min` : 'heartbeat';
+ case 'time.scheduled': {
+ const times = config.schedule_times ?? [];
+ const days = config.schedule_days ?? [];
+ if (times.length === 0) return 'scheduled';
+ const timeStr = times.length <= 2 ? times.join(', ') : `${times.length} times`;
+ const dayStr = days.length > 0 && days.length < 7 ? ` (${days.join(', ')})` : '';
+ return `${timeStr}${dayStr}`;
+ }
+ case 'file.changed':
+ return config.watch ?? '**/*';
+ case 'github.pull_request':
+ case 'github.issue':
+ return config.repo ?? 'repo';
+ case 'task.pending':
+ return config.watch ?? 'tasks';
+ case 'agent.completed':
+ return 'agent done';
+ default:
+ return '';
+ }
+}
+
+function convertToReactFlowNodes(
+ pipelines: CuePipelineState['pipelines'],
+ selectedPipelineId: string | null,
+ onConfigureNode?: (compositeId: string) => void
+): Node[] {
+ const nodes: Node[] = [];
+ const agentPipelineMap = new Map();
+
+ // When showing all pipelines, compute vertical offsets to prevent overlap
+ const pipelineYOffsets = new Map();
+ if (selectedPipelineId === null && pipelines.length > 1) {
+ const PIPELINE_GAP = 100; // px between pipeline groups
+ const NODE_HEIGHT = 100; // approximate node height
+ let currentY = 0;
+ for (const pipeline of pipelines) {
+ if (pipeline.nodes.length === 0) continue;
+ let minY = Infinity;
+ let maxY = -Infinity;
+ for (const node of pipeline.nodes) {
+ minY = Math.min(minY, node.position.y);
+ maxY = Math.max(maxY, node.position.y);
+ }
+ // Offset so this pipeline's top starts at currentY
+ pipelineYOffsets.set(pipeline.id, currentY - minY);
+ currentY += maxY - minY + NODE_HEIGHT + PIPELINE_GAP;
+ }
+ }
+
+ // First pass: compute pipeline colors per agent (by sessionId)
+ for (const pipeline of pipelines) {
+ for (const pNode of pipeline.nodes) {
+ if (pNode.type === 'agent') {
+ const agentData = pNode.data as AgentNodeData;
+ const existing = agentPipelineMap.get(agentData.sessionId) ?? [];
+ if (!existing.includes(pipeline.color)) {
+ existing.push(pipeline.color);
+ }
+ agentPipelineMap.set(agentData.sessionId, existing);
+ }
+ }
+ }
+
+ // Count pipelines per agent
+ const agentPipelineCount = new Map();
+ for (const pipeline of pipelines) {
+ for (const pNode of pipeline.nodes) {
+ if (pNode.type === 'agent') {
+ const agentData = pNode.data as AgentNodeData;
+ agentPipelineCount.set(
+ agentData.sessionId,
+ (agentPipelineCount.get(agentData.sessionId) ?? 0) + 1
+ );
+ }
+ }
+ }
+
+ // Track which agent sessionIds are in the selected pipeline (for shared agent dimming)
+ const selectedPipelineAgentIds = new Set();
+ if (selectedPipelineId) {
+ const selectedPipeline = pipelines.find((p) => p.id === selectedPipelineId);
+ if (selectedPipeline) {
+ for (const pNode of selectedPipeline.nodes) {
+ if (pNode.type === 'agent') {
+ selectedPipelineAgentIds.add((pNode.data as AgentNodeData).sessionId);
+ }
+ }
+ }
+ }
+
+ for (const pipeline of pipelines) {
+ const isActive = selectedPipelineId === null || pipeline.id === selectedPipelineId;
+
+ for (const pNode of pipeline.nodes) {
+ if (pNode.type === 'trigger') {
+ // Triggers from non-selected pipelines are hidden
+ if (!isActive) continue;
+
+ const triggerData = pNode.data as TriggerNodeData;
+ const compositeId = `${pipeline.id}:${pNode.id}`;
+ const yOffset = pipelineYOffsets.get(pipeline.id) ?? 0;
+ const nodeData: TriggerNodeDataProps = {
+ compositeId,
+ eventType: triggerData.eventType,
+ label: triggerData.customLabel || triggerData.label,
+ configSummary: getTriggerConfigSummary(triggerData),
+ onConfigure: onConfigureNode,
+ };
+ nodes.push({
+ id: compositeId,
+ type: 'trigger',
+ position: { x: pNode.position.x, y: pNode.position.y + yOffset },
+ data: nodeData,
+ dragHandle: '.drag-handle',
+ });
+ } else {
+ const agentData = pNode.data as AgentNodeData;
+ const isShared = (agentPipelineCount.get(agentData.sessionId) ?? 1) > 1;
+
+ // Non-selected pipeline: hide non-shared agents, dim shared ones
+ if (!isActive) {
+ if (!isShared) continue;
+ if (!selectedPipelineAgentIds.has(agentData.sessionId)) continue;
+ }
+
+ const pipelineColors = agentPipelineMap.get(agentData.sessionId) ?? [pipeline.color];
+ const compositeId = `${pipeline.id}:${pNode.id}`;
+ const yOffset = pipelineYOffsets.get(pipeline.id) ?? 0;
+ const hasOutgoingEdge = pipeline.edges.some((e) => e.source === pNode.id);
+ const hasEdgePrompt = pipeline.edges.some((e) => e.target === pNode.id && !!e.prompt);
+ const nodeData: AgentNodeDataProps = {
+ compositeId,
+ sessionId: agentData.sessionId,
+ sessionName: agentData.sessionName,
+ toolType: agentData.toolType,
+ hasPrompt: !!(agentData.inputPrompt || agentData.outputPrompt || hasEdgePrompt),
+ hasOutgoingEdge,
+ pipelineColor: pipeline.color,
+ pipelineCount: agentPipelineCount.get(agentData.sessionId) ?? 1,
+ pipelineColors,
+ onConfigure: onConfigureNode,
+ };
+ nodes.push({
+ id: compositeId,
+ type: 'agent',
+ position: { x: pNode.position.x, y: pNode.position.y + yOffset },
+ data: nodeData,
+ dragHandle: '.drag-handle',
+ style: !isActive ? { opacity: 0.4 } : undefined,
+ });
+ }
+ }
+ }
+
+ return nodes;
+}
+
+function convertToReactFlowEdges(
+ pipelines: CuePipelineState['pipelines'],
+ selectedPipelineId: string | null,
+ runningPipelineIds?: Set,
+ selectedEdgeId?: string | null
+): Edge[] {
+ const edges: Edge[] = [];
+
+ for (const pipeline of pipelines) {
+ const isActive = selectedPipelineId === null || pipeline.id === selectedPipelineId;
+ const isRunning = runningPipelineIds?.has(pipeline.id) ?? false;
+
+ for (const pEdge of pipeline.edges) {
+ const compositeId = `${pipeline.id}:${pEdge.id}`;
+ const edgeData: PipelineEdgeData = {
+ pipelineColor: pipeline.color,
+ mode: pEdge.mode,
+ isActivePipeline: isActive,
+ isRunning,
+ };
+ edges.push({
+ id: compositeId,
+ source: `${pipeline.id}:${pEdge.source}`,
+ target: `${pipeline.id}:${pEdge.target}`,
+ type: 'pipeline',
+ data: edgeData,
+ selected: compositeId === selectedEdgeId,
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ color: pipeline.color,
+ width: selectedEdgeId === compositeId ? 18 : 16,
+ height: selectedEdgeId === compositeId ? 18 : 16,
+ },
+ });
+ }
+ }
+
+ return edges;
+}
+
/** Validates pipeline graph before save. Returns array of error messages. */
function validatePipelines(pipelines: CuePipeline[]): string[] {
const errors: string[] = [];
@@ -569,14 +769,12 @@ function CuePipelineEditorInner({
selectedNode,
selectedNodePipelineId,
selectedNodeHasOutgoingEdge,
- hasIncomingAgentEdges,
incomingTriggerEdges,
} = useMemo(() => {
const empty = {
selectedNode: null as PipelineNode | null,
selectedNodePipelineId: null as string | null,
selectedNodeHasOutgoingEdge: false,
- hasIncomingAgentEdges: false,
incomingTriggerEdges: [] as IncomingTriggerEdgeInfo[],
};
if (!selectedNodeId) return empty;
@@ -589,9 +787,8 @@ function CuePipelineEditorInner({
const node = pipeline?.nodes.find((n) => n.id === nodeId);
const hasOutgoing = pipeline?.edges.some((e) => e.source === nodeId) ?? false;
- // Compute incoming trigger edges and check for incoming agent edges
+ // Compute incoming trigger edges for agent nodes
const triggerEdges: IncomingTriggerEdgeInfo[] = [];
- let hasAgentIncoming = false;
if (node?.type === 'agent' && pipeline) {
const incomingEdges = pipeline.edges.filter((e) => e.target === nodeId);
for (const edge of incomingEdges) {
@@ -604,8 +801,6 @@ function CuePipelineEditorInner({
configSummary: getTriggerConfigSummary(triggerData),
prompt: edge.prompt ?? (node.data as AgentNodeData).inputPrompt ?? '',
});
- } else if (sourceNode?.type === 'agent') {
- hasAgentIncoming = true;
}
}
}
@@ -614,7 +809,6 @@ function CuePipelineEditorInner({
selectedNode: node ?? null,
selectedNodePipelineId: node ? pipelineId : null,
selectedNodeHasOutgoingEdge: hasOutgoing,
- hasIncomingAgentEdges: hasAgentIncoming,
incomingTriggerEdges: triggerEdges,
};
}, [selectedNodeId, pipelineState.pipelines]);
@@ -1510,14 +1704,11 @@ function CuePipelineEditorInner({
selectedNode={selectedNode}
pipelines={pipelineState.pipelines}
hasOutgoingEdge={selectedNodeHasOutgoingEdge}
- hasIncomingAgentEdges={hasIncomingAgentEdges}
incomingTriggerEdges={incomingTriggerEdges}
onUpdateNode={onUpdateNode}
onUpdateEdgePrompt={onUpdateEdgePrompt}
onDeleteNode={onDeleteNode}
onSwitchToAgent={onSwitchToSession}
- triggerDrawerOpen={triggerDrawerOpen}
- agentDrawerOpen={agentDrawerOpen}
/>
)}
{selectedEdge && !selectedNode && (
diff --git a/src/renderer/components/CuePipelineEditor/panels/EdgeConfigPanel.tsx b/src/renderer/components/CuePipelineEditor/panels/EdgeConfigPanel.tsx
index 2293b9ca25..25d7c823f6 100644
--- a/src/renderer/components/CuePipelineEditor/panels/EdgeConfigPanel.tsx
+++ b/src/renderer/components/CuePipelineEditor/panels/EdgeConfigPanel.tsx
@@ -30,7 +30,6 @@ const MODES: Array<{
label: string;
icon: typeof ArrowRight;
description: string;
- comingSoon?: boolean;
}> = [
{
mode: 'pass',
@@ -43,14 +42,12 @@ const MODES: Array<{
label: 'Debate',
icon: MessageCircle,
description: 'Multiple agents debate before passing result',
- comingSoon: true,
},
{
mode: 'autorun',
label: 'Auto Run',
icon: FileText,
description: 'Agent creates auto-run documents for next agent',
- comingSoon: true,
},
];
@@ -138,13 +135,12 @@ export function EdgeConfigPanel({
{/* Mode selector */}
- {MODES.map(({ mode, label, icon: Icon, comingSoon }) => {
+ {MODES.map(({ mode, label, icon: Icon }) => {
const isActive = currentMode === mode;
return (
);
})}
diff --git a/src/renderer/components/CuePipelineEditor/panels/NodeConfigPanel.tsx b/src/renderer/components/CuePipelineEditor/panels/NodeConfigPanel.tsx
index ad40550c2d..5a553bcf7f 100644
--- a/src/renderer/components/CuePipelineEditor/panels/NodeConfigPanel.tsx
+++ b/src/renderer/components/CuePipelineEditor/panels/NodeConfigPanel.tsx
@@ -39,16 +39,12 @@ interface NodeConfigPanelProps {
selectedNode: PipelineNode | null;
pipelines: CuePipeline[];
hasOutgoingEdge?: boolean;
- /** Whether the selected agent has incoming edges from other agents (not triggers) */
- hasIncomingAgentEdges?: boolean;
/** Incoming trigger edges for the selected agent node (for per-edge prompts) */
incomingTriggerEdges?: IncomingTriggerEdgeInfo[];
onUpdateNode: (nodeId: string, data: Partial
) => void;
onUpdateEdgePrompt?: (edgeId: string, prompt: string) => void;
onDeleteNode: (nodeId: string) => void;
onSwitchToAgent?: (sessionId: string) => void;
- triggerDrawerOpen?: boolean;
- agentDrawerOpen?: boolean;
}
const EVENT_ICONS: Record = {
@@ -390,7 +386,7 @@ function EdgePromptRow({
fontFamily: 'inherit',
lineHeight: 1.4,
marginTop: 4,
- ...(expanded ? { flex: 1, minHeight: 0 } : { minHeight: 56 }),
+ ...(expanded ? { flex: 1, minHeight: 0 } : {}),
}}
/>
@@ -405,7 +401,6 @@ function AgentConfig({
node,
pipelines,
hasOutgoingEdge,
- hasIncomingAgentEdges,
incomingTriggerEdges,
onUpdateNode,
onUpdateEdgePrompt,
@@ -415,7 +410,6 @@ function AgentConfig({
node: PipelineNode;
pipelines: CuePipeline[];
hasOutgoingEdge?: boolean;
- hasIncomingAgentEdges?: boolean;
incomingTriggerEdges?: IncomingTriggerEdgeInfo[];
onUpdateNode: NodeConfigPanelProps['onUpdateNode'];
onUpdateEdgePrompt?: (edgeId: string, prompt: string) => void;
@@ -514,52 +508,16 @@ function AgentConfig({
value={localInputPrompt}
onChange={handleInputPromptChange}
rows={expanded ? undefined : 3}
- placeholder={
- hasIncomingAgentEdges && data.includeUpstreamOutput !== false
- ? 'Instructions for this agent. Upstream output is auto-included via {{CUE_SOURCE_OUTPUT}}.'
- : hasIncomingAgentEdges
- ? 'Instructions for this agent. Use {{CUE_SOURCE_OUTPUT}} to include upstream output.'
- : 'Prompt sent when this agent receives data from the pipeline...'
- }
+ placeholder="Prompt sent when this agent receives data from the pipeline..."
style={{
...inputStyle,
resize: 'vertical',
fontFamily: 'inherit',
lineHeight: 1.4,
- ...(expanded ? { flex: 1, minHeight: 0 } : { minHeight: 72 }),
+ ...(expanded ? { flex: 1, minHeight: 0 } : {}),
}}
/>
- {hasIncomingAgentEdges && (
- <>
-
-
- Use {'{{CUE_SOURCE_OUTPUT}}'} in your prompt to control placement.
-
-
- )}
{localInputPrompt.length} chars
@@ -604,7 +562,7 @@ function AgentConfig({
fontFamily: 'inherit',
lineHeight: 1.4,
cursor: outputDisabled ? 'not-allowed' : undefined,
- ...(expanded ? { flex: 1, minHeight: 0 } : { minHeight: 72 }),
+ ...(expanded ? { flex: 1, minHeight: 0 } : {}),
}}
/>
@@ -675,14 +633,11 @@ export function NodeConfigPanel({
selectedNode,
pipelines,
hasOutgoingEdge,
- hasIncomingAgentEdges,
incomingTriggerEdges,
onUpdateNode,
onUpdateEdgePrompt,
onDeleteNode,
onSwitchToAgent,
- triggerDrawerOpen,
- agentDrawerOpen,
}: NodeConfigPanelProps) {
const [expanded, setExpanded] = useState(false);
const isVisible = selectedNode !== null;
@@ -696,16 +651,14 @@ export function NodeConfigPanel({
const Icon = triggerData ? (EVENT_ICONS[triggerData.eventType] ?? Zap) : null;
const ExpandIcon = expanded ? ChevronsDown : ChevronsUp;
- const collapsedHeight = isTrigger ? 'auto' : 240;
-
return (