@assistkick/create 1.7.0 → 1.9.0

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/autoLayout.ts

@@ -0,0 +1,103 @@
+import type { Node, Edge } from '@xyflow/react';
+
+const NODE_WIDTH = 200;
+const NODE_HEIGHT = 160;
+const HORIZONTAL_GAP = 60;
+const VERTICAL_GAP = 80;
+
+/**
+ * Auto-layout nodes as a top-down tree using BFS from root nodes.
+ * Nodes at the same depth are placed in the same row.
+ * Handles DAGs with multiple parents (node goes to the deepest level).
+ * Back-edges (cycles) are ignored during layout.
+ */
+export function autoLayoutNodes(nodes: Node[], edges: Edge[]): Node[] {
+  if (nodes.length === 0) return nodes;
+
+  // Build adjacency list (source -> targets)
+  const children = new Map<string, string[]>();
+  const parentCount = new Map<string, number>();
+  for (const node of nodes) {
+    children.set(node.id, []);
+    parentCount.set(node.id, 0);
+  }
+  for (const edge of edges) {
+    if (children.has(edge.source) && parentCount.has(edge.target)) {
+      children.get(edge.source)!.push(edge.target);
+      parentCount.set(edge.target, (parentCount.get(edge.target) || 0) + 1);
+    }
+  }
+
+  // Find root nodes (no incoming edges) — typically the start node
+  const roots = nodes.filter((n) => (parentCount.get(n.id) || 0) === 0);
+  if (roots.length === 0) {
+    // Fallback: use start-type nodes, or first node
+    const startNodes = nodes.filter((n) => n.type === 'start');
+    roots.push(...(startNodes.length > 0 ? startNodes : [nodes[0]]));
+  }
+
+  // BFS to assign depth levels — a node's depth is the longest path from any root.
+  // Back-edges (cycles) are detected and skipped to prevent infinite loops.
+  const depth = new Map<string, number>();
+  const enqueued = new Map<string, number>(); // track how many times a node was enqueued
+  const maxDepth = nodes.length; // no valid path can exceed the number of nodes
+  const queue: Array<{ id: string; d: number }> = [];
+  for (const root of roots) {
+    depth.set(root.id, 0);
+    enqueued.set(root.id, 1);
+    queue.push({ id: root.id, d: 0 });
+  }
+
+  while (queue.length > 0) {
+    const { id, d } = queue.shift()!;
+    for (const childId of children.get(id) || []) {
+      const newDepth = d + 1;
+      // Skip back-edges that would exceed the maximum possible depth
+      if (newDepth > maxDepth) continue;
+      const currentDepth = depth.get(childId);
+      // Use the maximum depth (longest path) to handle DAGs
+      if (currentDepth === undefined || newDepth > currentDepth) {
+        depth.set(childId, newDepth);
+        queue.push({ id: childId, d: newDepth });
+      }
+    }
+  }
+
+  // Assign any unvisited nodes (disconnected) to depth 0
+  for (const node of nodes) {
+    if (!depth.has(node.id)) {
+      depth.set(node.id, 0);
+    }
+  }
+
+  // Group nodes by depth level
+  const levels = new Map<number, Node[]>();
+  for (const node of nodes) {
+    const d = depth.get(node.id)!;
+    if (!levels.has(d)) levels.set(d, []);
+    levels.get(d)!.push(node);
+  }
+
+  // Sort levels by depth
+  const sortedDepths = [...levels.keys()].sort((a, b) => a - b);
+
+  // Position nodes: center each row horizontally, stack rows vertically
+  const positioned = new Map<string, { x: number; y: number }>();
+  for (const d of sortedDepths) {
+    const levelNodes = levels.get(d)!;
+    const rowWidth = levelNodes.length * NODE_WIDTH + (levelNodes.length - 1) * HORIZONTAL_GAP;
+    const startX = -rowWidth / 2;
+
+    for (let i = 0; i < levelNodes.length; i++) {
+      positioned.set(levelNodes[i].id, {
+        x: startX + i * (NODE_WIDTH + HORIZONTAL_GAP),
+        y: d * (NODE_HEIGHT + VERTICAL_GAP),
+      });
+    }
+  }
+
+  return nodes.map((node) => ({
+    ...node,
+    position: positioned.get(node.id) || node.position,
+  }));
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/edgeColors.ts

@@ -0,0 +1,35 @@
+import type { Edge } from '@xyflow/react';
+
+const EDGE_COLORS = [
+  '#b5e853', // lime green
+  '#f06292', // pink
+  '#4fc3f7', // sky blue
+  '#ffb74d', // orange
+  '#ce93d8', // purple
+  '#4db6ac', // teal
+  '#fff176', // yellow
+  '#e57373', // coral red
+  '#90a4ae', // blue grey
+  '#aed581', // light green
+];
+
+/**
+ * Assigns a unique color to each outgoing edge of a node from a 10-color swatch.
+ * Edges from the same source get sequential colors so they're visually distinct.
+ */
+export const colorizeEdges = (edges: Edge[]): Edge[] => {
+  // Group edges by source, preserving insertion order
+  const sourceIndex = new Map<string, number>();
+
+  return edges.map((edge) => {
+    const idx = sourceIndex.get(edge.source) ?? 0;
+    sourceIndex.set(edge.source, idx + 1);
+    const color = EDGE_COLORS[idx % EDGE_COLORS.length];
+
+    return {
+      ...edge,
+      style: { ...edge.style, stroke: color, strokeWidth: 2 },
+      markerEnd: { type: 'arrowclosed' as const, color },
+    };
+  });
+};

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

@@ -0,0 +1,246 @@
+/**
+ * Lightweight read-only node components for the Workflow Monitor.
+ * These re-render with execution state but are non-interactive (no editing).
+ * They include proper Handles so React Flow can render edges correctly.
+ */
+
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import {
+  Play, Square, ArrowLeftRight, Bot, MapPin, RefreshCw, Tag, Layers,
+  CircleDot, CheckCircle2, AlertTriangle, Clock, Package, Volume2, Film,
+} from 'lucide-react';
+
+/* ── Execution status styling ── */
+
+const STATUS_RING: Record<string, string> = {
+  running: 'ring-2 ring-accent animate-pulse',
+  completed: 'ring-2 ring-emerald-400',
+  failed: 'ring-2 ring-error',
+};
+
+const STATUS_BG: Record<string, string> = {
+  running: 'bg-accent/10',
+  completed: 'bg-emerald-500/10',
+  failed: 'bg-error/10',
+  pending: 'bg-white/[0.03]',
+};
+
+function statusIcon(status: string, size = 14) {
+  if (status === 'running') return <CircleDot size={size} className="text-accent animate-pulse" />;
+  if (status === 'completed') return <CheckCircle2 size={size} className="text-emerald-400" />;
+  if (status === 'failed') return <AlertTriangle size={size} className="text-error" />;
+  return <Clock size={size} className="text-content-muted" />;
+}
+
+/* ── Base wrapper ── */
+
+function MonitorNodeWrapper({
+  id,
+  data,
+  icon,
+  label,
+  detail,
+  hasSource = true,
+  hasTarget = true,
+  sourceHandles,
+}: {
+  id: string;
+  data: Record<string, unknown>;
+  icon: React.ReactNode;
+  label: string;
+  detail?: string;
+  hasSource?: boolean;
+  hasTarget?: boolean;
+  sourceHandles?: string[];
+}) {
+  const execStatus = (data._execStatus as string) || 'pending';
+  const error = data._error as string | null;
+  const onNodeClick = data._onNodeClick as ((nodeId: string) => void) | undefined;
+  const ringCls = STATUS_RING[execStatus] || '';
+  const bgCls = STATUS_BG[execStatus] || STATUS_BG.pending;
+
+  return (
+    <div
+      className={`px-4 py-3 rounded-lg border border-edge ${bgCls} ${ringCls} text-content min-w-[160px] cursor-pointer transition-all hover:border-content/30`}
+      onClick={(e) => { e.stopPropagation(); onNodeClick?.(id); }}
+    >
+      {hasTarget && (
+        <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-1">
+        {statusIcon(execStatus)}
+        {icon}
+        <span className="text-[11px] font-semibold uppercase tracking-wider">{label}</span>
+      </div>
+      {detail && (
+        <div className="text-[10px] text-content-secondary truncate">{detail}</div>
+      )}
+      {error && (
+        <div className="mt-1 flex items-center gap-1 text-[10px] text-error truncate">
+          <AlertTriangle size={10} />
+          <span className="truncate">{error}</span>
+        </div>
+      )}
+      {hasSource && !sourceHandles && (
+        <Handle type="source" position={Position.Bottom} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+      )}
+      {sourceHandles && sourceHandles.map(handle => (
+        <Handle
+          key={handle}
+          type="source"
+          position={Position.Bottom}
+          id={handle}
+          className="!w-3 !h-3 !bg-accent !border-2 !border-surface"
+        />
+      ))}
+    </div>
+  );
+}
+
+/* ── Specific node types ── */
+
+export function MonitorStartNode({ id, data }: NodeProps) {
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={data as Record<string, unknown>}
+      icon={<Play size={14} className="text-accent" />}
+      label="Start"
+      hasTarget={false}
+    />
+  );
+}
+
+export function MonitorEndNode({ id, data }: NodeProps) {
+  const outcome = (data.outcome as string) || (data.statusType as string) || 'success';
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={data as Record<string, unknown>}
+      icon={<Square size={14} className={outcome === 'success' ? 'text-accent' : outcome === 'blocked' ? 'text-amber-400' : 'text-error'} />}
+      label="End"
+      detail={outcome}
+      hasSource={false}
+    />
+  );
+}
+
+export function MonitorTransitionCardNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<ArrowLeftRight size={14} className="text-blue-400" />}
+      label="Transition Card"
+      detail={`${d.fromColumn || '?'} \u2192 ${d.toColumn || '?'}`}
+    />
+  );
+}
+
+export function MonitorRunAgentNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<Bot size={14} className="text-purple-400" />}
+      label="Run Agent"
+      detail={(d.agentName as string) || (d.agentId as string) || ''}
+    />
+  );
+}
+
+export function MonitorCheckCardPositionNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  const outputs = (d.outputs as string[]) || ['backlog', 'todo', 'in_progress', 'in_review', 'qa', 'done'];
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<MapPin size={14} className="text-cyan-400" />}
+      label="Check Position"
+      sourceHandles={outputs}
+    />
+  );
+}
+
+export function MonitorCheckCycleCountNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<RefreshCw size={14} className="text-amber-400" />}
+      label="Check Cycles"
+      detail={`max: ${d.maxCycles || '?'}`}
+      sourceHandles={['under_limit', 'at_limit']}
+    />
+  );
+}
+
+export function MonitorSetCardMetadataNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<Tag size={14} className="text-teal-400" />}
+      label="Set Metadata"
+      detail={`${d.key || '?'} = ${d.value || '?'}`}
+    />
+  );
+}
+
+export function MonitorGroupNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<Layers size={14} className="text-indigo-400" />}
+      label="Group"
+      detail={(d.groupName as string) || ''}
+    />
+  );
+}
+
+export function MonitorRebuildBundleNode({ id, data }: NodeProps) {
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={data as Record<string, unknown>}
+      icon={<Package size={14} className="text-orange-400" />}
+      label="Rebuild Bundle"
+      detail="Remotion webpack build"
+    />
+  );
+}
+
+export function MonitorGenerateTTSNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<Volume2 size={14} className="text-emerald-400" />}
+      label="Generate TTS"
+      detail={(d.scriptPath as string) || 'script.md'}
+    />
+  );
+}
+
+export function MonitorRenderVideoNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<Film size={14} className="text-rose-400" />}
+      label="Render Video"
+      detail={`${(d.compositionId as string) || 'auto'} @ ${(d.resolution as string) || '1920x1080'}`}
+    />
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/workflow_types.test.ts

