@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/GroupNode.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Handle,
+  Position,
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  ReactFlowProvider,
+  type Connection,
+  type NodeTypes,
+  type NodeProps,
+} from '@xyflow/react';
+import { Layers, Maximize2, Minimize2 } from 'lucide-react';
+import { StartNode } from './StartNode';
+import { EndNode } from './EndNode';
+import { TransitionCardNode } from './TransitionCardNode';
+import { RunAgentNode } from './RunAgentNode';
+import { CheckCardPositionNode } from './CheckCardPositionNode';
+import { CheckCycleCountNode } from './CheckCycleCountNode';
+import { SetCardMetadataNode } from './SetCardMetadataNode';
+
+/** Node types available inside the group sub-canvas (no nested groups). */
+const INNER_NODE_TYPE_MAP: NodeTypes = {
+  start: StartNode,
+  end: EndNode,
+  transitionCard: TransitionCardNode,
+  runAgent: RunAgentNode,
+  checkCardPosition: CheckCardPositionNode,
+  checkCycleCount: CheckCycleCountNode,
+  setCardMetadata: SetCardMetadataNode,
+};
+
+function GroupSubCanvas({
+  initialNodes,
+  initialEdges,
+  onChange,
+}: {
+  initialNodes: any[];
+  initialEdges: any[];
+  onChange: (nodes: any[], edges: any[]) => void;
+}) {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const nodeTypes = useMemo(() => INNER_NODE_TYPE_MAP, []);
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      const edge = {
+        ...connection,
+        type: 'smoothstep',
+        animated: true,
+        style: { stroke: 'var(--accent)', strokeWidth: 2 },
+        markerEnd: { type: 'arrowclosed' as const, color: 'var(--accent)' },
+      };
+      setEdges((eds) => addEdge(edge, eds));
+    },
+    [setEdges],
+  );
+
+  // Notify parent when nodes/edges change
+  React.useEffect(() => {
+    onChange(nodes, edges);
+  }, [nodes, edges, onChange]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      snapToGrid
+      snapGrid={[8, 8]}
+      fitView
+      deleteKeyCode={['Backspace', 'Delete']}
+      defaultEdgeOptions={{
+        type: 'smoothstep',
+        animated: true,
+        style: { stroke: 'var(--accent)', strokeWidth: 1.5 },
+        markerEnd: { type: 'arrowclosed' as const, color: 'var(--accent)' },
+      }}
+      proOptions={{ hideAttribution: true }}
+      className="group-sub-canvas"
+    >
+      <Background variant={BackgroundVariant.Dots} gap={8} size={0.5} color="var(--border-color)" />
+      <MiniMap
+        nodeStrokeColor="var(--accent)"
+        nodeColor="var(--bg-tertiary)"
+        maskColor="rgba(0,0,0,0.3)"
+        className="!bg-surface !border !border-edge !rounded !w-24 !h-16"
+        pannable
+        zoomable={false}
+      />
+    </ReactFlow>
+  );
+}
+
+export function GroupNode({ data, selected }: NodeProps) {
+  const [expanded, setExpanded] = useState(false);
+  const groupData = data as any;
+  const groupName = groupData.groupName || 'Group';
+  const internalNodes = groupData.internalNodes || [];
+  const internalEdges = groupData.internalEdges || [];
+  const inputHandles: string[] = groupData.inputHandles || ['input'];
+  const outputHandles: string[] = groupData.outputHandles || ['output'];
+
+  const handleToggle = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  const handleInternalChange = useCallback(
+    (nodes: any[], edges: any[]) => {
+      // Update the group instance data (not the saved group definition)
+      groupData.internalNodes = nodes;
+      groupData.internalEdges = edges;
+    },
+    [groupData],
+  );
+
+  return (
+    <div
+      className={`rounded-lg border bg-surface-raised text-content ${
+        selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+      } ${expanded ? 'min-w-[500px] min-h-[350px]' : 'min-w-[160px]'}`}
+    >
+      {/* Input handles */}
+      {inputHandles.map((handleId, i) => (
+        <Handle
+          key={`in-${handleId}`}
+          type="target"
+          position={Position.Top}
+          id={handleId}
+          className="!w-3 !h-3 !bg-accent !border-2 !border-surface"
+          style={inputHandles.length > 1 ? { left: `${((i + 1) / (inputHandles.length + 1)) * 100}%` } : undefined}
+        />
+      ))}
+
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-edge">
+        <Layers size={14} className="text-emerald-400 shrink-0" />
+        <span className="text-[12px] font-semibold flex-1 truncate">{groupName}</span>
+        <button
+          onClick={handleToggle}
+          className="p-0.5 rounded hover:bg-surface transition-colors"
+          title={expanded ? 'Collapse group' : 'Expand group'}
+        >
+          {expanded ? <Minimize2 size={12} /> : <Maximize2 size={12} />}
+        </button>
+      </div>
+
+      {/* Collapsed state — simple summary */}
+      {!expanded && (
+        <div className="px-3 py-2 text-[10px] text-content-muted">
+          {internalNodes.length} nodes
+        </div>
+      )}
+
+      {/* Expanded state — nested ReactFlow sub-canvas */}
+      {expanded && (
+        <div className="w-[480px] h-[280px] p-1">
+          <ReactFlowProvider>
+            <GroupSubCanvas
+              initialNodes={internalNodes}
+              initialEdges={internalEdges}
+              onChange={handleInternalChange}
+            />
+          </ReactFlowProvider>
+        </div>
+      )}
+
+      {/* Output handles */}
+      {outputHandles.map((handleId, i) => (
+        <Handle
+          key={`out-${handleId}`}
+          type="source"
+          position={Position.Bottom}
+          id={handleId}
+          className="!w-3 !h-3 !bg-accent !border-2 !border-surface"
+          style={outputHandles.length > 1 ? { left: `${((i + 1) / (outputHandles.length + 1)) * 100}%` } : undefined}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/NodePalette.tsx

@@ -0,0 +1,123 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Play, Square, ArrowRightLeft, Bot, GitBranch, RefreshCw, Tag, Layers, Trash2,
+} from 'lucide-react';
+import { NODE_PALETTE_ITEMS } from './workflow_types';
+import type { WorkflowNodeType } from './workflow_types';
+import { apiClient } from '../../api/client';
+
+const NODE_ICONS: Record<string, React.ReactNode> = {
+  start: <Play size={14} className="text-accent" />,
+  end: <Square size={14} className="text-red-400" />,
+  transitionCard: <ArrowRightLeft size={14} className="text-blue-400" />,
+  runAgent: <Bot size={14} className="text-purple-400" />,
+  checkCardPosition: <GitBranch size={14} className="text-cyan-400" />,
+  checkCycleCount: <RefreshCw size={14} className="text-orange-400" />,
+  setCardMetadata: <Tag size={14} className="text-yellow-400" />,
+};
+
+interface WorkflowGroup {
+  id: string;
+  name: string;
+  projectId: string | null;
+  graphData: string;
+}
+
+interface NodePaletteProps {
+  projectId?: string;
+}
+
+export function NodePalette({ projectId }: NodePaletteProps) {
+  const [groups, setGroups] = useState<WorkflowGroup[]>([]);
+
+  const fetchGroups = useCallback(async () => {
+    try {
+      const resp = await apiClient.fetchWorkflowGroups(projectId);
+      setGroups(resp.groups || []);
+    } catch {
+      // Silent fail — groups are optional
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    fetchGroups();
+  }, [fetchGroups]);
+
+  const onDragStart = useCallback((event: React.DragEvent, nodeType: WorkflowNodeType) => {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  }, []);
+
+  const onGroupDragStart = useCallback((event: React.DragEvent, group: WorkflowGroup) => {
+    event.dataTransfer.setData('application/workflow-group', JSON.stringify(group));
+    event.dataTransfer.effectAllowed = 'move';
+  }, []);
+
+  const handleDeleteGroup = useCallback(async (groupId: string) => {
+    try {
+      await apiClient.deleteWorkflowGroup(groupId);
+      setGroups((prev) => prev.filter((g) => g.id !== groupId));
+    } catch {
+      // Silent fail
+    }
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      {/* Standard node types */}
+      <div className="space-y-1">
+        <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider px-1 mb-2">Node Palette</div>
+        {NODE_PALETTE_ITEMS.map(item => (
+          <div
+            key={item.type}
+            draggable
+            onDragStart={(e) => onDragStart(e, item.type)}
+            className="flex items-center gap-2.5 px-2.5 py-2 rounded-md border border-edge bg-surface hover:bg-surface-raised hover:border-content/20 cursor-grab active:cursor-grabbing transition-all text-[12px]"
+          >
+            {NODE_ICONS[item.type]}
+            <div>
+              <div className="font-medium text-content">{item.label}</div>
+              <div className="text-[10px] text-content-muted">{item.description}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Reusable Groups section */}
+      <div className="space-y-1">
+        <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider px-1 mb-2">Groups</div>
+        {groups.length === 0 ? (
+          <div className="px-2.5 py-2 text-[10px] text-content-muted italic">
+            No groups yet. Select nodes on the canvas, right-click, and choose "Save as Reusable Group".
+          </div>
+        ) : (
+          groups.map((group) => (
+            <div
+              key={group.id}
+              draggable
+              onDragStart={(e) => onGroupDragStart(e, group)}
+              className="flex items-center gap-2.5 px-2.5 py-2 rounded-md border border-edge bg-surface hover:bg-surface-raised hover:border-content/20 cursor-grab active:cursor-grabbing transition-all text-[12px] group/item"
+            >
+              <Layers size={14} className="text-emerald-400 shrink-0" />
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-content truncate">{group.name}</div>
+                <div className="text-[10px] text-content-muted">Reusable group</div>
+              </div>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleDeleteGroup(group.id);
+                }}
+                className="opacity-0 group-hover/item:opacity-100 p-0.5 rounded hover:bg-error/10 text-content-muted hover:text-error transition-all"
+                title="Delete group"
+              >
+                <Trash2 size={10} />
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/RunAgentNode.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Handle, Position, useReactFlow } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Bot } from 'lucide-react';
+import { apiClient } from '../../api/client';
+
+interface AgentOption {
+  id: string;
+  name: string;
+}
+
+export function RunAgentNode({ id, data, selected }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
+  const agentId = (data.agentId as string) || '';
+  const [agents, setAgents] = useState<AgentOption[]>([]);
+
+  useEffect(() => {
+    apiClient.fetchAgents('global').then(resp => {
+      setAgents(resp.agents.map((a: AgentOption) => ({ id: a.id, name: a.name })));
+    }).catch(() => {});
+  }, []);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedId = e.target.value;
+    const agent = agents.find(a => a.id === selectedId);
+    updateNodeData(id, { agentId: selectedId, agentName: agent?.name || '' });
+  }, [id, updateNodeData, agents]);
+
+  return (
+    <div className={`px-4 py-3 rounded-lg border bg-surface-raised text-content min-w-[180px] ${
+      selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+    }`}>
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+      <div className="flex items-center gap-2 mb-2">
+        <Bot size={14} className="text-purple-400" />
+        <span className="text-[12px] font-semibold">Run Agent</span>
+      </div>
+      <select
+        value={agentId}
+        onChange={handleChange}
+        className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content appearance-none"
+      >
+        <option value="">Select agent...</option>
+        {agents.map(a => (
+          <option key={a.id} value={a.id}>{a.name}</option>
+        ))}
+      </select>
+      <Handle type="source" position={Position.Bottom} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/SetCardMetadataNode.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Handle, Position, useReactFlow } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Tag } from 'lucide-react';
+
+export function SetCardMetadataNode({ id, data, selected }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
+  const key = (data.key as string) || '';
+  const value = (data.value as string) || '';
+
+  const handleKeyChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { key: e.target.value });
+  }, [id, updateNodeData]);
+
+  const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { value: e.target.value });
+  }, [id, updateNodeData]);
+
+  return (
+    <div className={`px-4 py-3 rounded-lg border bg-surface-raised text-content min-w-[180px] ${
+      selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+    }`}>
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+      <div className="flex items-center gap-2 mb-2">
+        <Tag size={14} className="text-yellow-400" />
+        <span className="text-[12px] font-semibold">Set Card Metadata</span>
+      </div>
+      <div className="space-y-1.5">
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">Key</label>
+          <input
+            type="text"
+            value={key}
+            onChange={handleKeyChange}
+            placeholder="e.g. dev_blocked"
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content"
+          />
+        </div>
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">Value</label>
+          <input
+            type="text"
+            value={value}
+            onChange={handleValueChange}
+            placeholder="e.g. true"
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content"
+          />
+        </div>
+      </div>
+      <Handle type="source" position={Position.Bottom} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/StartNode.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Play } from 'lucide-react';
+
+export function StartNode({ selected }: NodeProps) {
+  return (
+    <div className={`px-4 py-3 rounded-lg border bg-surface-raised text-content min-w-[120px] text-center ${
+      selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+    }`}>
+      <div className="flex items-center justify-center gap-2">
+        <Play size={14} className="text-accent" />
+        <span className="text-[12px] font-semibold uppercase tracking-wider">Start</span>
+      </div>
+      <Handle type="source" position={Position.Bottom} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/TransitionCardNode.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import { Handle, Position, useReactFlow } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { ArrowRightLeft } from 'lucide-react';
+import { KANBAN_COLUMNS } from './workflow_types';
+import type { KanbanColumn } from './workflow_types';
+
+export function TransitionCardNode({ id, data, selected }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
+  const sourceColumn = (data.sourceColumn as KanbanColumn) || 'todo';
+  const targetColumn = (data.targetColumn as KanbanColumn) || 'in_progress';
+
+  const handleSourceChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    updateNodeData(id, { sourceColumn: e.target.value });
+  }, [id, updateNodeData]);
+
+  const handleTargetChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    updateNodeData(id, { targetColumn: e.target.value });
+  }, [id, updateNodeData]);
+
+  return (
+    <div className={`px-4 py-3 rounded-lg border bg-surface-raised text-content min-w-[180px] ${
+      selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+    }`}>
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+      <div className="flex items-center gap-2 mb-2">
+        <ArrowRightLeft size={14} className="text-blue-400" />
+        <span className="text-[12px] font-semibold">Transition Card</span>
+      </div>
+      <div className="space-y-1.5">
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">From</label>
+          <select
+            value={sourceColumn}
+            onChange={handleSourceChange}
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content appearance-none"
+          >
+            {KANBAN_COLUMNS.map(c => (
+              <option key={c} value={c}>{c.replace('_', ' ')}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">To</label>
+          <select
+            value={targetColumn}
+            onChange={handleTargetChange}
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content appearance-none"
+          >
+            {KANBAN_COLUMNS.map(c => (
+              <option key={c} value={c}>{c.replace('_', ' ')}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <Handle type="source" position={Position.Bottom} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+    </div>
+  );
+}