@marktoflow/gui 2.0.0-alpha.4 → 2.0.1

package/src/client/stores/themeStore.ts

@@ -1,75 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-export type Theme = 'dark' | 'light' | 'system';
-
-interface ThemeState {
-  theme: Theme;
-  resolvedTheme: 'dark' | 'light';
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
-}
-
-// Check system preference
-function getSystemTheme(): 'dark' | 'light' {
-  if (typeof window === 'undefined') return 'dark';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-// Apply theme to document
-function applyTheme(resolvedTheme: 'dark' | 'light') {
-  if (typeof document === 'undefined') return;
-
-  const root = document.documentElement;
-  if (resolvedTheme === 'dark') {
-    root.classList.add('dark');
-    root.classList.remove('light');
-  } else {
-    root.classList.add('light');
-    root.classList.remove('dark');
-  }
-}
-
-export const useThemeStore = create<ThemeState>()(
-  persist(
-    (set, get) => ({
-      theme: 'dark',
-      resolvedTheme: 'dark',
-
-      setTheme: (theme: Theme) => {
-        const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
-        applyTheme(resolvedTheme);
-        set({ theme, resolvedTheme });
-      },
-
-      toggleTheme: () => {
-        const { theme } = get();
-        const newTheme: Theme = theme === 'dark' ? 'light' : 'dark';
-        const resolvedTheme = newTheme === 'system' ? getSystemTheme() : newTheme;
-        applyTheme(resolvedTheme);
-        set({ theme: newTheme, resolvedTheme: resolvedTheme });
-      },
-    }),
-    {
-      name: 'marktoflow-theme',
-      onRehydrateStorage: () => (state) => {
-        // Apply theme when storage is rehydrated
-        if (state) {
-          const resolvedTheme = state.theme === 'system' ? getSystemTheme() : state.theme;
-          applyTheme(resolvedTheme);
-          state.resolvedTheme = resolvedTheme;
-        }
-      },
-    }
-  )
-);
-
-// Listen for system theme changes
-if (typeof window !== 'undefined') {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-    const { theme, setTheme } = useThemeStore.getState();
-    if (theme === 'system') {
-      setTheme('system'); // Re-resolve the theme
-    }
-  });
-}

package/src/client/stores/workflowStore.ts