@@ -0,0 +1,119 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  WORKFLOW_NODE_TYPES,
+  KANBAN_COLUMNS,
+  END_STATUS_TYPES,
+  NODE_PALETTE_ITEMS,
+  NODE_DEFAULTS,
+} from './workflow_types.ts';
+
+describe('WORKFLOW_NODE_TYPES', () => {
+  it('contains all eight node types including group', () => {
+    assert.equal(WORKFLOW_NODE_TYPES.length, 8);
+    assert.ok(WORKFLOW_NODE_TYPES.includes('start'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('end'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('transitionCard'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('runAgent'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('checkCardPosition'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('checkCycleCount'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('setCardMetadata'));
+    assert.ok(WORKFLOW_NODE_TYPES.includes('group'));
+  });
+});
+
+describe('KANBAN_COLUMNS', () => {
+  it('contains the six kanban columns in order', () => {
+    assert.deepEqual([...KANBAN_COLUMNS], [
+      'backlog', 'todo', 'in_progress', 'in_review', 'qa', 'done',
+    ]);
+  });
+});
+
+describe('END_STATUS_TYPES', () => {
+  it('contains success, blocked, and failed', () => {
+    assert.deepEqual([...END_STATUS_TYPES], ['success', 'blocked', 'failed']);
+  });
+});
+
+describe('NODE_PALETTE_ITEMS', () => {
+  it('has entries for all non-group node types', () => {
+    // group is not in the palette (it's added via the Groups section)
+    const paletteTypes = NODE_PALETTE_ITEMS.map(item => item.type);
+    for (const nodeType of WORKFLOW_NODE_TYPES) {
+      if (nodeType === 'group') continue;
+      assert.ok(paletteTypes.includes(nodeType), `Missing palette item for ${nodeType}`);
+    }
+  });
+
+  it('each item has a non-empty label and description', () => {
+    for (const item of NODE_PALETTE_ITEMS) {
+      assert.ok(item.label.length > 0, `Empty label for ${item.type}`);
+      assert.ok(item.description.length > 0, `Empty description for ${item.type}`);
+    }
+  });
+});
+
+describe('NODE_DEFAULTS', () => {
+  it('has a default factory for every node type', () => {
+    for (const nodeType of WORKFLOW_NODE_TYPES) {
+      assert.ok(typeof NODE_DEFAULTS[nodeType] === 'function', `Missing default for ${nodeType}`);
+    }
+  });
+
+  it('start returns empty object', () => {
+    const result = NODE_DEFAULTS.start();
+    assert.deepEqual(result, {});
+  });
+
+  it('transitionCard returns default columns', () => {
+    const result = NODE_DEFAULTS.transitionCard();
+    assert.equal(result.sourceColumn, 'todo');
+    assert.equal(result.targetColumn, 'in_progress');
+  });
+
+  it('runAgent returns empty agentId and agentName', () => {
+    const result = NODE_DEFAULTS.runAgent();
+    assert.equal(result.agentId, '');
+    assert.equal(result.agentName, '');
+  });
+
+  it('checkCardPosition returns empty object', () => {
+    const result = NODE_DEFAULTS.checkCardPosition();
+    assert.deepEqual(result, {});
+  });
+
+  it('checkCycleCount defaults maxCount to 3', () => {
+    const result = NODE_DEFAULTS.checkCycleCount();
+    assert.equal(result.maxCount, 3);
+  });
+
+  it('setCardMetadata returns empty key and value', () => {
+    const result = NODE_DEFAULTS.setCardMetadata();
+    assert.equal(result.key, '');
+    assert.equal(result.value, '');
+  });
+
+  it('end defaults statusType to success', () => {
+    const result = NODE_DEFAULTS.end();
+    assert.equal(result.statusType, 'success');
+  });
+
+  it('group returns default group data', () => {
+    const result = NODE_DEFAULTS.group();
+    assert.equal(result.groupId, '');
+    assert.equal(result.groupName, '');
+    assert.ok(Array.isArray(result.internalNodes));
+    assert.ok(Array.isArray(result.internalEdges));
+    assert.ok(Array.isArray(result.inputHandles));
+    assert.ok(Array.isArray(result.outputHandles));
+  });
+
+  it('each factory returns a new object on each call (no shared state)', () => {
+    for (const nodeType of WORKFLOW_NODE_TYPES) {
+      const a = NODE_DEFAULTS[nodeType]();
+      const b = NODE_DEFAULTS[nodeType]();
+      assert.notEqual(a, b, `${nodeType} factory returns same object reference`);
+    }
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/workflow_types.ts

@@ -0,0 +1,136 @@
+import type { Node, Edge } from '@xyflow/react';
+
+export const WORKFLOW_NODE_TYPES = [
+  'start',
+  'transitionCard',
+  'runAgent',
+  'checkCardPosition',
+  'checkCycleCount',
+  'setCardMetadata',
+  'end',
+  'group',
+  'rebuildBundle',
+  'generateTTS',
+  'renderVideo',
+] as const;
+
+export type WorkflowNodeType = typeof WORKFLOW_NODE_TYPES[number];
+
+export const KANBAN_COLUMNS = [
+  'backlog',
+  'todo',
+  'in_progress',
+  'in_review',
+  'qa',
+  'done',
+] as const;
+
+export type KanbanColumn = typeof KANBAN_COLUMNS[number];
+
+export const END_STATUS_TYPES = ['success', 'blocked', 'failed'] as const;
+export type EndStatusType = typeof END_STATUS_TYPES[number];
+
+export interface TransitionCardData {
+  sourceColumn: KanbanColumn;
+  targetColumn: KanbanColumn;
+}
+
+export interface RunAgentData {
+  agentId: string;
+  agentName: string;
+}
+
+export interface CheckCardPositionData {
+  // no config needed — outputs are per-column handles
+}
+
+export interface CheckCycleCountData {
+  maxCount: number;
+}
+
+export interface SetCardMetadataData {
+  key: string;
+  value: string;
+}
+
+export interface EndNodeData {
+  statusType: EndStatusType;
+}
+
+export interface StartNodeData {
+  // no config
+}
+
+export interface GroupNodeData {
+  groupId: string;
+  groupName: string;
+  /** The internal nodes/edges of this group instance (may diverge from saved definition) */
+  internalNodes: Node[];
+  internalEdges: Edge[];
+  /** Handle IDs for external connections */
+  inputHandles: string[];
+  outputHandles: string[];
+}
+
+export interface RebuildBundleData {
+  // no config needed — triggers Remotion webpack bundler
+}
+
+export interface GenerateTTSData {
+  scriptPath: string;
+  force: boolean;
+  voiceId: string;
+}
+
+export interface RenderVideoData {
+  compositionId: string;
+  resolution: string;
+  aspectRatio: string;
+  fileOutputPrefix: string;
+}
+
+export type WorkflowNodeData =
+  | ({ type: 'start' } & StartNodeData)
+  | ({ type: 'transitionCard' } & TransitionCardData)
+  | ({ type: 'runAgent' } & RunAgentData)
+  | ({ type: 'checkCardPosition' } & CheckCardPositionData)
+  | ({ type: 'checkCycleCount' } & CheckCycleCountData)
+  | ({ type: 'setCardMetadata' } & SetCardMetadataData)
+  | ({ type: 'end' } & EndNodeData)
+  | ({ type: 'group' } & GroupNodeData)
+  | ({ type: 'rebuildBundle' } & RebuildBundleData)
+  | ({ type: 'generateTTS' } & GenerateTTSData)
+  | ({ type: 'renderVideo' } & RenderVideoData);
+
+export interface NodePaletteItem {
+  type: WorkflowNodeType;
+  label: string;
+  description: string;
+}
+
+export const NODE_PALETTE_ITEMS: NodePaletteItem[] = [
+  { type: 'start', label: 'Start', description: 'Workflow entry point' },
+  { type: 'transitionCard', label: 'Transition Card', description: 'Move card between columns' },
+  { type: 'runAgent', label: 'Run Agent', description: 'Execute an AI agent' },
+  { type: 'checkCardPosition', label: 'Check Card Position', description: 'Branch by card column' },
+  { type: 'checkCycleCount', label: 'Check Cycle Count', description: 'Branch by iteration count' },
+  { type: 'setCardMetadata', label: 'Set Card Metadata', description: 'Set key/value on card' },
+  { type: 'end', label: 'End', description: 'Workflow exit point' },
+  { type: 'rebuildBundle', label: 'Rebuild Bundle', description: 'Build Remotion webpack bundle' },
+  { type: 'generateTTS', label: 'Generate TTS', description: 'Generate text-to-speech audio' },
+  { type: 'renderVideo', label: 'Render Video', description: 'Render composition to MP4' },
+];
+
+export const NODE_DEFAULTS: Record<string, () => Record<string, unknown>> = {
+  start: () => ({}),
+  transitionCard: () => ({ sourceColumn: 'todo', targetColumn: 'in_progress' }),
+  runAgent: () => ({ agentId: '', agentName: '' }),
+  checkCardPosition: () => ({}),
+  checkCycleCount: () => ({ maxCount: 3 }),
+  setCardMetadata: () => ({ key: '', value: '' }),
+  end: () => ({ statusType: 'success' }),
+  group: () => ({ groupId: '', groupName: '', internalNodes: [], internalEdges: [], inputHandles: [], outputHandles: [] }),
+  rebuildBundle: () => ({}),
+  generateTTS: () => ({ scriptPath: '', force: false, voiceId: '' }),
+  renderVideo: () => ({ compositionId: '', resolution: '1920x1080', aspectRatio: '', fileOutputPrefix: '' }),
+};