@assistkick/create 1.7.0 → 1.9.0

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

@@ -0,0 +1,474 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { apiClient } from '../api/client';
+import { useProjectStore } from '../stores/useProjectStore';
+import { useToast } from '../hooks/useToast';
+import { Button } from './ds/Button';
+import { Plus, Trash2, Save, ChevronDown, Star, HelpCircle } from 'lucide-react';
+import { WorkflowCanvas } from './workflow/WorkflowCanvas';
+import { NodePalette } from './workflow/NodePalette';
+import { SideSheet } from './ds/SideSheet';
+import { Kbd } from './ds/Kbd';
+import type { Node, Edge } from '@xyflow/react';
+
+interface WorkflowListItem {
+  id: string;
+  name: string;
+  description: string | null;
+  projectId: string | null;
+  isDefault: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface WorkflowFull extends WorkflowListItem {
+  graphData: string;
+}
+
+const INITIAL_START_NODE: Node = {
+  id: 'start_1',
+  type: 'start',
+  position: { x: 250, y: 50 },
+  data: {},
+};
+
+export function WorkflowsView() {
+  const projects = useProjectStore((s) => s.projects);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+  const { showToast } = useToast();
+
+  const [scope, setScope] = useState<'global' | 'project'>('global');
+  const [projectId, setProjectId] = useState(selectedProjectId || '');
+  const [workflows, setWorkflows] = useState<WorkflowListItem[]>([]);
+  const [selectedWorkflow, setSelectedWorkflow] = useState<WorkflowFull | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  // Track current canvas state for saving
+  const currentNodesRef = useRef<Node[]>([]);
+  const currentEdgesRef = useRef<Edge[]>([]);
+
+  const [howToOpen, setHowToOpen] = useState(false);
+
+  // Key to force remount of WorkflowCanvas when switching workflows
+  const [canvasKey, setCanvasKey] = useState(0);
+  // Key to force re-fetch of palette groups when a new group is saved
+  const [paletteKey, setPaletteKey] = useState(0);
+
+  const fetchWorkflows = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const pid = scope === 'project' ? projectId : undefined;
+      const resp = await apiClient.fetchWorkflows(pid);
+      setWorkflows(resp.workflows);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load workflows');
+    } finally {
+      setLoading(false);
+    }
+  }, [scope, projectId]);
+
+  useEffect(() => {
+    fetchWorkflows();
+  }, [fetchWorkflows]);
+
+  useEffect(() => {
+    if (selectedProjectId) setProjectId(selectedProjectId);
+  }, [selectedProjectId]);
+
+  const selectWorkflow = useCallback(async (wf: WorkflowListItem) => {
+    setError('');
+    try {
+      const resp = await apiClient.fetchWorkflow(wf.id);
+      const full: WorkflowFull = resp.workflow;
+      setSelectedWorkflow(full);
+      setEditName(full.name);
+      setEditDescription(full.description || '');
+      setCanvasKey((k) => k + 1);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load workflow');
+    }
+  }, []);
+
+  const getGraphData = useCallback((): { nodes: Node[]; edges: Edge[] } => {
+    if (selectedWorkflow) {
+      try {
+        return JSON.parse(selectedWorkflow.graphData);
+      } catch {
+        return { nodes: [INITIAL_START_NODE], edges: [] };
+      }
+    }
+    return { nodes: [INITIAL_START_NODE], edges: [] };
+  }, [selectedWorkflow]);
+
+  // Debounced auto-save for graph changes (positions, new nodes, edges, etc.)
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const selectedWorkflowRef = useRef(selectedWorkflow);
+  selectedWorkflowRef.current = selectedWorkflow;
+
+  // Clean up auto-save timer on unmount
+  useEffect(() => {
+    return () => {
+      if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+    };
+  }, []);
+
+  const autoSaveGraph = useCallback(async (nodes: Node[], edges: Edge[]) => {
+    const wf = selectedWorkflowRef.current;
+    if (!wf) return;
+    try {
+      const graphData = JSON.stringify({ nodes, edges });
+      await apiClient.updateWorkflow(wf.id, { graphData });
+    } catch {
+      // Silent fail for auto-save — user can still manually save
+    }
+  }, []);
+
+  const handleCanvasChange = useCallback((nodes: Node[], edges: Edge[]) => {
+    currentNodesRef.current = nodes;
+    currentEdgesRef.current = edges;
+
+    // Debounce auto-save: 800ms after last change
+    if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+    autoSaveTimerRef.current = setTimeout(() => {
+      autoSaveGraph(nodes, edges);
+    }, 800);
+  }, [autoSaveGraph]);
+
+  const handleCreate = useCallback(async () => {
+    try {
+      const graphData = JSON.stringify({
+        nodes: [INITIAL_START_NODE],
+        edges: [],
+      });
+      const data: any = {
+        name: 'New Workflow',
+        graphData,
+      };
+      if (scope === 'project' && projectId) data.projectId = projectId;
+      const resp = await apiClient.createWorkflow(data);
+      await fetchWorkflows();
+      await selectWorkflow(resp.workflow);
+      showToast('Workflow created', 'success');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }, [scope, projectId, fetchWorkflows, selectWorkflow, showToast]);
+
+  const handleSave = useCallback(async () => {
+    if (!selectedWorkflow) return;
+    setSaving(true);
+    setError('');
+    try {
+      const graphData = JSON.stringify({
+        nodes: currentNodesRef.current,
+        edges: currentEdgesRef.current,
+      });
+      const resp = await apiClient.updateWorkflow(selectedWorkflow.id, {
+        name: editName.trim(),
+        description: editDescription.trim() || undefined,
+        graphData,
+      });
+      setSelectedWorkflow(resp.workflow);
+      await fetchWorkflows();
+      showToast('Workflow saved', 'success');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  }, [selectedWorkflow, editName, editDescription, fetchWorkflows, showToast]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selectedWorkflow) return;
+    setError('');
+    try {
+      await apiClient.deleteWorkflow(selectedWorkflow.id);
+      setSelectedWorkflow(null);
+      await fetchWorkflows();
+      showToast('Workflow deleted', 'success');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }, [selectedWorkflow, fetchWorkflows, showToast]);
+
+  const handleSetDefault = useCallback(async (wfId: string) => {
+    setError('');
+    try {
+      await apiClient.setDefaultWorkflow(wfId);
+      await fetchWorkflows();
+      if (selectedWorkflow?.id === wfId) {
+        const resp = await apiClient.fetchWorkflow(wfId);
+        setSelectedWorkflow(resp.workflow);
+      }
+      showToast('Default workflow updated', 'success');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }, [selectedWorkflow, fetchWorkflows, showToast]);
+
+  const handleSaveAsGroup = useCallback(async (
+    name: string,
+    groupNodes: Node[],
+    groupEdges: Edge[],
+    inputHandles: string[],
+    outputHandles: string[],
+  ) => {
+    try {
+      const graphData = JSON.stringify({ nodes: groupNodes, edges: groupEdges, inputHandles, outputHandles });
+      const pid = scope === 'project' && projectId ? projectId : undefined;
+      await apiClient.createWorkflowGroup({ name, projectId: pid, graphData });
+      showToast(`Group "${name}" saved`, 'success');
+      // Refresh the palette to show the new group
+      setPaletteKey((k) => k + 1);
+    } catch (err: any) {
+      setError(err.message || 'Failed to save group');
+    }
+  }, [scope, projectId, showToast]);
+
+  const graphData = selectedWorkflow ? getGraphData() : null;
+  const effectiveProjectId = scope === 'project' ? projectId : undefined;
+
+  return (
+    <div className="flex h-full">
+      {/* Left Panel — Workflow List */}
+      <div className="w-72 border-r border-edge flex flex-col shrink-0">
+        {/* Scope Toggle */}
+        <div className="p-3 border-b border-edge space-y-2">
+          <div className="flex gap-1 p-0.5 rounded-lg bg-surface-raised">
+            <button
+              onClick={() => setScope('global')}
+              className={`flex-1 px-3 py-1.5 rounded-md text-[12px] font-medium transition-all ${
+                scope === 'global'
+                  ? 'bg-accent text-surface shadow-sm'
+                  : 'text-content-muted hover:text-content'
+              }`}
+            >
+              Global
+            </button>
+            <button
+              onClick={() => setScope('project')}
+              className={`flex-1 px-3 py-1.5 rounded-md text-[12px] font-medium transition-all ${
+                scope === 'project'
+                  ? 'bg-accent text-surface shadow-sm'
+                  : 'text-content-muted hover:text-content'
+              }`}
+            >
+              Project
+            </button>
+          </div>
+
+          {scope === 'project' && (
+            <div className="relative">
+              <select
+                value={projectId}
+                onChange={(e) => setProjectId(e.target.value)}
+                className="w-full px-3 py-1.5 rounded-md border border-edge bg-surface text-[12px] text-content appearance-none pr-7"
+              >
+                {projects.map(p => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
+                ))}
+              </select>
+              <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-content-muted pointer-events-none" />
+            </div>
+          )}
+        </div>
+
+        {/* Workflow List */}
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="p-4 text-center text-[12px] text-content-muted">Loading...</div>
+          ) : workflows.length === 0 ? (
+            <div className="p-4 text-center text-[12px] text-content-muted">No workflows found</div>
+          ) : (
+            workflows.map(wf => {
+              const isSelected = selectedWorkflow?.id === wf.id;
+              return (
+                <button
+                  key={wf.id}
+                  onClick={() => selectWorkflow(wf)}
+                  className={`w-full text-left px-3 py-2.5 border-b border-edge transition-all ${
+                    isSelected
+                      ? 'bg-accent/10 border-l-2 border-l-accent'
+                      : 'hover:bg-surface-raised border-l-2 border-l-transparent'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-[13px] font-medium text-content truncate">{wf.name}</span>
+                    {wf.isDefault === 1 && (
+                      <span className="shrink-0 px-1.5 py-0.5 rounded text-[9px] font-semibold uppercase bg-accent/10 text-accent">Default</span>
+                    )}
+                  </div>
+                  {wf.description && (
+                    <div className="text-[11px] text-content-muted mt-0.5 truncate">{wf.description}</div>
+                  )}
+                  <div className="flex items-center gap-2 mt-1">
+                    {wf.projectId ? (
+                      <span className="text-[9px] text-content-muted">Project</span>
+                    ) : (
+                      <span className="text-[9px] text-content-muted">Global</span>
+                    )}
+                    {wf.isDefault !== 1 && (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); handleSetDefault(wf.id); }}
+                        className="text-[9px] text-content-muted hover:text-accent transition-colors"
+                        title="Set as default"
+                      >
+                        <Star size={10} />
+                      </button>
+                    )}
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+
+        {/* Create Workflow Button */}
+        <div className="p-3 border-t border-edge">
+          <Button variant="primary" size="sm" icon={<Plus size={12} />} onClick={handleCreate} className="w-full justify-center">
+            Create Workflow
+          </Button>
+        </div>
+      </div>
+
+      {/* Right Panel — Workflow Editor */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {error && (
+          <div className="mx-4 mt-3 px-3 py-2 rounded-md bg-error/10 border border-error/20 text-error text-[12px] flex items-center justify-between">
+            <span>{error}</span>
+            <button onClick={() => setError('')} className="text-error hover:text-error/80">&times;</button>
+          </div>
+        )}
+
+        {!selectedWorkflow ? (
+          <div className="flex-1 flex items-center justify-center text-content-muted text-[13px]">
+            Select a workflow to edit or create a new one
+          </div>
+        ) : (
+          <>
+            {/* Header */}
+            <div className="p-3 border-b border-edge flex items-center justify-between gap-3">
+              <div className="flex-1 flex items-center gap-2">
+                <input
+                  value={editName}
+                  onChange={e => setEditName(e.target.value)}
+                  className="flex-1 px-3 py-1.5 rounded-md border border-edge bg-surface text-[14px] font-medium text-content"
+                  placeholder="Workflow name"
+                />
+                <input
+                  value={editDescription}
+                  onChange={e => setEditDescription(e.target.value)}
+                  className="flex-1 px-3 py-1.5 rounded-md border border-edge bg-surface text-[12px] text-content"
+                  placeholder="Description (optional)"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                {selectedWorkflow.isDefault !== 1 && (
+                  <Button variant="ghost" size="sm" icon={<Star size={12} />} onClick={() => handleSetDefault(selectedWorkflow.id)}>
+                    Set Default
+                  </Button>
+                )}
+                {selectedWorkflow.isDefault !== 1 && (
+                  <Button variant="danger" size="sm" icon={<Trash2 size={12} />} onClick={handleDelete}>
+                    Delete
+                  </Button>
+                )}
+                <Button variant="primary" size="sm" icon={<Save size={12} />} onClick={handleSave} disabled={saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </div>
+
+            {/* Canvas + Palette */}
+            <div className="flex-1 flex overflow-hidden">
+              {/* Node Palette Sidebar */}
+              <div className="w-52 border-r border-edge p-3 overflow-y-auto shrink-0">
+                <button
+                  onClick={() => setHowToOpen(true)}
+                  className="flex items-center gap-1.5 w-full px-2.5 py-2 mb-3 rounded-md border border-accent/30 bg-accent/5 hover:bg-accent/10 text-[12px] text-accent font-medium transition-colors"
+                >
+                  <HelpCircle size={14} />
+                  How To Use
+                </button>
+                <NodePalette key={paletteKey} projectId={effectiveProjectId} />
+              </div>
+
+              {/* Canvas */}
+              {graphData && (
+                <WorkflowCanvas
+                  key={canvasKey}
+                  initialNodes={graphData.nodes}
+                  initialEdges={graphData.edges}
+                  onChange={handleCanvasChange}
+                  onSaveAsGroup={handleSaveAsGroup}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      <SideSheet isOpen={howToOpen} onClose={() => setHowToOpen(false)} title="Workflow Editor — How To">
+        <div className="space-y-4">
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Adding Nodes</h3>
+            <p className="text-[12px] text-content-secondary">Drag any node from the <strong className="text-content">Node Palette</strong> on the left and drop it onto the canvas.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Connecting Nodes</h3>
+            <p className="text-[12px] text-content-secondary">Hover over a node to see its connection handles (small dots on the edges). Click and drag from one handle to another to create a connection.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Removing a Connection</h3>
+            <p className="text-[12px] text-content-secondary">Click on a connection line to select it, then press <Kbd>Backspace</Kbd> or <Kbd>Delete</Kbd> to remove it.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Deleting Nodes</h3>
+            <p className="text-[12px] text-content-secondary">Click on a node to select it, then press <Kbd>Backspace</Kbd> or <Kbd>Delete</Kbd>.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Multi-Select</h3>
+            <p className="text-[12px] text-content-secondary">Hold <Kbd>Shift</Kbd> and click multiple nodes to select them together. You can also click and drag on the canvas background to create a selection box.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Saving as Reusable Group</h3>
+            <p className="text-[12px] text-content-secondary">Select 2 or more nodes, then <strong className="text-content">right-click</strong> on one of them and choose &ldquo;Save as Reusable Group&rdquo;. The group will appear in the palette under <strong className="text-content">Groups</strong> for reuse.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Auto Layout</h3>
+            <p className="text-[12px] text-content-secondary">Click the <strong className="text-content">Auto Layout</strong> button in the top-right corner of the canvas to automatically arrange nodes in a tree layout.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Moving Nodes</h3>
+            <p className="text-[12px] text-content-secondary">Click and drag any node to reposition it. The canvas uses a 16px snap grid for alignment.</p>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Zooming & Panning</h3>
+            <ul className="pl-4 mt-1 space-y-0.5 text-[12px] text-content-secondary list-disc">
+              <li>Scroll to zoom in/out</li>
+              <li>Click and drag on the canvas background to pan</li>
+              <li>Use the controls in the bottom-left corner for zoom and fit-to-view</li>
+            </ul>
+          </section>
+
+          <section>
+            <h3 className="text-[13px] font-semibold text-content mb-1">Auto-Save</h3>
+            <p className="text-[12px] text-content-secondary">All changes to the canvas (node positions, connections, new nodes) are auto-saved after 800ms of inactivity. Use the <strong className="text-content">Save</strong> button in the header to also save name and description changes.</p>
+          </section>
+        </div>
+      </SideSheet>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+/* ── Border color presets ── */
+
+const BORDER_COLORS = {
+  accent: 'border-accent/30',
+  secondary: 'border-accent-secondary/40',
+  muted: 'border-content-muted/30',
+  error: 'border-error/30',
+} as const;
+
+const LABEL_COLORS = {
+  accent: 'text-accent',
+  secondary: 'text-accent-secondary',
+  muted: 'text-content-muted',
+  error: 'text-error',
+} as const;
+
+export type AccentBorderColor = keyof typeof BORDER_COLORS;
+
+/* ── List container ── */
+
+export interface AccentBorderListProps {
+  children: React.ReactNode;
+  gap?: number;
+}
+
+export function AccentBorderList({ children, gap = 4 }: AccentBorderListProps) {
+  return <div className={`space-y-${gap}`}>{children}</div>;
+}
+
+/* ── Individual item ── */
+
+export interface AccentBorderItemProps {
+  /** Left border color preset */
+  color?: AccentBorderColor;
+  /** Optional number/label shown before the title */
+  index?: string | number;
+  children: React.ReactNode;
+}
+
+export function AccentBorderItem({ color = 'accent', index, children }: AccentBorderItemProps) {
+  return (
+    <div className={`border-l-2 ${BORDER_COLORS[color]} pl-3`}>
+      {index != null && (
+        <span className={`text-[10px] font-mono font-bold ${LABEL_COLORS[color]} mr-1.5`}>
+          {typeof index === 'number' ? `${index}.` : index}
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import React from 'react';
+
+/* ── Types ── */
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  children: React.ReactNode;
+}
+
+/* ── Style maps ── */
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: [
+    'bg-accent text-surface font-semibold',
+    'hover:brightness-110',
+  ].join(' '),
+  secondary: [
+    'border border-accent bg-transparent text-accent font-semibold',
+    'hover:bg-accent hover:text-surface',
+  ].join(' '),
+  ghost: [
+    'border border-edge bg-transparent text-content-secondary',
+    'hover:border-content/20 hover:text-content',
+  ].join(' '),
+  danger: [
+    'border border-dashed border-error bg-transparent text-error font-semibold',
+    'hover:bg-error hover:text-white',
+  ].join(' '),
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'gap-1.5 rounded-md px-3 py-1 text-[11px]',
+  md: 'gap-2 rounded-lg px-4 py-2 text-[13px]',
+  lg: 'gap-2 rounded-xl px-6 py-3 text-[15px]',
+};
+
+const glowShadow: Record<ButtonSize, string> = {
+  sm: '0 1px 4px -1px var(--accent)',
+  md: '0 2px 8px -2px var(--accent)',
+  lg: '0 3px 12px -3px var(--accent)',
+};
+
+/* ── Component ── */
+
+export const Button = ({
+  variant = 'primary',
+  size = 'md',
+  icon,
+  iconPosition = 'left',
+  disabled,
+  className = '',
+  style,
+  children,
+  ...rest
+}: Props) => {
+  const base = 'inline-flex items-center outline-none cursor-pointer transition-all duration-150';
+  const disabledClass = disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+  const shadow = variant === 'primary' && !disabled
+    ? { boxShadow: glowShadow[size], ...style }
+    : style;
+
+  return (
+    <button
+      disabled={disabled}
+      className={[
+        base,
+        variantClasses[variant],
+        sizeClasses[size],
+        disabledClass,
+        className,
+      ].join(' ')}
+      style={shadow}
+      {...rest}
+    >
+      {icon && iconPosition === 'left' && icon}
+      {children}
+      {icon && iconPosition === 'right' && icon}
+    </button>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/* ── Types ── */
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/* ── Component ── */
+
+export const ButtonGroup = ({ children, className = '' }: Props) => {
+  return (
+    <div
+      role="group"
+      className={[
+        'inline-flex overflow-hidden rounded-lg border border-edge',
+        '[&>button]:outline-none [&>button]:cursor-pointer',
+        '[&>button]:px-3 [&>button]:py-2 [&>button]:text-[12px]',
+        '[&>button]:text-content-secondary [&>button]:transition-colors [&>button]:duration-150',
+        '[&>button:hover]:bg-surface-raised [&>button:hover]:text-content',
+        '[&>button:not(:last-child)]:border-r [&>button:not(:last-child)]:border-edge',
+        className,
+      ].join(' ')}
+    >
+      {children}
+    </div>
+  );
+};