@@ -1,177 +0,0 @@
-import { create } from 'zustand';
-import type { Workflow, WorkflowListItem } from '@shared/types';
-
-interface WorkflowState {
-  workflows: WorkflowListItem[];
-  selectedWorkflow: string | null;
-  currentWorkflow: Workflow | null;
-  isLoading: boolean;
-  error: string | null;
-
-  loadWorkflows: () => Promise<void>;
-  selectWorkflow: (path: string) => void;
-  loadWorkflow: (path: string) => Promise<void>;
-  saveWorkflow: (workflow: Workflow) => Promise<void>;
-  createWorkflow: (name: string) => Promise<void>;
-  deleteWorkflow: (path: string) => Promise<void>;
-}
-
-// Demo workflows for initial state
-const demoWorkflows: WorkflowListItem[] = [
-  { path: 'examples/code-review/workflow.md', name: 'Code Review' },
-  { path: 'examples/daily-standup/workflow.md', name: 'Daily Standup' },
-  { path: 'examples/incident-response/workflow.md', name: 'Incident Response' },
-  { path: 'examples/sprint-planning/workflow.md', name: 'Sprint Planning' },
-  { path: 'examples/dependency-update/workflow.md', name: 'Dependency Update' },
-];
-
-const demoWorkflow: Workflow = {
-  metadata: {
-    id: 'code-review',
-    name: 'Code Review',
-    version: '1.0.0',
-    description: 'Automatically review pull requests using Claude AI',
-    author: 'Marktoflow',
-    tags: ['github', 'ai', 'code-review'],
-  },
-  steps: [
-    {
-      id: 'fetch_pr',
-      name: 'Fetch PR Details',
-      action: 'github.pulls.get',
-      inputs: {
-        owner: "{{ inputs.repo.split('/')[0] }}",
-        repo: "{{ inputs.repo.split('/')[1] }}",
-        pull_number: '{{ inputs.pr_number }}',
-      },
-      outputVariable: 'pr_details',
-    },
-    {
-      id: 'get_files',
-      name: 'Get Changed Files',
-      action: 'github.pulls.listFiles',
-      inputs: {
-        owner: "{{ inputs.repo.split('/')[0] }}",
-        repo: "{{ inputs.repo.split('/')[1] }}",
-        pull_number: '{{ inputs.pr_number }}',
-      },
-      outputVariable: 'changed_files',
-    },
-    {
-      id: 'analyze',
-      name: 'Analyze Changes',
-      action: 'claude.analyze',
-      inputs: {
-        prompt: 'Review the following code changes',
-        context: '{{ changed_files }}',
-      },
-      outputVariable: 'analysis',
-    },
-    {
-      id: 'post_review',
-      name: 'Post Review',
-      action: 'github.pulls.createReview',
-      inputs: {
-        owner: "{{ inputs.repo.split('/')[0] }}",
-        repo: "{{ inputs.repo.split('/')[1] }}",
-        pull_number: '{{ inputs.pr_number }}',
-        body: '{{ analysis.summary }}',
-        event: 'COMMENT',
-      },
-      outputVariable: 'review_result',
-    },
-  ],
-};
-
-export const useWorkflowStore = create<WorkflowState>((set, get) => ({
-  workflows: demoWorkflows,
-  selectedWorkflow: demoWorkflows[0].path,
-  currentWorkflow: demoWorkflow,
-  isLoading: false,
-  error: null,
-
-  loadWorkflows: async () => {
-    set({ isLoading: true, error: null });
-    try {
-      const response = await fetch('/api/workflows');
-      if (!response.ok) throw new Error('Failed to load workflows');
-      const data = await response.json();
-      set({ workflows: data.workflows, isLoading: false });
-    } catch (error) {
-      // Use demo data if API fails
-      set({ workflows: demoWorkflows, isLoading: false });
-    }
-  },
-
-  selectWorkflow: (path) => {
-    set({ selectedWorkflow: path });
-    get().loadWorkflow(path);
-  },
-
-  loadWorkflow: async (path) => {
-    set({ isLoading: true, error: null });
-    try {
-      const response = await fetch(`/api/workflows/${encodeURIComponent(path)}`);
-      if (!response.ok) throw new Error('Failed to load workflow');
-      const data = await response.json();
-      set({ currentWorkflow: data.workflow, isLoading: false });
-    } catch (error) {
-      // Use demo data if API fails
-      set({ currentWorkflow: demoWorkflow, isLoading: false });
-    }
-  },
-
-  saveWorkflow: async (workflow) => {
-    const path = get().selectedWorkflow;
-    if (!path) return;
-
-    set({ isLoading: true, error: null });
-    try {
-      const response = await fetch(`/api/workflows/${encodeURIComponent(path)}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ workflow }),
-      });
-      if (!response.ok) throw new Error('Failed to save workflow');
-      set({ currentWorkflow: workflow, isLoading: false });
-    } catch (error) {
-      set({ error: 'Failed to save workflow', isLoading: false });
-    }
-  },
-
-  createWorkflow: async (name) => {
-    set({ isLoading: true, error: null });
-    try {
-      const response = await fetch('/api/workflows', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name }),
-      });
-      if (!response.ok) throw new Error('Failed to create workflow');
-      const data = await response.json();
-      const workflows = [...get().workflows, data.workflow];
-      set({ workflows, selectedWorkflow: data.workflow.path, isLoading: false });
-      get().loadWorkflow(data.workflow.path);
-    } catch (error) {
-      set({ error: 'Failed to create workflow', isLoading: false });
-    }
-  },
-
-  deleteWorkflow: async (path) => {
-    set({ isLoading: true, error: null });
-    try {
-      const response = await fetch(`/api/workflows/${encodeURIComponent(path)}`, {
-        method: 'DELETE',
-      });
-      if (!response.ok) throw new Error('Failed to delete workflow');
-      const workflows = get().workflows.filter((w) => w.path !== path);
-      set({
-        workflows,
-        selectedWorkflow: workflows[0]?.path || null,
-        isLoading: false,
-      });
-    } catch (error) {
-      set({ error: 'Failed to delete workflow', isLoading: false });
-    }
-  },
-}));

package/src/client/styles/globals.css

@@ -1,346 +0,0 @@
-/* React Flow base styles - must be before @tailwind */
-@import '@xyflow/react/dist/style.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #3d3d5c;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4d4d6c;
-}
-
-/* Canvas overrides */
-.react-flow__background {
-  background-color: #1a1a2e !important;
-}
-
-.react-flow__minimap {
-  background-color: #232340 !important;
-  border-radius: 8px;
-  border: 1px solid #3d3d5c;
-}
-
-.react-flow__controls {
-  background-color: #232340 !important;
-  border-radius: 8px;
-  border: 1px solid #3d3d5c;
-}
-
-.react-flow__controls-button {
-  background-color: #2d2d4a !important;
-  border-color: #3d3d5c !important;
-  color: white !important;
-}
-
-.react-flow__controls-button:hover {
-  background-color: #3d3d5c !important;
-}
-
-/* Node base styles */
-.step-node {
-  min-width: 200px;
-  border-radius: 8px;
-  background: #2d2d4a;
-  border: 2px solid #3d3d5c;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
-}
-
-.step-node:hover {
-  border-color: #ff6d5a;
-}
-
-.step-node.selected {
-  border-color: #ff6d5a;
-  box-shadow: 0 0 0 4px rgba(255, 109, 90, 0.2);
-}
-
-.step-node.running {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.step-node.completed {
-  border-color: #5cb85c;
-}
-
-.step-node.failed {
-  border-color: #d9534f;
-}
-
-/* Edge animation */
-.react-flow__edge-path.animated {
-  stroke-dasharray: 8;
-  animation: flowEdge 1s linear infinite;
-}
-
-@keyframes flowEdge {
-  from {
-    stroke-dashoffset: 24;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-/* Monaco editor overrides */
-.monaco-editor {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-/* Light mode overrides */
-.light {
-  --color-bg-canvas: #f5f5f7;
-  --color-bg-panel: #ffffff;
-  --color-bg-node: #ffffff;
-  --color-border-node: #e5e5e5;
-  --color-text-primary: #1a1a2e;
-  --color-text-secondary: #666666;
-  --color-text-muted: #999999;
-}
-
-.dark {
-  --color-bg-canvas: #1a1a2e;
-  --color-bg-panel: #232340;
-  --color-bg-node: #2d2d4a;
-  --color-border-node: #3d3d5c;
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #d0d0d0;
-  --color-text-muted: #888888;
-}
-
-.light .react-flow__background {
-  background-color: #f5f5f7 !important;
-}
-
-.light .react-flow__background pattern circle {
-  fill: #d0d0d0 !important;
-}
-
-.light .react-flow__minimap {
-  background-color: #ffffff !important;
-  border-color: #e5e5e5;
-}
-
-.light .react-flow__controls {
-  background-color: #ffffff !important;
-  border-color: #e5e5e5;
-}
-
-.light .react-flow__controls-button {
-  background-color: #f5f5f7 !important;
-  border-color: #e5e5e5 !important;
-  color: #1a1a2e !important;
-}
-
-.light .react-flow__controls-button:hover {
-  background-color: #e5e5e5 !important;
-}
-
-.light .step-node {
-  background: #ffffff;
-  border-color: #e5e5e5;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.light .step-node:hover {
-  border-color: #ff6d5a;
-}
-
-.light ::-webkit-scrollbar-thumb {
-  background: #d0d0d0;
-}
-
-.light ::-webkit-scrollbar-thumb:hover {
-  background: #b0b0b0;
-}
-
-/* Light mode text colors */
-.light .text-white {
-  color: #1a1a2e;
-}
-
-.light .text-gray-300 {
-  color: #4a4a4a;
-}
-
-.light .text-gray-400 {
-  color: #666666;
-}
-
-.light .text-gray-500 {
-  color: #888888;
-}
-
-/* Light mode backgrounds */
-.light .bg-canvas-bg {
-  background-color: #f5f5f7;
-}
-
-.light .bg-panel-bg {
-  background-color: #ffffff;
-}
-
-.light .bg-node-bg {
-  background-color: #f5f5f7;
-}
-
-.light .border-node-border {
-  border-color: #e5e5e5;
-}
-
-/* Light mode buttons */
-.light .bg-primary\/10 {
-  background-color: rgba(255, 109, 90, 0.15);
-}
-
-.light .hover\:bg-white\/5:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.light .hover\:bg-white\/10:hover {
-  background-color: rgba(0, 0, 0, 0.08);
-}
-
-/* Light mode inputs */
-.light input,
-.light textarea,
-.light select {
-  background-color: #ffffff;
-  border-color: #e5e5e5;
-  color: #1a1a2e;
-}
-
-.light input::placeholder,
-.light textarea::placeholder {
-  color: #999999;
-}
-
-.light input:focus,
-.light textarea:focus,
-.light select:focus {
-  border-color: #ff6d5a;
-}
-
-/* Light mode kbd elements */
-.light kbd {
-  background-color: #f5f5f7;
-  border-color: #e5e5e5;
-  color: #4a4a4a;
-}
-
-/* Responsive animations */
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft 0.2s ease-out forwards;
-}
-
-.animate-slide-in-right {
-  animation: slideInRight 0.2s ease-out forwards;
-}
-
-.animate-slide-out-left {
-  animation: slideOutLeft 0.2s ease-in forwards;
-}
-
-.animate-slide-out-right {
-  animation: slideOutRight 0.2s ease-in forwards;
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.15s ease-out forwards;
-}
-
-/* Mobile-specific styles */
-@media (max-width: 767px) {
-  /* Ensure toolbar buttons are touch-friendly */
-  .toolbar-button {
-    min-width: 44px;
-    min-height: 44px;
-  }
-
-  /* Adjust canvas controls for mobile */
-  .react-flow__controls {
-    bottom: 80px !important;
-  }
-
-  /* Make prompt input more prominent on mobile */
-  .prompt-input-container {
-    padding: 8px;
-  }
-}
-
-/* Tablet styles */
-@media (min-width: 768px) and (max-width: 1023px) {
-  /* Slightly more compact on tablets */
-  .react-flow__minimap {
-    display: none;
-  }
-}

package/src/client/utils/cn.ts

@@ -1,9 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Utility function to merge Tailwind CSS classes
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/client/utils/index.ts

@@ -1,4 +0,0 @@
-export { cn } from './cn';
-export { getServiceIcon, getServiceColor } from './serviceIcons';
-export { workflowToGraph, graphToWorkflow } from './workflowToGraph';
-export { validateStep, getFieldError, hasFieldError, type ValidationError, type ValidationResult } from './stepValidation';

package/src/client/utils/serviceIcons.tsx

@@ -1,97 +0,0 @@
-import {
-  MessageSquare,
-  GitBranch,
-  ClipboardList,
-  Mail,
-  Calendar,
-  Trello,
-  FileText,
-  MessageCircle,
-  Database,
-  Globe,
-  Bot,
-  Zap,
-  HelpCircle,
-  Phone,
-  Send,
-  ShoppingCart,
-  Headphones,
-  Users,
-  CheckSquare,
-  Cloud,
-  HardDrive,
-  CreditCard,
-} from 'lucide-react';
-
-type IconComponent = React.ComponentType<{ className?: string }>;
-
-const serviceIcons: Record<string, IconComponent> = {
-  slack: MessageSquare,
-  github: GitBranch,
-  jira: ClipboardList,
-  gmail: Mail,
-  outlook: Calendar,
-  linear: Trello,
-  notion: FileText,
-  discord: MessageCircle,
-  airtable: Database,
-  confluence: FileText,
-  http: Globe,
-  claude: Bot,
-  opencode: Bot,
-  ollama: Bot,
-  webhook: Zap,
-  schedule: Calendar,
-  trigger: Zap,
-  stripe: CreditCard,
-  teams: Users,
-  twilio: Phone,
-  sendgrid: Send,
-  shopify: ShoppingCart,
-  zendesk: Headphones,
-  mailchimp: Mail,
-  asana: CheckSquare,
-  trello: Trello,
-  dropbox: Cloud,
-  's3': HardDrive,
-  'aws-s3': HardDrive,
-};
-
-export function getServiceIcon(serviceName: string): IconComponent {
-  const normalizedName = serviceName.toLowerCase().split('.')[0];
-  return serviceIcons[normalizedName] || HelpCircle;
-}
-
-export function getServiceColor(serviceName: string): string {
-  const colors: Record<string, string> = {
-    slack: '#4A154B',
-    github: '#24292e',
-    jira: '#0052CC',
-    gmail: '#EA4335',
-    outlook: '#0078D4',
-    linear: '#5E6AD2',
-    notion: '#000000',
-    discord: '#5865F2',
-    airtable: '#FFBF00',
-    confluence: '#0052CC',
-    http: '#00D1B2',
-    claude: '#CC785C',
-    opencode: '#00A67E',
-    ollama: '#1a1a2e',
-    stripe: '#635BFF',
-    teams: '#6264A7',
-    twilio: '#F22F46',
-    sendgrid: '#1A82E2',
-    shopify: '#96BF48',
-    zendesk: '#03363D',
-    mailchimp: '#FFE01B',
-    asana: '#F06A6A',
-    trello: '#0079BF',
-    dropbox: '#0061FF',
-    's3': '#FF9900',
-    'aws-s3': '#FF9900',
-  };
-
-  const normalizedName = serviceName.toLowerCase().split('.')[0];
-  return colors[normalizedName] || '#6B7280';
-}