@marktoflow/gui 2.0.0-alpha.1

package/src/client/stores/themeStore.ts

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,177 @@
+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

@@ -0,0 +1,346 @@
+/* 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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,64 @@
+import {
+  MessageSquare,
+  GitBranch,
+  ClipboardList,
+  Mail,
+  Calendar,
+  Trello,
+  FileText,
+  MessageCircle,
+  Database,
+  Globe,
+  Bot,
+  Zap,
+  HelpCircle,
+} 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,
+};
+
+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',
+  };
+
+  const normalizedName = serviceName.toLowerCase().split('.')[0];
+  return colors[normalizedName] || '#6B7280';
+}