@assistkick/create 1.7.0 → 1.9.0

package/templates/assistkick-product-system/packages/frontend/package.json

@@ -10,15 +10,21 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@remotion/media": "^4.0.434",
+    "@remotion/player": "^4.0.434",
+    "@remotion/transitions": "^4.0.434",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
+    "@xyflow/react": "^12.10.1",
     "d3": "^7.9.0",
     "lucide-react": "^0.577.0",
     "marked": "^15.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.0",
+    "remotion": "^4.0.434",
     "zustand": "^5.0.11"
   },
   "devDependencies": {

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

@@ -13,6 +13,10 @@ import { CoherenceRoute } from './routes/CoherenceRoute';
 import { UsersRoute } from './routes/UsersRoute';
 import { TerminalRoute } from './routes/TerminalRoute';
 import { DesignSystemRoute } from './routes/DesignSystemRoute';
+import { AgentsRoute } from './routes/AgentsRoute';
+import { WorkflowsRoute } from './routes/WorkflowsRoute';
+import { FilesRoute } from './routes/FilesRoute';
+import { VideographyRoute } from './routes/VideographyRoute';
 
 export function App() {
   return (
@@ -30,7 +34,11 @@ export function App() {
           <Route path="/coherence" element={<CoherenceRoute />} />
           <Route path="/users" element={<UsersRoute />} />
           <Route path="/terminal" element={<TerminalRoute />} />
+          <Route path="/agents" element={<AgentsRoute />} />
+          <Route path="/workflows" element={<WorkflowsRoute />} />
+          <Route path="/files" element={<FilesRoute />} />
           <Route path="/design-system" element={<DesignSystemRoute />} />
+          <Route path="/videography" element={<VideographyRoute />} />
         </Route>
       </Route>
     </Routes>

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

@@ -1,3 +1,91 @@
+export interface VideoCompositionMeta {
+  id: string;
+  durationInFrames: number;
+  fps: number;
+  width: number;
+  height: number;
+  folder?: string;
+}
+
+export interface VideoBundleStatus {
+  ready: boolean;
+  building: boolean;
+  bundlePath: string | null;
+  lastBuiltAt: string | null;
+  error: string | null;
+}
+
+export interface VideoRenderStatus {
+  id: string;
+  status: 'queued' | 'rendering' | 'complete' | 'failed';
+  progress: number;
+  filePath: string | null;
+  fileSize: number | null;
+  durationSeconds: number | null;
+  error: string | null;
+  compositionId: string;
+  resolution: string | null;
+  createdAt: string;
+  completedAt: string | null;
+}
+
+export interface AgentMetrics {
+  nodeId: string;
+  agentName: string | null;
+  toolCalls: Record<string, number> | null;
+  costUsd: number | null;
+  numTurns: number | null;
+  stopReason: string | null;
+  model: string | null;
+  contextWindowPct: number | null;
+  status: string;
+}
+
+export interface ToolCallEntry {
+  id: string;
+  timestamp: string;
+  toolName: string;
+  target: string;
+}
+
+export interface NodeExecutionData {
+  id: string;
+  nodeId: string;
+  status: string;
+  startedAt: string | null;
+  completedAt: string | null;
+  outputData: {
+    agentId?: string;
+    agentName?: string;
+    output?: string;
+    toolCalls?: Record<string, number>;
+    costUsd?: number;
+    numTurns?: number;
+    stopReason?: string;
+    model?: string;
+    contextWindowPct?: number;
+  } | null;
+  error: string | null;
+  attempt: number;
+  toolCalls: ToolCallEntry[];
+}
+
+export interface WorkflowMonitorData {
+  executionId: string;
+  workflowId: string;
+  workflowName: string;
+  featureId: string;
+  status: string;
+  currentNodeId: string | null;
+  startedAt: string;
+  updatedAt: string;
+  graphData: {
+    nodes: Array<{ id: string; type: string; position: { x: number; y: number }; data: Record<string, unknown> }>;
+    edges: Array<{ id: string; source: string; target: string; sourceHandle?: string; data?: { label?: string } }>;
+  };
+  nodeExecutions: Record<string, NodeExecutionData>;
+}
+
 /**
  * API client for fetching graph data and node content.
  * All HTTP calls to the server go through this class.
@@ -66,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();
@@ -107,22 +195,35 @@ export class ApiClient {
     return resp.json();
   };
 
-  startPipeline = async (featureId: string) => {
-    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/develop`, {
+  startWorkflow = async (featureId: string, workflowId?: string, projectId?: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ workflowId, projectId }),
     });
     if (!resp.ok) {
-      let msg = `Failed to start pipeline: ${resp.status}`;
+      let msg = `Failed to start workflow: ${resp.status}`;
       try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON response */ }
       throw new Error(msg);
     }
     return resp.json();
   };
 
-  getPipelineStatus = async (featureId: string) => {
-    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/pipeline`);
-    if (!resp.ok) throw new Error(`Failed to get pipeline status: ${resp.status}`);
+  getWorkflowStatus = async (featureId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow-status`);
+    if (!resp.ok) throw new Error(`Failed to get workflow status: ${resp.status}`);
+    return resp.json();
+  };
+
+  getWorkflowMonitor = async (featureId: string): Promise<{ monitor: WorkflowMonitorData | null }> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow-monitor`);
+    if (!resp.ok) throw new Error(`Failed to get workflow monitor: ${resp.status}`);
+    return resp.json();
+  };
+
+  getWorkflowMetrics = async (featureId: string): Promise<{ metrics: AgentMetrics[] }> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow-metrics`);
+    if (!resp.ok) throw new Error(`Failed to get workflow metrics: ${resp.status}`);
     return resp.json();
   };
 
