@assistkick/create 1.8.0 → 1.10.0

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

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { Handle, Position, useReactFlow } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Film } from 'lucide-react';
+
+export function RenderVideoNode({ id, data, selected }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
+  const compositionId = (data.compositionId as string) || '';
+  const resolution = (data.resolution as string) || '1920x1080';
+  const fileOutputPrefix = (data.fileOutputPrefix as string) || '';
+
+  const handleCompositionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { compositionId: e.target.value });
+  }, [id, updateNodeData]);
+
+  const handleResolutionChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    updateNodeData(id, { resolution: e.target.value });
+  }, [id, updateNodeData]);
+
+  const handlePrefixChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { fileOutputPrefix: e.target.value });
+  }, [id, updateNodeData]);
+
+  return (
+    <div className={`px-4 py-3 rounded-lg border bg-surface-raised text-content min-w-[200px] ${
+      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">
+        <Film size={14} className="text-rose-400" />
+        <span className="text-[12px] font-semibold">Render Video</span>
+      </div>
+      <div className="space-y-1.5">
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">Composition</label>
+          <input
+            type="text"
+            value={compositionId}
+            onChange={handleCompositionChange}
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content"
+            placeholder="auto from context"
+          />
+        </div>
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">Resolution</label>
+          <select
+            value={resolution}
+            onChange={handleResolutionChange}
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content appearance-none"
+          >
+            <option value="1920x1080">1920x1080 (16:9)</option>
+            <option value="1080x1920">1080x1920 (9:16)</option>
+            <option value="1280x720">1280x720 (16:9)</option>
+            <option value="720x1280">720x1280 (9:16)</option>
+            <option value="1080x1080">1080x1080 (1:1)</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">Output prefix</label>
+          <input
+            type="text"
+            value={fileOutputPrefix}
+            onChange={handlePrefixChange}
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content"
+            placeholder="auto"
+          />
+        </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/WorkflowCanvas.tsx

@@ -27,6 +27,9 @@ import { CheckCardPositionNode } from './CheckCardPositionNode';
 import { CheckCycleCountNode } from './CheckCycleCountNode';
 import { SetCardMetadataNode } from './SetCardMetadataNode';
 import { GroupNode } from './GroupNode';
+import { RebuildBundleNode } from './RebuildBundleNode';
+import { GenerateTTSNode } from './GenerateTTSNode';
+import { RenderVideoNode } from './RenderVideoNode';
 import { NODE_DEFAULTS } from './workflow_types';
 import type { WorkflowNodeType } from './workflow_types';
 import { autoLayoutNodes } from './autoLayout';
@@ -41,6 +44,9 @@ const NODE_TYPE_MAP: NodeTypes = {
   checkCycleCount: CheckCycleCountNode,
   setCardMetadata: SetCardMetadataNode,
   group: GroupNode,
+  rebuildBundle: RebuildBundleNode,
+  generateTTS: GenerateTTSNode,
+  renderVideo: RenderVideoNode,
 };
 
 interface ContextMenuState {

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

@@ -25,6 +25,9 @@ import {
   MonitorCheckCycleCountNode,
   MonitorSetCardMetadataNode,
   MonitorGroupNode,
+  MonitorRebuildBundleNode,
+  MonitorGenerateTTSNode,
+  MonitorRenderVideoNode,
 } from './monitor_nodes';
 import { colorizeEdges } from './edgeColors';
 
@@ -113,6 +116,9 @@ const MONITOR_NODE_TYPES: NodeTypes = {
   checkCycleCount: MonitorCheckCycleCountNode,
   setCardMetadata: MonitorSetCardMetadataNode,
   group: MonitorGroupNode,
+  rebuildBundle: MonitorRebuildBundleNode,
+  generateTTS: MonitorGenerateTTSNode,
+  renderVideo: MonitorRenderVideoNode,
 };
 
 function getNodeTypeLabel(type: string): string {
@@ -125,6 +131,9 @@ function getNodeTypeLabel(type: string): string {
     case 'checkCycleCount': return 'Check Cycles';
     case 'setCardMetadata': return 'Set Metadata';
     case 'group': return 'Group';
+    case 'rebuildBundle': return 'Rebuild Bundle';
+    case 'generateTTS': return 'Generate TTS';
+    case 'renderVideo': return 'Render Video';
     default: return type;
   }
 }

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

@@ -9,7 +9,7 @@ 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,
+  CircleDot, CheckCircle2, AlertTriangle, Clock, Package, Volume2, Film,
 } from 'lucide-react';
 
 /* ── Execution status styling ── */
@@ -206,3 +206,41 @@ export function MonitorGroupNode({ id, data }: NodeProps) {
     />
   );
 }
+
+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.ts

@@ -9,6 +9,9 @@ export const WORKFLOW_NODE_TYPES = [
   'setCardMetadata',
   'end',
   'group',
+  'rebuildBundle',
+  'generateTTS',
+  'renderVideo',
 ] as const;
 
 export type WorkflowNodeType = typeof WORKFLOW_NODE_TYPES[number];
@@ -69,6 +72,23 @@ export interface GroupNodeData {
   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)
@@ -77,7 +97,10 @@ export type WorkflowNodeData =
   | ({ type: 'checkCycleCount' } & CheckCycleCountData)
   | ({ type: 'setCardMetadata' } & SetCardMetadataData)
   | ({ type: 'end' } & EndNodeData)
-  | ({ type: 'group' } & GroupNodeData);
+  | ({ type: 'group' } & GroupNodeData)
+  | ({ type: 'rebuildBundle' } & RebuildBundleData)
+  | ({ type: 'generateTTS' } & GenerateTTSData)
+  | ({ type: 'renderVideo' } & RenderVideoData);
 
 export interface NodePaletteItem {
   type: WorkflowNodeType;
@@ -93,6 +116,9 @@ export const NODE_PALETTE_ITEMS: NodePaletteItem[] = [
   { 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>> = {
@@ -104,4 +130,7 @@ export const NODE_DEFAULTS: Record<string, () => Record<string, unknown>> = {
   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: '' }),
 };

package/templates/assistkick-product-system/packages/shared/db/migrations/0014_nifty_punisher.sql

@@ -0,0 +1,15 @@
+ALTER TABLE `workflows` ADD `trigger_column` text;--> statement-breakpoint
+-- Seed video agents with fixed IDs (syncDefaults will update their templates on startup)
+INSERT OR IGNORE INTO agents (id, name, prompt_template, project_id, is_default, created_at, updated_at) VALUES
+  ('a1b2c3d4-e5f6-7890-abcd-ef1234567890', 'Default Video Script Writer', 'Placeholder — synced on startup from SKILL.md', NULL, 1, '2026-03-11T00:00:00.000Z', '2026-03-11T00:00:00.000Z'),
+  ('b2c3d4e5-f6a7-8901-bcde-f12345678901', 'Default Video Composition Agent', 'Placeholder — synced on startup from SKILL.md', NULL, 1, '2026-03-11T00:00:00.000Z', '2026-03-11T00:00:00.000Z');--> statement-breakpoint
+-- Seed three column-gated video workflows
+-- 1. Script Generation (TODO column) — scriptWriter agent produces script markdown
+INSERT INTO workflows (id, name, description, project_id, feature_type, trigger_column, is_default, graph_data, created_at, updated_at) VALUES
+  ('wf-video-script-gen', 'Video Script Generation', 'Generate video script from feature description. Available when video feature is in TODO.', NULL, 'video', 'todo', 0, '{"nodes":[{"id":"start","type":"start","position":{"x":50,"y":250},"data":{"label":"Start"}},{"id":"agent_script","type":"runAgent","position":{"x":300,"y":250},"data":{"label":"Run Script Writer","agentId":"a1b2c3d4-e5f6-7890-abcd-ef1234567890","agentName":"Default Video Script Writer"}},{"id":"transition_review","type":"transitionCard","position":{"x":600,"y":250},"data":{"label":"Move to Review","fromColumn":"todo","toColumn":"in_review"}},{"id":"end_success","type":"end","position":{"x":900,"y":250},"data":{"label":"End (Success)","outcome":"success"}}],"edges":[{"id":"e1","source":"start","target":"agent_script"},{"id":"e2","source":"agent_script","target":"transition_review"},{"id":"e3","source":"transition_review","target":"end_success"}]}', '2026-03-11T00:00:00.000Z', '2026-03-11T00:00:00.000Z');--> statement-breakpoint
+-- 2. Generate Preview (Review column) — compositionBuilder agent + bundle + TTS
+INSERT INTO workflows (id, name, description, project_id, feature_type, trigger_column, is_default, graph_data, created_at, updated_at) VALUES
+  ('wf-video-gen-preview', 'Video Generate Preview', 'Build composition, rebuild bundle, and generate TTS audio. Available when video feature is in Review.', NULL, 'video', 'in_review', 0, '{"nodes":[{"id":"start","type":"start","position":{"x":50,"y":250},"data":{"label":"Start"}},{"id":"agent_comp","type":"runAgent","position":{"x":300,"y":250},"data":{"label":"Run Composition Builder","agentId":"b2c3d4e5-f6a7-8901-bcde-f12345678901","agentName":"Default Video Composition Agent"}},{"id":"rebuild","type":"rebuildBundle","position":{"x":600,"y":250},"data":{"label":"Rebuild Bundle"}},{"id":"tts","type":"generateTTS","position":{"x":900,"y":250},"data":{"label":"Generate TTS","scriptPath":"script.md","force":false,"voiceId":""}},{"id":"transition_qa","type":"transitionCard","position":{"x":1200,"y":250},"data":{"label":"Move to QA","fromColumn":"in_review","toColumn":"qa"}},{"id":"end_success","type":"end","position":{"x":1500,"y":250},"data":{"label":"End (Success)","outcome":"success"}}],"edges":[{"id":"e1","source":"start","target":"agent_comp"},{"id":"e2","source":"agent_comp","target":"rebuild"},{"id":"e3","source":"rebuild","target":"tts"},{"id":"e4","source":"tts","target":"transition_qa"},{"id":"e5","source":"transition_qa","target":"end_success"}]}', '2026-03-11T00:00:00.000Z', '2026-03-11T00:00:00.000Z');--> statement-breakpoint
+-- 3. Rendering Pipeline (QA column) — renderVideo with configurable settings
+INSERT INTO workflows (id, name, description, project_id, feature_type, trigger_column, is_default, graph_data, created_at, updated_at) VALUES
+  ('wf-video-render', 'Video Rendering Pipeline', 'Render video with configurable resolution and output settings. Available when video feature is in QA.', NULL, 'video', 'qa', 0, '{"nodes":[{"id":"start","type":"start","position":{"x":50,"y":250},"data":{"label":"Start"}},{"id":"render","type":"renderVideo","position":{"x":300,"y":250},"data":{"label":"Render Video","compositionId":"","resolution":"1920x1080","aspectRatio":"","fileOutputPrefix":""}},{"id":"transition_done","type":"transitionCard","position":{"x":600,"y":250},"data":{"label":"Move to Done","fromColumn":"qa","toColumn":"done"}},{"id":"end_success","type":"end","position":{"x":900,"y":250},"data":{"label":"End (Success)","outcome":"success"}}],"edges":[{"id":"e1","source":"start","target":"render"},{"id":"e2","source":"render","target":"transition_done"},{"id":"e3","source":"transition_done","target":"end_success"}]}', '2026-03-11T00:00:00.000Z', '2026-03-11T00:00:00.000Z');