@assistkick/create 1.9.0 → 1.11.0

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

@@ -22,6 +22,7 @@ import { RunAgentNode } from './RunAgentNode';
 import { CheckCardPositionNode } from './CheckCardPositionNode';
 import { CheckCycleCountNode } from './CheckCycleCountNode';
 import { SetCardMetadataNode } from './SetCardMetadataNode';
+import { ProgrammableNode } from './ProgrammableNode';
 
 /** Node types available inside the group sub-canvas (no nested groups). */
 const INNER_NODE_TYPE_MAP: NodeTypes = {
@@ -32,6 +33,7 @@ const INNER_NODE_TYPE_MAP: NodeTypes = {
   checkCardPosition: CheckCardPositionNode,
   checkCycleCount: CheckCycleCountNode,
   setCardMetadata: SetCardMetadataNode,
+  programmable: ProgrammableNode,
 };
 
 function GroupSubCanvas({

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
-  Play, Square, ArrowRightLeft, Bot, GitBranch, RefreshCw, Tag, Layers, Trash2,
+  Play, Square, ArrowRightLeft, Bot, GitBranch, RefreshCw, Tag, Layers, Trash2, Code,
 } from 'lucide-react';
 import { NODE_PALETTE_ITEMS } from './workflow_types';
 import type { WorkflowNodeType } from './workflow_types';
@@ -14,6 +14,7 @@ const NODE_ICONS: Record<string, React.ReactNode> = {
   checkCardPosition: <GitBranch size={14} className="text-cyan-400" />,
   checkCycleCount: <RefreshCw size={14} className="text-orange-400" />,
   setCardMetadata: <Tag size={14} className="text-yellow-400" />,
+  programmable: <Code size={14} className="text-emerald-400" />,
 };
 
 interface WorkflowGroup {

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

@@ -0,0 +1,178 @@
+import React, { useCallback, useState } from 'react';
+import { Handle, Position, NodeResizer, useReactFlow } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { Code, ChevronDown, ChevronRight } from 'lucide-react';
+import Editor from '@monaco-editor/react';
+import { useTheme } from '../../hooks/useTheme';
+
+const MIN_WIDTH = 340;
+const MIN_HEIGHT = 320;
+
+export function ProgrammableNode({ id, data, selected }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
+  const { theme } = useTheme();
+  const [limitsExpanded, setLimitsExpanded] = useState(false);
+
+  const label = (data.label as string) || '';
+  const code = (data.code as string) || '';
+  const timeout = (data.timeout as number) || 30000;
+  const memory = (data.memory as number) || 128;
+  const maxRequests = (data.maxRequests as number) || 20;
+  const maxResponseSize = (data.maxResponseSize as number) || 5242880;
+
+  const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    updateNodeData(id, { label: e.target.value });
+  }, [id, updateNodeData]);
+
+  const handleCodeChange = useCallback((value: string | undefined) => {
+    if (value !== undefined) {
+      updateNodeData(id, { code: value });
+    }
+  }, [id, updateNodeData]);
+
+  const handleLimitChange = useCallback((field: string, value: number) => {
+    updateNodeData(id, { [field]: value });
+  }, [id, updateNodeData]);
+
+  return (
+    <div className={`rounded-lg border bg-surface-raised text-content flex flex-col h-full ${
+      selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+    }`}>
+      <NodeResizer
+        isVisible={selected}
+        minWidth={MIN_WIDTH}
+        minHeight={MIN_HEIGHT}
+        lineClassName="!border-accent"
+        handleClassName="!w-2 !h-2 !bg-accent !border-2 !border-surface !rounded-sm"
+      />
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+
+      {/* Header */}
+      <div className="flex items-center gap-2 px-4 pt-3 pb-2">
+        <Code size={14} className="text-emerald-400" />
+        <span className="text-[12px] font-semibold">Programmable</span>
+      </div>
+
+      {/* Label / Node Name */}
+      <div className="px-4 pb-2">
+        <label className="text-[10px] text-content-muted uppercase tracking-wider">Node Name</label>
+        <input
+          type="text"
+          value={label}
+          onChange={handleLabelChange}
+          placeholder="e.g. Validate Webhook"
+          className="w-full px-2 py-1 rounded border border-edge bg-surface text-[11px] text-content"
+        />
+      </div>
+
+      {/* Monaco Editor — fills remaining vertical space */}
+      <div className="px-4 pb-2 flex-1 min-h-0 flex flex-col">
+        <label className="text-[10px] text-content-muted uppercase tracking-wider">Code</label>
+        <div className="border border-edge rounded overflow-hidden flex-1 min-h-[120px]">
+          <Editor
+            height="100%"
+            language="javascript"
+            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            value={code}
+            onChange={handleCodeChange}
+            options={{
+              minimap: { enabled: false },
+              fontSize: 11,
+              lineNumbers: 'on',
+              scrollBeyondLastLine: false,
+              wordWrap: 'on',
+              tabSize: 2,
+              automaticLayout: true,
+              overviewRulerLanes: 0,
+              hideCursorInOverviewRuler: true,
+              scrollbar: { vertical: 'auto', horizontal: 'auto' },
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Execution Limits (collapsible) */}
+      <div className="px-4 pb-3 shrink-0">
+        <button
+          onClick={() => setLimitsExpanded(!limitsExpanded)}
+          className="flex items-center gap-1 text-[10px] text-content-muted uppercase tracking-wider hover:text-content transition-colors"
+        >
+          {limitsExpanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+          Execution Limits
+        </button>
+
+        {limitsExpanded && (
+          <div className="grid grid-cols-2 gap-2 mt-2">
+            <div>
+              <label className="text-[9px] text-content-muted">Timeout (ms)</label>
+              <input
+                type="number"
+                min={1000}
+                step={1000}
+                value={timeout}
+                onChange={(e) => handleLimitChange('timeout', parseInt(e.target.value, 10) || 30000)}
+                className="w-full px-2 py-1 rounded border border-edge bg-surface text-[10px] text-content"
+              />
+            </div>
+            <div>
+              <label className="text-[9px] text-content-muted">Memory (MB)</label>
+              <input
+                type="number"
+                min={8}
+                step={8}
+                value={memory}
+                onChange={(e) => handleLimitChange('memory', parseInt(e.target.value, 10) || 128)}
+                className="w-full px-2 py-1 rounded border border-edge bg-surface text-[10px] text-content"
+              />
+            </div>
+            <div>
+              <label className="text-[9px] text-content-muted">Max Requests</label>
+              <input
+                type="number"
+                min={0}
+                value={maxRequests}
+                onChange={(e) => handleLimitChange('maxRequests', parseInt(e.target.value, 10) || 20)}
+                className="w-full px-2 py-1 rounded border border-edge bg-surface text-[10px] text-content"
+              />
+            </div>
+            <div>
+              <label className="text-[9px] text-content-muted">Max Response (bytes)</label>
+              <input
+                type="number"
+                min={1024}
+                step={1024}
+                value={maxResponseSize}
+                onChange={(e) => handleLimitChange('maxResponseSize', parseInt(e.target.value, 10) || 5242880)}
+                className="w-full px-2 py-1 rounded border border-edge bg-surface text-[10px] text-content"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Output handles: success and error */}
+      <div className="flex justify-between px-4 pb-3 text-[9px] text-content-muted shrink-0">
+        <div className="relative">
+          <span className="px-1.5 py-0.5 rounded bg-surface border border-edge">success</span>
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            id="success"
+            className="!w-2 !h-2 !bg-green-400 !border !border-surface"
+            style={{ left: '30%' }}
+          />
+        </div>
+        <div className="relative">
+          <span className="px-1.5 py-0.5 rounded bg-surface border border-edge">error</span>
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            id="error"
+            className="!w-2 !h-2 !bg-red-400 !border !border-surface"
+            style={{ left: '70%' }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -30,6 +30,7 @@ import { GroupNode } from './GroupNode';
 import { RebuildBundleNode } from './RebuildBundleNode';
 import { GenerateTTSNode } from './GenerateTTSNode';
 import { RenderVideoNode } from './RenderVideoNode';
+import { ProgrammableNode } from './ProgrammableNode';
 import { NODE_DEFAULTS } from './workflow_types';
 import type { WorkflowNodeType } from './workflow_types';
 import { autoLayoutNodes } from './autoLayout';
@@ -47,6 +48,7 @@ const NODE_TYPE_MAP: NodeTypes = {
   rebuildBundle: RebuildBundleNode,
   generateTTS: GenerateTTSNode,
   renderVideo: RenderVideoNode,
+  programmable: ProgrammableNode,
 };
 
 interface ContextMenuState {
@@ -168,6 +170,7 @@ export function WorkflowCanvasInner({
         type,
         position,
         data: defaults(),
+        ...(type === 'programmable' ? { style: { width: 380, height: 400 } } : {}),
       };
 
       setNodes((nds) => [...nds, newNode]);

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

@@ -11,9 +11,10 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {
-  X, Clock, AlertTriangle, CheckCircle2, CircleDot,
+  X, Clock, AlertTriangle, CheckCircle2, CircleDot, Square,
   FileText, Pencil, Terminal, Search, FolderOpen, Bot,
   MessageSquare, ChevronDown, ChevronRight, SkipForward, RotateCcw,
+  Play,
 } from 'lucide-react';
 import { apiClient, type WorkflowMonitorData, type NodeExecutionData, type ToolCallEntry } from '../../api/client';
 import {
@@ -28,6 +29,7 @@ import {
   MonitorRebuildBundleNode,
   MonitorGenerateTTSNode,
   MonitorRenderVideoNode,
+  MonitorProgrammableNode,
 } from './monitor_nodes';
 import { colorizeEdges } from './edgeColors';
 
@@ -119,6 +121,7 @@ const MONITOR_NODE_TYPES: NodeTypes = {
   rebuildBundle: MonitorRebuildBundleNode,
   generateTTS: MonitorGenerateTTSNode,
   renderVideo: MonitorRenderVideoNode,
+  programmable: MonitorProgrammableNode,
 };
 
 function getNodeTypeLabel(type: string): string {
@@ -134,6 +137,7 @@ function getNodeTypeLabel(type: string): string {
     case 'rebuildBundle': return 'Rebuild Bundle';
     case 'generateTTS': return 'Generate TTS';
     case 'renderVideo': return 'Render Video';
+    case 'programmable': return 'Programmable';
     default: return type;
   }
 }
@@ -146,6 +150,7 @@ function getNodeLabel(type: string, data: Record<string, unknown>): string {
     case 'setCardMetadata': return `${data.key || '?'} = ${data.value || '?'}`;
     case 'end': return (data.outcome as string) || (data.statusType as string) || '';
     case 'group': return (data.groupName as string) || '';
+    case 'programmable': return (data.label as string) || '';
     default: return '';
   }
 }
@@ -154,6 +159,7 @@ function getNodeIcon(type: string, status: string): React.ReactNode {
   if (status === 'running') return <CircleDot size={14} className="text-accent animate-pulse" />;
   if (status === 'completed') return <CheckCircle2 size={14} className="text-emerald-400" />;
   if (status === 'failed') return <AlertTriangle size={14} className="text-error" />;
+  if (status === 'stopped') return <Square size={14} className="text-error" />;
   switch (type) {
     case 'runAgent': return <Bot size={14} className="text-purple-400" />;
     default: return <Clock size={14} className="text-content-muted" />;
@@ -170,6 +176,7 @@ function formatContextWindow(value: number): string {
 function StatusBadge({ status }: { status: string }) {
   const cls = status === 'completed' ? 'bg-emerald-500/15 text-emerald-400'
     : status === 'failed' ? 'bg-error/15 text-error'
+    : status === 'stopped' ? 'bg-error/15 text-error'
     : status === 'running' ? 'bg-accent/15 text-accent animate-pulse'
     : 'bg-white/[0.06] text-content-muted';
   return (
@@ -195,7 +202,7 @@ function NodeDetailPanel({
   nodeId,
   nodeType,
   nodeData,
-  execution,
+  executions,
   isCurrentNode,
   featureId,
   onClose,
@@ -204,18 +211,50 @@ function NodeDetailPanel({
   nodeId: string;
   nodeType: string;
   nodeData: Record<string, unknown>;
-  execution: NodeExecutionData | null;
+  executions: NodeExecutionData[];
   isCurrentNode: boolean;
   featureId: string;
   onClose: () => void;
   onAction: () => void;
 }) {
   const toolCallsRef = useRef<HTMLDivElement>(null);
+  const hasInitialScrolled = useRef(false);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const hasCycles = executions.length > 1;
+  const [selectedCycle, setSelectedCycle] = useState<number>(executions.length > 0 ? executions[executions.length - 1].cycle : 1);
+
+  // Update selected cycle when executions change (new cycle arrives)
+  useEffect(() => {
+    if (executions.length > 0) {
+      const latestCycle = executions[executions.length - 1].cycle;
+      setSelectedCycle(latestCycle);
+    }
+  }, [executions.length]);
+
+  const execution = executions.find(e => e.cycle === selectedCycle) ?? executions[executions.length - 1] ?? null;
   const statusLabel = execution?.status || 'pending';
   const isAgent = nodeType === 'runAgent';
   const outputData = execution?.outputData;
-  const showActions = isCurrentNode && (statusLabel === 'running' || statusLabel === 'failed');
+  const showActions = isCurrentNode && (statusLabel === 'running' || statusLabel === 'failed' || statusLabel === 'stopped');
+  const showContinue = isCurrentNode && isAgent && execution?.claudeSessionId &&
+    (statusLabel === 'failed' || statusLabel === 'stopped' || (statusLabel === 'running' && !execution?.processAlive));
+
+  // Auto-scroll activity log to bottom on initial open only
+  useEffect(() => {
+    if (!hasInitialScrolled.current && toolCallsRef.current && execution?.toolCalls && execution.toolCalls.length > 0) {
+      toolCallsRef.current.scrollTop = toolCallsRef.current.scrollHeight;
+      hasInitialScrolled.current = true;
+    }
+  });
+
+  const handleStop = async () => {
+    setActionLoading('stop');
+    try {
+      await apiClient.stopNode(featureId, nodeId);
+      onAction();
+    } catch { /* error is non-critical — polling will pick up the state */ }
+    setActionLoading(null);
+  };
 
   const handleForceNext = async () => {
     setActionLoading('force-next');
@@ -235,6 +274,15 @@ function NodeDetailPanel({
     setActionLoading(null);
   };
 
+  const handleContinue = async () => {
+    setActionLoading('continue');
+    try {
+      await apiClient.continueNode(featureId, nodeId);
+      onAction();
+    } catch { /* error is non-critical — polling will pick up the state */ }
+    setActionLoading(null);
+  };
+
   return (
     <div className="w-1/2 shrink-0 border-l border-edge bg-surface flex flex-col overflow-hidden">
       {/* Header */}
@@ -247,6 +295,28 @@ function NodeDetailPanel({
           <StatusBadge status={statusLabel} />
           {showActions && (
             <div className="flex items-center gap-1.5 ml-2">
+              {statusLabel === 'running' && (
+                <button
+                  onClick={handleStop}
+                  disabled={actionLoading !== null}
+                  className="flex items-center gap-1 bg-transparent border border-error/40 text-error rounded px-2 py-1 text-[11px] cursor-pointer font-mono hover:bg-error/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  title="Stop this node"
+                >
+                  <Square size={11} />
+                  {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
+                </button>
+              )}
+              {showContinue && (
+                <button
+                  onClick={handleContinue}
+                  disabled={actionLoading !== null}
+                  className="flex items-center gap-1 bg-transparent border border-emerald-400/40 text-emerald-400 rounded px-2 py-1 text-[11px] cursor-pointer font-mono hover:bg-emerald-400/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  title="Resume Claude session"
+                >
+                  <Play size={11} />
+                  {actionLoading === 'continue' ? 'Continuing...' : 'Continue'}
+                </button>
+              )}
               <button
                 onClick={handleRestart}
                 disabled={actionLoading !== null}
@@ -276,6 +346,26 @@ function NodeDetailPanel({
         </button>
       </div>
 
+      {/* Cycle tabs — only shown when multiple cycles exist */}
+      {hasCycles && (
+        <div className="flex items-center gap-1 px-6 py-2 border-b border-edge bg-surface-alt">
+          <span className="text-[10px] font-bold uppercase tracking-widest text-content-muted mr-2">Cycle</span>
+          {executions.map(ex => (
+            <button
+              key={ex.cycle}
+              onClick={() => setSelectedCycle(ex.cycle)}
+              className={`px-2.5 py-1 rounded text-[11px] font-mono font-semibold cursor-pointer transition-colors ${
+                selectedCycle === ex.cycle
+                  ? 'bg-accent/20 text-accent border border-accent/40'
+                  : 'bg-white/[0.04] text-content-muted border border-edge hover:bg-white/[0.08] hover:text-content'
+              }`}
+            >
+              {ex.cycle}
+            </button>
+          ))}
+        </div>
+      )}
+
       {/* Content */}
       <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
         {/* Timing */}
@@ -437,15 +527,18 @@ function MonitorGraphView({
   // Convert graph data to React Flow nodes/edges with execution state
   const nodes: Node[] = useMemo(() =>
     monitorData.graphData.nodes.map(n => {
-      const exec = monitorData.nodeExecutions[n.id];
+      const executions = monitorData.nodeExecutions[n.id];
+      const latestExec = executions?.[executions.length - 1] ?? null;
       const isCurrent = n.id === monitorData.currentNodeId && monitorData.status === 'running';
-      const status = exec?.status || (isCurrent ? 'running' : 'pending');
+      const status = latestExec?.status || (isCurrent ? 'running' : 'pending');
+      const execCount = executions?.length ?? 0;
       return {
         ...n,
         data: {
           ...n.data,
           _execStatus: status,
-          _error: exec?.error || null,
+          _error: latestExec?.error || null,
+          _execCount: execCount,
           _onNodeClick: onNodeClick,
         },
       };
@@ -568,7 +661,7 @@ export function WorkflowMonitorModal({ featureId, featureName, isOpen, onClose }
   if (!isOpen) return null;
 
   const selectedNode = monitorData?.graphData.nodes.find(n => n.id === selectedNodeId);
-  const selectedExec = selectedNodeId ? monitorData?.nodeExecutions[selectedNodeId] || null : null;
+  const selectedExecs = selectedNodeId ? monitorData?.nodeExecutions[selectedNodeId] || [] : [];
 
   return (
     <div className="fixed inset-0 z-[300]">
@@ -624,10 +717,11 @@ export function WorkflowMonitorModal({ featureId, featureName, isOpen, onClose }
               {/* Side panel */}
               {selectedNode && (
                 <NodeDetailPanel
+                  key={selectedNodeId}
                   nodeId={selectedNodeId!}
                   nodeType={selectedNode.type}
                   nodeData={selectedNode.data}
-                  execution={selectedExec}
+                  executions={selectedExecs}
                   isCurrentNode={selectedNodeId === monitorData.currentNodeId}
                   featureId={featureId}
                   onClose={() => setSelectedNodeId(null)}

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, Package, Volume2, Film,
+  CircleDot, CheckCircle2, AlertTriangle, Clock, Package, Volume2, Film, Code,
 } from 'lucide-react';
 
 /* ── Execution status styling ── */
@@ -18,12 +18,14 @@ const STATUS_RING: Record<string, string> = {
   running: 'ring-2 ring-accent animate-pulse',
   completed: 'ring-2 ring-emerald-400',
   failed: 'ring-2 ring-error',
+  stopped: 'ring-2 ring-error',
 };
 
 const STATUS_BG: Record<string, string> = {
   running: 'bg-accent/10',
   completed: 'bg-emerald-500/10',
   failed: 'bg-error/10',
+  stopped: 'bg-error/10',
   pending: 'bg-white/[0.03]',
 };
 
@@ -31,6 +33,7 @@ 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" />;
+  if (status === 'stopped') return <Square size={size} className="text-error" />;
   return <Clock size={size} className="text-content-muted" />;
 }
 
@@ -57,15 +60,22 @@ function MonitorNodeWrapper({
 }) {
   const execStatus = (data._execStatus as string) || 'pending';
   const error = data._error as string | null;
+  const execCount = (data._execCount as number) || 0;
   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`}
+      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 relative`}
       onClick={(e) => { e.stopPropagation(); onNodeClick?.(id); }}
     >
+      {/* Execution count badge — shown when node has been executed more than once */}
+      {execCount > 1 && (
+        <div className="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-accent text-surface text-[10px] font-bold flex items-center justify-center shadow-sm">
+          {execCount}
+        </div>
+      )}
       {hasTarget && (
         <Handle type="target" position={Position.Top} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
       )}
@@ -244,3 +254,17 @@ export function MonitorRenderVideoNode({ id, data }: NodeProps) {
     />
   );
 }
+
+export function MonitorProgrammableNode({ id, data }: NodeProps) {
+  const d = data as Record<string, unknown>;
+  return (
+    <MonitorNodeWrapper
+      id={id}
+      data={d}
+      icon={<Code size={14} className="text-emerald-400" />}
+      label="Programmable"
+      detail={(d.label as string) || ''}
+      sourceHandles={['success', 'error']}
+    />
+  );
+}

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

@@ -12,6 +12,7 @@ export const WORKFLOW_NODE_TYPES = [
   'rebuildBundle',
   'generateTTS',
   'renderVideo',
+  'programmable',
 ] as const;
 
 export type WorkflowNodeType = typeof WORKFLOW_NODE_TYPES[number];
@@ -89,6 +90,21 @@ export interface RenderVideoData {
   fileOutputPrefix: string;
 }
 
+export interface ProgrammableNodeData {
+  /** User-visible name — used as key in context.nodeOutputs */
+  label: string;
+  /** User-written JavaScript code containing async function run(context) { ... } */
+  code: string;
+  /** Execution timeout in milliseconds (default: 30000) */
+  timeout: number;
+  /** V8 isolate memory limit in MB (default: 128) */
+  memory: number;
+  /** Max HTTP requests per execution (default: 20) */
+  maxRequests: number;
+  /** Max HTTP response body size in bytes (default: 5242880) */
+  maxResponseSize: number;
+}
+
 export type WorkflowNodeData =
   | ({ type: 'start' } & StartNodeData)
   | ({ type: 'transitionCard' } & TransitionCardData)
@@ -100,7 +116,8 @@ export type WorkflowNodeData =
   | ({ type: 'group' } & GroupNodeData)
   | ({ type: 'rebuildBundle' } & RebuildBundleData)
   | ({ type: 'generateTTS' } & GenerateTTSData)
-  | ({ type: 'renderVideo' } & RenderVideoData);
+  | ({ type: 'renderVideo' } & RenderVideoData)
+  | ({ type: 'programmable' } & ProgrammableNodeData);
 
 export interface NodePaletteItem {
   type: WorkflowNodeType;
@@ -119,8 +136,31 @@ export const NODE_PALETTE_ITEMS: NodePaletteItem[] = [
   { 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' },
+  { type: 'programmable', label: 'Programmable', description: 'Run custom JavaScript code' },
 ];
 
+const DEFAULT_PROGRAMMABLE_CODE = `async function run(context) {
+  // Destructure the execution context
+  const { featureId, projectId, cycle, nodeOutputs } = context;
+
+  // Access output from a previous node
+  const prevResult = nodeOutputs["Previous Node"];
+
+  try {
+    // Example: make an HTTP request using the SSRF-protected fetch bridge
+    const url = "https://api.example.com/data";
+    const response = await fetch(url);
+    const data = await response.json();
+
+    // Return a value to follow the success output handle
+    return { data };
+  } catch (error) {
+    // Throw to follow the error output handle
+    throw error;
+  }
+}
+`;
+
 export const NODE_DEFAULTS: Record<string, () => Record<string, unknown>> = {
   start: () => ({}),
   transitionCard: () => ({ sourceColumn: 'todo', targetColumn: 'in_progress' }),
@@ -133,4 +173,5 @@ export const NODE_DEFAULTS: Record<string, () => Record<string, unknown>> = {
   rebuildBundle: () => ({}),
   generateTTS: () => ({ scriptPath: '', force: false, voiceId: '' }),
   renderVideo: () => ({ compositionId: '', resolution: '1920x1080', aspectRatio: '', fileOutputPrefix: '' }),
+  programmable: () => ({ label: '', code: DEFAULT_PROGRAMMABLE_CODE, timeout: 30000, memory: 128, maxRequests: 20, maxResponseSize: 5242880 }),
 };

package/templates/assistkick-product-system/packages/frontend/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+/**
+ * Sets document.title to 'AK-{title}' when the component mounts
+ * and updates on title changes.
+ */
+export function useDocumentTitle(title: string): void {
+  useEffect(() => {
+    document.title = `AK-${title}`;
+  }, [title]);
+}

package/templates/assistkick-product-system/packages/frontend/src/hooks/useProjects.ts

@@ -19,6 +19,7 @@ export function useProjects() {
     selectProject: store.selectProject,
     createProject: store.createProject,
     renameProject: store.renameProject,
+    updatePreviewCommand: store.updatePreviewCommand,
     archiveProject: store.archiveProject,
     refetchProjects: store.refetchProjects,
   };