@@ -192,8 +293,11 @@ export class ApiClient {
 
   // --- Orchestrator (Play All) ---
 
-  startPlayAll = async (projectId?: string) => {
-    const qs = projectId ? `?project_id=${encodeURIComponent(projectId)}` : '';
+  startPlayAll = async (projectId?: string, epicId?: string) => {
+    const params = new URLSearchParams();
+    if (projectId) params.set('project_id', projectId);
+    if (epicId) params.set('epic_id', epicId);
+    const qs = params.toString() ? `?${params}` : '';
     const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/pipeline/play-all${qs}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -225,26 +329,41 @@ export class ApiClient {
     return resp.json();
   };
 
-  resumePipeline = async (featureId: string) => {
-    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/resume`, {
+  resumeWorkflow = async (featureId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow/resume`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to resume workflow: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON response */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  forceNextNode = async (featureId: string, nodeId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow/force-next`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ nodeId }),
     });
     if (!resp.ok) {
-      let msg = `Failed to resume pipeline: ${resp.status}`;
+      let msg = `Failed to force next: ${resp.status}`;
       try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON response */ }
       throw new Error(msg);
     }
     return resp.json();
   };
 
-  unblockCard = async (featureId: string) => {
-    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/unblock`, {
+  restartNode = async (featureId: string, nodeId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/workflow/restart-node`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ nodeId }),
     });
     if (!resp.ok) {
-      let msg = `Failed to unblock card: ${resp.status}`;
+      let msg = `Failed to restart node: ${resp.status}`;
       try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON response */ }
       throw new Error(msg);
     }
@@ -366,11 +485,11 @@ export class ApiClient {
     return resp.json();
   };
 
-  createProject = async (name: string) => {
+  createProject = async (name: string, type?: string) => {
     const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name }),
+      body: JSON.stringify({ name, ...(type ? { type } : {}) }),
     });
     if (!resp.ok) {
       const data = await resp.json();
@@ -489,6 +608,31 @@ export class ApiClient {
     return resp.json();
   };
 
+  generateSshKey = async (projectId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${projectId}/git/ssh/generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to generate SSH key: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  connectSshRepo = async (projectId: string, repoUrl: string, baseBranch?: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${projectId}/git/ssh/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repoUrl, baseBranch }),
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to connect repo via SSH: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
   listTerminalSessions = async () => {
     const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/terminal/sessions`);
     if (!resp.ok) throw new Error(`Failed to list terminal sessions: ${resp.status}`);
@@ -508,6 +652,23 @@ export class ApiClient {
     return resp.json();
   };
 
+  uploadTerminalImage = async (file: File): Promise<{ path: string }> => {
+    const buffer = await file.arrayBuffer();
+    const resp = await this.fetchWithRefresh(
+      `${this.baseUrl}/api/terminal/upload-image?filename=${encodeURIComponent(file.name)}`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/octet-stream' },
+        body: buffer,
+      },
+    );
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to upload image: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
   killTerminalSession = async (sessionId: string) => {
     const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/terminal/sessions/${sessionId}`, {
       method: 'DELETE',
@@ -519,6 +680,285 @@ export class ApiClient {
     return resp.json();
   };
 
+  // --- Agent management ---
+
+  fetchAgents = async (scope: 'global' | 'project', projectId?: string) => {
+    const params = new URLSearchParams({ scope });
+    if (projectId) params.set('projectId', projectId);
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/agents?${params}`);
+    if (!resp.ok) throw new Error(`Failed to fetch agents: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchAgent = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/agents/${id}`);
+    if (!resp.ok) throw new Error(`Failed to fetch agent: ${resp.status}`);
+    return resp.json();
+  };
+
+  createAgent = async (data: { name: string; promptTemplate: string; projectId?: string }) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/agents`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to create agent: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  updateAgent = async (id: string, data: { name?: string; promptTemplate?: string }) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/agents/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to update agent: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  deleteAgent = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/agents/${id}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to delete agent: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  resetAgent = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/agents/${id}/reset`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to reset agent: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  // --- Workflow management ---
+
+  fetchWorkflows = async (projectId?: string) => {
+    const params = projectId ? `?projectId=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflows${params}`);
+    if (!resp.ok) throw new Error(`Failed to fetch workflows: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchWorkflow = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflows/${id}`);
+    if (!resp.ok) throw new Error(`Failed to fetch workflow: ${resp.status}`);
+    return resp.json();
+  };
+
+  createWorkflow = async (data: { name: string; description?: string; projectId?: string; graphData: string }) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflows`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to create workflow: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  updateWorkflow = async (id: string, data: { name?: string; description?: string; graphData?: string }) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflows/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to update workflow: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  deleteWorkflow = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflows/${id}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to delete workflow: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  // --- Workflow group management ---
+
+  fetchWorkflowGroups = async (projectId?: string) => {
+    const params = projectId ? `?projectId=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflow-groups${params}`);
+    if (!resp.ok) throw new Error(`Failed to fetch workflow groups: ${resp.status}`);
+    return resp.json();
+  };
+
+  createWorkflowGroup = async (data: { name: string; projectId?: string; graphData: string }) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflow-groups`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to create workflow group: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  deleteWorkflowGroup = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflow-groups/${id}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to delete workflow group: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  setDefaultWorkflow = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/workflows/${id}/set-default`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to set default workflow: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  // --- File system ---
+
+  fetchFileTree = async (projectId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${projectId}/files`);
+    if (!resp.ok) throw new Error(`Failed to fetch file tree: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchFileContent = async (projectId: string, path: string) => {
+    const resp = await this.fetchWithRefresh(
+      `${this.baseUrl}/api/projects/${projectId}/files/content?path=${encodeURIComponent(path)}`,
+    );
+    if (!resp.ok) throw new Error(`Failed to fetch file content: ${resp.status}`);
+    return resp.json();
+  };
+
+  saveFileContent = async (projectId: string, path: string, content: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${projectId}/files/content`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, content }),
+    });
+    if (!resp.ok) throw new Error(`Failed to save file: ${resp.status}`);
+    return resp.json();
+  };
+
+  createFile = async (projectId: string, path: string, type: 'file' | 'directory') => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${projectId}/files`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, type }),
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to create ${type}: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  deleteFile = async (projectId: string, path: string) => {
+    const resp = await this.fetchWithRefresh(
+      `${this.baseUrl}/api/projects/${projectId}/files?path=${encodeURIComponent(path)}`,
+      { method: 'DELETE' },
+    );
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to delete file: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  renameFile = async (projectId: string, oldPath: string, newPath: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${projectId}/files`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ oldPath, newPath }),
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to rename file: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  // --- Video / Remotion ---
+
+  fetchVideoCompositions = async (): Promise<{ compositions: VideoCompositionMeta[] }> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/video/compositions`);
+    if (!resp.ok) throw new Error(`Failed to fetch video compositions: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchVideoBundleStatus = async (): Promise<VideoBundleStatus> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/video/bundle/status`);
+    if (!resp.ok) throw new Error(`Failed to fetch bundle status: ${resp.status}`);
+    return resp.json();
+  };
+
+  rebuildVideoBundle = async (): Promise<VideoBundleStatus> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/video/bundle/rebuild`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to rebuild bundle: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  fetchVideoRenders = async (projectId: string): Promise<{ renders: VideoRenderStatus[] }> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/video/renders?projectId=${encodeURIComponent(projectId)}`);
+    if (!resp.ok) throw new Error(`Failed to fetch video renders: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchVideoRenderStatus = async (renderId: string): Promise<VideoRenderStatus> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/video/render/${encodeURIComponent(renderId)}`);
+    if (!resp.ok) throw new Error(`Failed to fetch render status: ${resp.status}`);
+    return resp.json();
+  };
+
+  deleteVideoRender = async (renderId: string): Promise<void> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/video/render/${encodeURIComponent(renderId)}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to delete render: ${resp.status}`);
+    }
+  };
+
+  getVideoFileUrl = (renderId: string): string => {
+    return `${this.baseUrl}/api/video/file/${encodeURIComponent(renderId)}`;
+  };
+
   acceptInvitation = async (token: string, email: string, password: string) => {
     const resp = await fetch(`${this.baseUrl}/api/auth/accept-invitation`, {
       method: 'POST',