@assistkick/create 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistkick/create",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Scaffold assistkick-product-system into any project",
   "type": "module",
   "bin": {

package/templates/assistkick-product-system/packages/backend/src/routes/kanban.ts

@@ -64,8 +64,8 @@ router.post('/:id/move', async (req, res) => {
   const featureId = req.params.id;
   log('API', `POST /api/kanban/${featureId}/move`);
   try {
-    const { column } = req.body;
-    log('MOVE', `${featureId} → target: ${column}`);
+    const { column, comment } = req.body;
+    log('MOVE', `${featureId} → target: ${column}${comment ? ' (with comment)' : ''}`);
 
     if (!column) {
       log('MOVE', `REJECT: missing column`);
@@ -101,6 +101,22 @@ router.post('/:id/move', async (req, res) => {
       log('MOVE', `QA rejection #${entry.rejection_count} for ${featureId}`);
     }
 
+    // Store iteration comment as a note when moving backward with a comment
+    if (comment && typeof comment === 'string' && comment.trim()) {
+      const currentIdx = VALID_COLUMNS.indexOf(currentColumn);
+      const targetIdx = VALID_COLUMNS.indexOf(column);
+      if (targetIdx < currentIdx) {
+        if (!entry.notes) entry.notes = [];
+        entry.notes.push({
+          id: randomUUID().slice(0, 8),
+          text: `[Iteration feedback ${currentColumn} → ${column}] ${comment.trim()}`,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        });
+        log('MOVE', `Stored iteration comment for ${featureId}`);
+      }
+    }
+
     await saveKanbanEntry(featureId, entry);
     log('MOVE', `OK: ${featureId} ${currentColumn} → ${column}`);
 

package/templates/assistkick-product-system/packages/backend/src/routes/workflows.ts

@@ -19,13 +19,15 @@ interface WorkflowRoutesDeps {
 export const createWorkflowRoutes = ({ workflowService, log }: WorkflowRoutesDeps): Router => {
   const router: Router = Router();
 
-  // GET /api/workflows?projectId=...
+  // GET /api/workflows?projectId=...&featureType=...&triggerColumn=...
   router.get('/', async (req, res) => {
     const projectId = req.query.projectId as string | undefined;
-    log('WORKFLOWS', `GET /api/workflows projectId=${projectId || 'none'}`);
+    const featureType = req.query.featureType as string | undefined;
+    const triggerColumn = req.query.triggerColumn as string | undefined;
+    log('WORKFLOWS', `GET /api/workflows projectId=${projectId || 'none'} featureType=${featureType || 'none'} triggerColumn=${triggerColumn || 'none'}`);
 
     try {
-      const workflowList = await workflowService.list(projectId);
+      const workflowList = await workflowService.list(projectId, featureType, triggerColumn);
       res.json({ workflows: workflowList });
     } catch (err: any) {
       log('WORKFLOWS', `List workflows failed: ${err.message}`);
@@ -53,7 +55,7 @@ export const createWorkflowRoutes = ({ workflowService, log }: WorkflowRoutesDep
 
   // POST /api/workflows
   router.post('/', async (req, res) => {
-    const { name, description, projectId, featureType, graphData } = req.body;
+    const { name, description, projectId, featureType, triggerColumn, graphData } = req.body;
     log('WORKFLOWS', `POST /api/workflows name="${name}"`);
 
     if (!name || typeof name !== 'string' || !name.trim()) {
@@ -72,6 +74,7 @@ export const createWorkflowRoutes = ({ workflowService, log }: WorkflowRoutesDep
         description: description || null,
         projectId: projectId || null,
         featureType: featureType || null,
+        triggerColumn: triggerColumn || null,
         graphData,
       });
       res.status(201).json({ workflow });
@@ -84,7 +87,7 @@ export const createWorkflowRoutes = ({ workflowService, log }: WorkflowRoutesDep
   // PUT /api/workflows/:id
   router.put('/:id', async (req, res) => {
     const { id } = req.params;
-    const { name, description, featureType, graphData } = req.body;
+    const { name, description, featureType, triggerColumn, graphData } = req.body;
     log('WORKFLOWS', `PUT /api/workflows/${id}`);
 
     if (name !== undefined && (typeof name !== 'string' || !name.trim())) {
@@ -97,6 +100,7 @@ export const createWorkflowRoutes = ({ workflowService, log }: WorkflowRoutesDep
         name: name?.trim(),
         description,
         featureType,
+        triggerColumn,
         graphData,
       });
       res.json({ workflow });

package/templates/assistkick-product-system/packages/backend/src/server.ts

@@ -16,7 +16,7 @@ import { fileURLToPath } from 'node:url';
 import { existsSync } from 'node:fs';
 import { WebSocketServer } from 'ws';
 import * as pty from 'node-pty';
-import { initServices, log, githubAppService, sshKeyService, workspaceService, workflowEngine, orchestrator, workflowService as initWorkflowService, workflowGroupService as initWorkflowGroupService } from './services/init.js';
+import { initServices, log, githubAppService, sshKeyService, workspaceService, workflowEngine, orchestrator, workflowService as initWorkflowService, workflowGroupService as initWorkflowGroupService, bundleService, ttsService, videoRenderService } from './services/init.js';
 import { AuthService } from './services/auth_service.js';
 import { EmailService } from './services/email_service.js';
 import { PasswordResetService } from './services/password_reset_service.js';
@@ -41,9 +41,6 @@ import { AgentService } from './services/agent_service.js';
 import { createAgentRoutes } from './routes/agents.js';
 import { createWorkflowRoutes } from './routes/workflows.js';
 import { createWorkflowGroupRoutes } from './routes/workflow_groups.js';
-import { TtsService } from './services/tts_service.js';
-import { BundleService } from './services/bundle_service.js';
-import { VideoRenderService } from './services/video_render_service.js';
 import { createVideoRoutes } from './routes/video.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -145,24 +142,6 @@ const workflowGroupRoutes = createWorkflowGroupRoutes({ workflowGroupService: in
 app.use('/api/workflow-groups', authMiddleware.requireAuth, workflowGroupRoutes);
 
 // Video routes (authenticated) — TTS audio generation, bundle management, compositions
-const VIDEO_PACKAGE_DIR = join(__dirname, '..', '..', 'video');
-const BUNDLE_OUTPUT_DIR = process.env.REMOTION_BUNDLE_DIR || join(__dirname, '..', '..', '..', '..', 'data', 'remotion-bundle');
-const ttsService = new TtsService({
-  workspacesDir: process.env.WORKSPACES_DIR || join(__dirname, '..', '..', '..', '..', 'workspaces'),
-  videoPackageDir: VIDEO_PACKAGE_DIR,
-  log,
-});
-const bundleService = new BundleService({
-  videoPackageDir: VIDEO_PACKAGE_DIR,
-  bundleOutputDir: BUNDLE_OUTPUT_DIR,
-  log,
-});
-const videoRenderService = new VideoRenderService({
-  getDb,
-  workspacesDir: process.env.WORKSPACES_DIR || join(__dirname, '..', '..', '..', '..', 'workspaces'),
-  bundleOutputDir: BUNDLE_OUTPUT_DIR,
-  log,
-});
 const videoRoutes = createVideoRoutes({ ttsService, bundleService, videoRenderService, log });
 app.use('/api/video', authMiddleware.requireAuth, videoRoutes);
 

package/templates/assistkick-product-system/packages/backend/src/services/init.ts

@@ -17,6 +17,9 @@ import { WorkflowGroupService } from './workflow_group_service.js';
 import { GitHubAppService } from './github_app_service.js';
 import { ProjectWorkspaceService } from './project_workspace_service.js';
 import { SshKeyService } from './ssh_key_service.js';
+import { BundleService } from './bundle_service.js';
+import { TtsService } from './tts_service.js';
+import { VideoRenderService } from './video_render_service.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // Navigate from packages/backend/src/services/ up to assistkick-product-system/
@@ -35,6 +38,8 @@ const WORKTREES_DIR = join(PROJECT_ROOT, '.worktrees');
 const DEVELOPER_SKILL_PATH = join(SKILLS_DIR, 'product-developer', 'SKILL.md');
 const REVIEWER_SKILL_PATH = join(SKILLS_DIR, 'product-code-reviewer', 'SKILL.md');
 const DEBUGGER_SKILL_PATH = join(SKILLS_DIR, 'product-debugger', 'SKILL.md');
+const VIDEO_PACKAGE_DIR = join(SKILL_ROOT, 'video');
+const BUNDLE_OUTPUT_DIR = process.env.REMOTION_BUNDLE_DIR || join(PROJECT_ROOT, 'data', 'remotion-bundle');
 
 export const log = (tag: string, ...args: any[]) => {
   const ts = new Date().toISOString().slice(11, 23);
@@ -49,6 +54,9 @@ export let workflowGroupService: WorkflowGroupService;
 export let githubAppService: GitHubAppService;
 export let sshKeyService: SshKeyService;
 export let workspaceService: ProjectWorkspaceService;
+export let bundleService: BundleService;
+export let ttsService: TtsService;
+export let videoRenderService: VideoRenderService;
 
 export const paths = {
   projectRoot: PROJECT_ROOT,
@@ -77,12 +85,20 @@ export const initServices = (verbose: boolean) => {
   workflowService = new WorkflowService({ getDb, log });
   workflowGroupService = new WorkflowGroupService({ getDb, log });
 
+  // Video services for workflow video node types
+  bundleService = new BundleService({ videoPackageDir: VIDEO_PACKAGE_DIR, bundleOutputDir: BUNDLE_OUTPUT_DIR, log });
+  ttsService = new TtsService({ workspacesDir: WORKSPACES_DIR, videoPackageDir: VIDEO_PACKAGE_DIR, log });
+  videoRenderService = new VideoRenderService({ getDb, workspacesDir: WORKSPACES_DIR, bundleOutputDir: BUNDLE_OUTPUT_DIR, log });
+
   // WorkflowEngine replaces Pipeline
   workflowEngine = new WorkflowEngine({
     db: getDb(),
     kanban: { getKanbanEntry, saveKanbanEntry },
     claudeService,
     gitWorkflow,
+    bundleService,
+    ttsService,
+    videoRenderService,
     log,
   });
 

package/templates/assistkick-product-system/packages/backend/src/services/workflow_service.ts

@@ -19,6 +19,7 @@ export interface WorkflowRecord {
   description: string | null;
   projectId: string | null;
   featureType: string | null;
+  triggerColumn: string | null;
   isDefault: number;
   graphData: string;
   createdAt: string;
@@ -31,6 +32,7 @@ export interface WorkflowListItem {
   description: string | null;
   projectId: string | null;
   featureType: string | null;
+  triggerColumn: string | null;
   isDefault: number;
   createdAt: string;
   updatedAt: string;
@@ -45,13 +47,29 @@ export class WorkflowService {
     this.log = log;
   }
 
-  /** List workflows visible to the given scope (global + project-specific). Excludes graph_data. */
-  list = async (projectId?: string): Promise<WorkflowListItem[]> => {
+  /** List workflows visible to the given scope (global + project-specific). Excludes graph_data.
+   *  Optional filters: featureType and triggerColumn for column-gated video workflow selection. */
+  list = async (projectId?: string, featureType?: string, triggerColumn?: string): Promise<WorkflowListItem[]> => {
     const db = this.getDb();
 
-    const condition = projectId
-      ? or(isNull(workflows.projectId), eq(workflows.projectId, projectId))
-      : isNull(workflows.projectId);
+    const conditions = [];
+
+    // Scope: global + project-specific
+    if (projectId) {
+      conditions.push(or(isNull(workflows.projectId), eq(workflows.projectId, projectId)));
+    } else {
+      conditions.push(isNull(workflows.projectId));
+    }
+
+    // Optional featureType filter
+    if (featureType) {
+      conditions.push(eq(workflows.featureType, featureType));
+    }
+
+    // Optional triggerColumn filter
+    if (triggerColumn) {
+      conditions.push(eq(workflows.triggerColumn, triggerColumn));
+    }
 
     const rows = await db
       .select({
@@ -60,12 +78,13 @@ export class WorkflowService {
         description: workflows.description,
         projectId: workflows.projectId,
         featureType: workflows.featureType,
+        triggerColumn: workflows.triggerColumn,
         isDefault: workflows.isDefault,
         createdAt: workflows.createdAt,
         updatedAt: workflows.updatedAt,
       })
       .from(workflows)
-      .where(condition);
+      .where(and(...conditions));
 
     this.log('WORKFLOWS', `Listed ${rows.length} workflows`);
     return rows;
@@ -84,6 +103,7 @@ export class WorkflowService {
     description?: string | null;
     projectId?: string | null;
     featureType?: string | null;
+    triggerColumn?: string | null;
     graphData: string;
   }): Promise<WorkflowRecord> => {
     const db = this.getDb();
@@ -96,6 +116,7 @@ export class WorkflowService {
       description: data.description || null,
       projectId: data.projectId || null,
       featureType: data.featureType || null,
+      triggerColumn: data.triggerColumn || null,
       isDefault: 0,
       graphData: data.graphData,
       createdAt: now,
@@ -107,11 +128,12 @@ export class WorkflowService {
     return record;
   };
 
-  /** Update a workflow's name, description, featureType, and/or graph_data. */
+  /** Update a workflow's name, description, featureType, triggerColumn, and/or graph_data. */
   update = async (id: string, data: {
     name?: string;
     description?: string;
     featureType?: string | null;
+    triggerColumn?: string | null;
     graphData?: string;
   }): Promise<WorkflowRecord> => {
     const db = this.getDb();
@@ -127,6 +149,7 @@ export class WorkflowService {
     if (data.name !== undefined) updates.name = data.name;
     if (data.description !== undefined) updates.description = data.description;
     if (data.featureType !== undefined) updates.featureType = data.featureType;
+    if (data.triggerColumn !== undefined) updates.triggerColumn = data.triggerColumn;
     if (data.graphData !== undefined) updates.graphData = data.graphData;
 
     await db.update(workflows).set(updates).where(eq(workflows.id, id));

package/templates/assistkick-product-system/packages/frontend/src/api/client.ts

@@ -154,11 +154,11 @@ export class ApiClient {
     return resp.json();
   };
 
-  moveCard = async (featureId: string, column: string) => {
+  moveCard = async (featureId: string, column: string, comment?: string) => {
     const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/move`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ column }),
+      body: JSON.stringify({ column, ...(comment ? { comment } : {}) }),
     });
     if (!resp.ok) {
       const err = await resp.json();

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

@@ -0,0 +1,80 @@
+/**
+ * Iteration Comment Modal — prompts for feedback when moving a card backward.
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+interface IterationCommentModalProps {
+  isOpen: boolean;
+  featureName: string;
+  fromColumn: string;
+  toColumn: string;
+  onConfirm: (comment: string) => void;
+  onCancel: () => void;
+}
+
+export function IterationCommentModal({ isOpen, featureName, fromColumn, toColumn, onConfirm, onCancel }: IterationCommentModalProps) {
+  const [comment, setComment] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setComment('');
+      setTimeout(() => textareaRef.current?.focus(), 50);
+    }
+  }, [isOpen]);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    onConfirm(comment.trim());
+  }, [comment, onConfirm]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]" onClick={onCancel}>
+      <div className="bg-surface border border-edge rounded-xl p-6 w-[440px] max-w-[90vw] shadow-[0_8px_32px_rgba(0,0,0,0.3)]" onClick={e => e.stopPropagation()}>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="m-0 text-lg text-content">Move Card Backward</h2>
+          <button className="bg-none border-none text-[22px] text-content-secondary cursor-pointer px-1 leading-none hover:text-content" onClick={onCancel} type="button">&times;</button>
+        </div>
+
+        <p className="text-[13px] text-content-secondary mb-3">
+          Moving <span className="font-semibold text-content">{featureName}</span> from <span className="font-mono text-accent">{fromColumn}</span> back to <span className="font-mono text-accent">{toColumn}</span>.
+        </p>
+
+        <form onSubmit={handleSubmit} noValidate>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="iteration-comment">
+              What needs to change? (optional)
+            </label>
+            <textarea
+              ref={textareaRef}
+              id="iteration-comment"
+              className="w-full h-24 px-2.5 py-2 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted resize-y"
+              value={comment}
+              onChange={e => setComment(e.target.value)}
+              placeholder="Describe what should be revised..."
+            />
+          </div>
+
+          <div className="flex gap-2 mt-4">
+            <button
+              className="flex-1 h-9 bg-transparent border border-edge rounded text-content-secondary font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-surface-raised"
+              type="button"
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+            <button
+              className="flex-1 h-9 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white"
+              type="submit"
+            >
+              Move
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -3,6 +3,7 @@ import { apiClient } from '../api/client';
 import { COLUMNS, WORKFLOW_STATUS_LABELS } from '../constants/graph';
 import { useToast } from '../hooks/useToast';
 import { KanbanCard } from './ds/KanbanCard';
+import { IterationCommentModal } from './IterationCommentModal';
 import { WorkflowMonitorModal } from './workflow/WorkflowMonitorModal';
 
 
@@ -47,6 +48,7 @@ interface WorkflowListItem {
   id: string;
   name: string;
   featureType: string | null;
+  triggerColumn: string | null;
   isDefault: number;
 }
 
@@ -63,12 +65,14 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
   const [availableWorkflows, setAvailableWorkflows] = useState<WorkflowListItem[]>([]);
   const [dropdownOpen, setDropdownOpen] = useState<string | null>(null);
   const [monitorTarget, setMonitorTarget] = useState<{ featureId: string; featureName: string } | null>(null);
+  const [backwardMove, setBackwardMove] = useState<{ featureId: string; featureName: string; fromColumn: string; toColumn: string } | null>(null);
   const { showToast } = useToast();
 
   const pollersRef = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
   const orchestratorPollerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const kanbanDataRef = useRef(kanbanData);
   kanbanDataRef.current = kanbanData;
+  const backwardMoveTargetRef = useRef<string | null>(null);
 
   const fetchKanban = useCallback(async () => {
     try {
@@ -248,6 +252,26 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     setDragOverColumn(null);
     const featureId = e.dataTransfer.getData('text/plain');
     if (!featureId || !targetColumn) return;
+
+    // Detect backward move — prompt for iteration comment
+    const currentEntry = kanbanData?.[featureId];
+    if (currentEntry) {
+      const colIds = COLUMNS.map(c => c.id);
+      const currentIdx = colIds.indexOf(currentEntry.column);
+      const targetIdx = colIds.indexOf(targetColumn);
+      if (targetIdx < currentIdx) {
+        // Find the card name from graphData
+        const node = graphData?.nodes?.find((n: any) => n.id === featureId);
+        const featureName = node?.name || featureId;
+        const fromLabel = COLUMNS.find(c => c.id === currentEntry.column)?.label || currentEntry.column;
+        const toLabel = COLUMNS.find(c => c.id === targetColumn)?.label || targetColumn;
+        setBackwardMove({ featureId, featureName, fromColumn: fromLabel, toColumn: toLabel });
+        // Store the target for the confirm handler
+        backwardMoveTargetRef.current = targetColumn;
+        return;
+      }
+    }
+
     try {
       await apiClient.moveCard(featureId, targetColumn);
       await fetchKanban();
@@ -256,6 +280,25 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     }
   };
 
+  const handleBackwardMoveConfirm = async (comment: string) => {
+    if (!backwardMove) return;
+    const targetColumn = backwardMoveTargetRef.current;
+    backwardMoveTargetRef.current = null;
+    setBackwardMove(null);
+    if (!targetColumn) return;
+    try {
+      await apiClient.moveCard(backwardMove.featureId, targetColumn, comment || undefined);
+      await fetchKanban();
+    } catch (err) {
+      console.error('Failed to move card:', err);
+    }
+  };
+
+  const handleBackwardMoveCancel = () => {
+    backwardMoveTargetRef.current = null;
+    setBackwardMove(null);
+  };
+
   const handleStartWorkflow = async (featureId: string, workflowId?: string) => {
     try {
       await apiClient.startWorkflow(featureId, workflowId, projectId ?? undefined);
@@ -447,7 +490,18 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                       pipelineLabel={wStatus && wStatus.status !== 'idle' ? getStatusBadgeText(wStatus.status) : undefined}
                       issueCount={card.notes.length}
                       issueLabel={issueLabel}
-                      showPlay={card.column === 'todo' && !card.devBlocked && !(card.nodeType === 'epic' && playAllRunning && playAllEpicId === card.id)}
+                      showPlay={(() => {
+                        if (card.devBlocked) return false;
+                        if (card.nodeType === 'epic' && playAllRunning && playAllEpicId === card.id) return false;
+                        // Default column for non-video features
+                        if (!card.featureType || card.featureType === 'code') return card.column === 'todo';
+                        // For video features, show play when a workflow matches the column
+                        const cardType = card.featureType;
+                        return availableWorkflows.some(wf =>
+                          (!wf.featureType || wf.featureType === cardType)
+                          && wf.triggerColumn === card.column
+                        );
+                      })()}
                       showPlayDropdown={card.nodeType !== 'epic' && availableWorkflows.length > 1}
                       showStop={card.nodeType === 'epic' && playAllRunning && playAllEpicId === card.id}
                       showResume={showResumeBtn}
@@ -471,7 +525,8 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                     {dropdownOpen === card.id && (() => {
                       const cardFeatureType = card.featureType || 'code';
                       const filteredWorkflows = availableWorkflows.filter(wf =>
-                        !wf.featureType || wf.featureType === cardFeatureType
+                        (!wf.featureType || wf.featureType === cardFeatureType)
+                        && (!wf.triggerColumn || wf.triggerColumn === card.column)
                       );
                       return (
                         <div
@@ -513,6 +568,16 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
           onClose={() => setMonitorTarget(null)}
         />
       )}
+
+      {/* Iteration Comment Modal — backward card moves */}
+      <IterationCommentModal
+        isOpen={!!backwardMove}
+        featureName={backwardMove?.featureName || ''}
+        fromColumn={backwardMove?.fromColumn || ''}
+        toColumn={backwardMove?.toColumn || ''}
+        onConfirm={handleBackwardMoveConfirm}
+        onCancel={handleBackwardMoveCancel}
+      />
     </div>
   );
 }

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

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import { Handle, Position, useReactFlow } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Volume2 } from 'lucide-react';
+
+export function GenerateTTSNode({ id, data, selected }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
+  const scriptPath = (data.scriptPath as string) || 'script.md';
+  const force = (data.force as boolean) || false;
+
+  const handleScriptPathChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { scriptPath: e.target.value });
+  }, [id, updateNodeData]);
+
+  const handleForceChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { force: e.target.checked });
+  }, [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">
+        <Volume2 size={14} className="text-emerald-400" />
+        <span className="text-[12px] font-semibold">Generate TTS</span>
+      </div>
+      <div className="space-y-1.5">
+        <div>
+          <label className="text-[10px] text-content-muted uppercase tracking-wider">Script</label>
+          <input
+            type="text"
+            value={scriptPath}
+            onChange={handleScriptPathChange}
+            className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content"
+            placeholder="script.md"
+          />
+        </div>
+        <label className="flex items-center gap-1.5 text-[10px] text-content-muted cursor-pointer">
+          <input
+            type="checkbox"
+            checked={force}
+            onChange={handleForceChange}
+            className="rounded"
+          />
+          Force regeneration
+        </label>
+      </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/RebuildBundleNode.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Package } from 'lucide-react';
+
+export function RebuildBundleNode({ id, selected }: NodeProps) {
+  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">
+        <Package size={14} className="text-orange-400" />
+        <span className="text-[12px] font-semibold">Rebuild Bundle</span>
+      </div>
+      <div className="text-[10px] text-content-muted mt-1">Remotion webpack build</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/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>
+  );
+}