machinaos 0.0.1 → 0.0.7

package/client/src/components/ui/AIResultModal.tsx

@@ -1,204 +1,204 @@
-import React from 'react';
-import Modal from './Modal';
-import { useAppTheme } from '../../hooks/useAppTheme';
-import { copyToClipboard, formatTimestamp } from '../../utils/formatters';
-
-interface AIResultModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  result: {
-    response: string;
-    usage?: {
-      promptTokens: number;
-      completionTokens: number;
-      totalTokens: number;
-    };
-    model: string;
-    finishReason?: string;
-    nodeId: string;
-    nodeName: string;
-    timestamp: string;
-  } | null;
-}
-
-const AIResultModal: React.FC<AIResultModalProps> = ({ isOpen, onClose, result }) => {
-  const theme = useAppTheme();
-  if (!result) return null;
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title="🤖 AI Execution Result"
-      maxWidth="800px"
-      maxHeight="90vh"
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        {/* Header Info */}
-        <div style={{
-          padding: theme.spacing.lg,
-          borderBottom: `1px solid ${theme.colors.border}`,
-          backgroundColor: theme.colors.backgroundAlt,
-        }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: theme.spacing.sm }}>
-            <div>
-              <h3 style={{ 
-                margin: 0, 
-                fontSize: theme.fontSize.lg, 
-                fontWeight: theme.fontWeight.semibold,
-                color: theme.colors.text 
-              }}>
-                {result.nodeName} Result
-              </h3>
-              <p style={{
-                margin: `${theme.spacing.xs} 0 0 0`,
-                fontSize: theme.fontSize.sm,
-                color: theme.colors.textSecondary
-              }}>
-                Model: {result.model} | {formatTimestamp(result.timestamp)}
-              </p>
-            </div>
-            <button
-              onClick={() => copyToClipboard(result.response, 'Response copied to clipboard!')}
-              style={{
-                padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
-                backgroundColor: theme.colors.focus,
-                color: 'white',
-                border: 'none',
-                borderRadius: theme.borderRadius.sm,
-                fontSize: theme.fontSize.sm,
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: theme.spacing.xs
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#2563eb'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = theme.colors.focus}
-            >
-              📋 Copy Response
-            </button>
-          </div>
-          
-          {/* Usage Stats */}
-          {result.usage && (
-            <div style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
-              gap: theme.spacing.sm,
-              marginTop: theme.spacing.sm,
-            }}>
-              <div style={{
-                padding: theme.spacing.sm,
-                backgroundColor: theme.colors.background,
-                borderRadius: theme.borderRadius.sm,
-                textAlign: 'center'
-              }}>
-                <div style={{ fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
-                  {result.usage.promptTokens}
-                </div>
-                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
-                  Prompt Tokens
-                </div>
-              </div>
-              <div style={{
-                padding: theme.spacing.sm,
-                backgroundColor: theme.colors.background,
-                borderRadius: theme.borderRadius.sm,
-                textAlign: 'center'
-              }}>
-                <div style={{ fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
-                  {result.usage.completionTokens}
-                </div>
-                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
-                  Completion Tokens
-                </div>
-              </div>
-              <div style={{
-                padding: theme.spacing.sm,
-                backgroundColor: theme.colors.background,
-                borderRadius: theme.borderRadius.sm,
-                textAlign: 'center'
-              }}>
-                <div style={{ fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
-                  {result.usage.totalTokens}
-                </div>
-                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
-                  Total Tokens
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Response Content */}
-        <div style={{
-          flex: 1,
-          padding: theme.spacing.lg,
-          overflowY: 'auto'
-        }}>
-          <h4 style={{
-            margin: `0 0 ${theme.spacing.md} 0`,
-            fontSize: theme.fontSize.base,
-            fontWeight: theme.fontWeight.medium,
-            color: theme.colors.text
-          }}>
-            Response:
-          </h4>
-          <div style={{
-            padding: theme.spacing.lg,
-            backgroundColor: theme.colors.backgroundAlt,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.borderRadius.md,
-            fontSize: theme.fontSize.base,
-            lineHeight: '1.6',
-            color: theme.colors.text,
-            whiteSpace: 'pre-wrap',
-            fontFamily: 'system-ui, -apple-system, sans-serif',
-            maxHeight: '400px',
-            overflowY: 'auto'
-          }}>
-            {result.response}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div style={{
-          padding: theme.spacing.lg,
-          borderTop: `1px solid ${theme.colors.border}`,
-          backgroundColor: theme.colors.backgroundAlt,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        }}>
-          <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
-            {result.finishReason && `Finish reason: ${result.finishReason}`}
-          </div>
-          <button
-            onClick={onClose}
-            style={{
-              padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
-              backgroundColor: theme.colors.background,
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: theme.borderRadius.sm,
-              fontSize: theme.fontSize.sm,
-              cursor: 'pointer',
-              transition: 'all 0.2s ease'
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
-              e.currentTarget.style.borderColor = theme.colors.borderHover;
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = theme.colors.background;
-              e.currentTarget.style.borderColor = theme.colors.border;
-            }}
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
+import React from 'react';
+import Modal from './Modal';
+import { useAppTheme } from '../../hooks/useAppTheme';
+import { copyToClipboard, formatTimestamp } from '../../utils/formatters';
+
+interface AIResultModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  result: {
+    response: string;
+    usage?: {
+      promptTokens: number;
+      completionTokens: number;
+      totalTokens: number;
+    };
+    model: string;
+    finishReason?: string;
+    nodeId: string;
+    nodeName: string;
+    timestamp: string;
+  } | null;
+}
+
+const AIResultModal: React.FC<AIResultModalProps> = ({ isOpen, onClose, result }) => {
+  const theme = useAppTheme();
+  if (!result) return null;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="🤖 AI Execution Result"
+      maxWidth="800px"
+      maxHeight="90vh"
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        {/* Header Info */}
+        <div style={{
+          padding: theme.spacing.lg,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          backgroundColor: theme.colors.backgroundAlt,
+        }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: theme.spacing.sm }}>
+            <div>
+              <h3 style={{ 
+                margin: 0, 
+                fontSize: theme.fontSize.lg, 
+                fontWeight: theme.fontWeight.semibold,
+                color: theme.colors.text 
+              }}>
+                {result.nodeName} Result
+              </h3>
+              <p style={{
+                margin: `${theme.spacing.xs} 0 0 0`,
+                fontSize: theme.fontSize.sm,
+                color: theme.colors.textSecondary
+              }}>
+                Model: {result.model} | {formatTimestamp(result.timestamp)}
+              </p>
+            </div>
+            <button
+              onClick={() => copyToClipboard(result.response, 'Response copied to clipboard!')}
+              style={{
+                padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                backgroundColor: theme.colors.focus,
+                color: 'white',
+                border: 'none',
+                borderRadius: theme.borderRadius.sm,
+                fontSize: theme.fontSize.sm,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.xs
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#2563eb'}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = theme.colors.focus}
+            >
+              📋 Copy Response
+            </button>
+          </div>
+          
+          {/* Usage Stats */}
+          {result.usage && (
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+              gap: theme.spacing.sm,
+              marginTop: theme.spacing.sm,
+            }}>
+              <div style={{
+                padding: theme.spacing.sm,
+                backgroundColor: theme.colors.background,
+                borderRadius: theme.borderRadius.sm,
+                textAlign: 'center'
+              }}>
+                <div style={{ fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
+                  {result.usage.promptTokens}
+                </div>
+                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
+                  Prompt Tokens
+                </div>
+              </div>
+              <div style={{
+                padding: theme.spacing.sm,
+                backgroundColor: theme.colors.background,
+                borderRadius: theme.borderRadius.sm,
+                textAlign: 'center'
+              }}>
+                <div style={{ fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
+                  {result.usage.completionTokens}
+                </div>
+                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
+                  Completion Tokens
+                </div>
+              </div>
+              <div style={{
+                padding: theme.spacing.sm,
+                backgroundColor: theme.colors.background,
+                borderRadius: theme.borderRadius.sm,
+                textAlign: 'center'
+              }}>
+                <div style={{ fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
+                  {result.usage.totalTokens}
+                </div>
+                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
+                  Total Tokens
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Response Content */}
+        <div style={{
+          flex: 1,
+          padding: theme.spacing.lg,
+          overflowY: 'auto'
+        }}>
+          <h4 style={{
+            margin: `0 0 ${theme.spacing.md} 0`,
+            fontSize: theme.fontSize.base,
+            fontWeight: theme.fontWeight.medium,
+            color: theme.colors.text
+          }}>
+            Response:
+          </h4>
+          <div style={{
+            padding: theme.spacing.lg,
+            backgroundColor: theme.colors.backgroundAlt,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.md,
+            fontSize: theme.fontSize.base,
+            lineHeight: '1.6',
+            color: theme.colors.text,
+            whiteSpace: 'pre-wrap',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            maxHeight: '400px',
+            overflowY: 'auto'
+          }}>
+            {result.response}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div style={{
+          padding: theme.spacing.lg,
+          borderTop: `1px solid ${theme.colors.border}`,
+          backgroundColor: theme.colors.backgroundAlt,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+          <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary }}>
+            {result.finishReason && `Finish reason: ${result.finishReason}`}
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+              backgroundColor: theme.colors.background,
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: theme.borderRadius.sm,
+              fontSize: theme.fontSize.sm,
+              cursor: 'pointer',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
+              e.currentTarget.style.borderColor = theme.colors.borderHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = theme.colors.background;
+              e.currentTarget.style.borderColor = theme.colors.border;
+            }}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
 export default AIResultModal;

package/client/src/components/ui/ApiKeyInput.tsx

@@ -0,0 +1,93 @@
+/**
+ * ApiKeyInput - Reusable API key input component with central theming
+ */
+
+import React, { useState } from 'react';
+import { Input, Button, Space } from 'antd';
+import { SaveOutlined, DeleteOutlined, EyeOutlined, EyeInvisibleOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface ApiKeyInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  onDelete?: () => void;
+  placeholder?: string;
+  loading?: boolean;
+  isStored?: boolean | null;
+  disabled?: boolean;
+  /** Label for save button (default: 'Validate') */
+  saveLabel?: string;
+  /** Label when validated/saved (default: 'Valid') */
+  savedLabel?: string;
+}
+
+const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
+  value,
+  onChange,
+  onSave,
+  onDelete,
+  placeholder = 'Enter API key...',
+  loading = false,
+  isStored = false,
+  disabled = false,
+  saveLabel = 'Validate',
+  savedLabel = 'Valid',
+}) => {
+  const theme = useAppTheme();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Space.Compact style={{ width: '100%' }}>
+      <Input
+        type={visible ? 'text' : 'password'}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={{
+          fontFamily: 'monospace',
+          backgroundColor: theme.colors.background,
+          borderColor: theme.colors.border,
+          color: theme.colors.text,
+        }}
+        suffix={
+          <Button
+            type="text"
+            size="small"
+            icon={visible ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+            onClick={() => setVisible(!visible)}
+            style={{ color: theme.colors.textSecondary }}
+          />
+        }
+      />
+      <Button
+        icon={isStored ? <CheckCircleOutlined /> : <SaveOutlined />}
+        loading={loading}
+        onClick={onSave}
+        disabled={!value.trim() || disabled}
+        style={{
+          backgroundColor: `${theme.dracula.green}25`,
+          borderColor: `${theme.dracula.green}60`,
+          color: theme.dracula.green,
+        }}
+      >
+        {isStored ? savedLabel : saveLabel}
+      </Button>
+      {isStored && onDelete && (
+        <Button
+          icon={<DeleteOutlined />}
+          onClick={onDelete}
+          disabled={disabled}
+          style={{
+            backgroundColor: `${theme.dracula.pink}25`,
+            borderColor: `${theme.dracula.pink}60`,
+            color: theme.dracula.pink,
+          }}
+        />
+      )}
+    </Space.Compact>
+  );
+};
+
+export default ApiKeyInput;

package/client/src/components/ui/CodeEditor.tsx

@@ -1,81 +1,81 @@
-import React from 'react';
-import Editor from 'react-simple-code-editor';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-markdown';
-import { useAppTheme } from '../../hooks/useAppTheme';
-
-interface CodeEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  language?: string;
-  placeholder?: string;
-}
-
-const CodeEditor: React.FC<CodeEditorProps> = ({
-  value,
-  onChange,
-  language = 'python',
-  placeholder
-}) => {
-  const theme = useAppTheme();
-
-  const handleChange = (newValue: string) => {
-    console.log('[CodeEditor] Value changed, length:', newValue.length);
-    onChange(newValue);
-  };
-
-  const highlight = (code: string) => {
-    const grammar = Prism.languages[language] || Prism.languages.python;
-    return Prism.highlight(code, grammar, language);
-  };
-
-  return (
-    <div style={{
-      height: '100%',
-      borderRadius: theme.borderRadius.md,
-      overflow: 'hidden',
-      border: `1px solid ${theme.colors.border}`
-    }}>
-      <style>{`
-        .code-editor-container .token.comment { color: ${theme.dracula.comment}; }
-        .code-editor-container .token.string { color: ${theme.dracula.yellow}; }
-        .code-editor-container .token.keyword { color: ${theme.dracula.pink}; }
-        .code-editor-container .token.function { color: ${theme.dracula.green}; }
-        .code-editor-container .token.number { color: ${theme.dracula.purple}; }
-        .code-editor-container .token.operator { color: ${theme.dracula.pink}; }
-        .code-editor-container .token.class-name { color: ${theme.dracula.cyan}; }
-        .code-editor-container .token.builtin { color: ${theme.dracula.cyan}; }
-        .code-editor-container .token.boolean { color: ${theme.dracula.purple}; }
-        .code-editor-container .token.punctuation { color: ${theme.colors.text}; }
-        .code-editor-container textarea { outline: none !important; caret-color: ${theme.colors.text}; }
-        .code-editor-container textarea::placeholder { color: ${theme.colors.textMuted}; }
-      `}</style>
-      <div className="code-editor-container" style={{ height: '100%' }}>
-        <Editor
-          value={value || ''}
-          onValueChange={handleChange}
-          highlight={highlight}
-          placeholder={placeholder}
-          padding={12}
-          tabSize={4}
-          insertSpaces={true}
-          style={{
-            fontFamily: "'Consolas', 'Monaco', 'Fira Code', monospace",
-            fontSize: 13,
-            lineHeight: 1.5,
-            backgroundColor: theme.colors.backgroundAlt,
-            color: theme.colors.text,
-            minHeight: '100%',
-            height: '100%',
-            overflow: 'auto'
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default CodeEditor;
+import React from 'react';
+import Editor from 'react-simple-code-editor';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-markdown';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  language?: string;
+  placeholder?: string;
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  language = 'python',
+  placeholder
+}) => {
+  const theme = useAppTheme();
+
+  const handleChange = (newValue: string) => {
+    console.log('[CodeEditor] Value changed, length:', newValue.length);
+    onChange(newValue);
+  };
+
+  const highlight = (code: string) => {
+    const grammar = Prism.languages[language] || Prism.languages.python;
+    return Prism.highlight(code, grammar, language);
+  };
+
+  return (
+    <div style={{
+      height: '100%',
+      borderRadius: theme.borderRadius.md,
+      overflow: 'hidden',
+      border: `1px solid ${theme.colors.border}`
+    }}>
+      <style>{`
+        .code-editor-container .token.comment { color: ${theme.dracula.comment}; }
+        .code-editor-container .token.string { color: ${theme.dracula.yellow}; }
+        .code-editor-container .token.keyword { color: ${theme.dracula.pink}; }
+        .code-editor-container .token.function { color: ${theme.dracula.green}; }
+        .code-editor-container .token.number { color: ${theme.dracula.purple}; }
+        .code-editor-container .token.operator { color: ${theme.dracula.pink}; }
+        .code-editor-container .token.class-name { color: ${theme.dracula.cyan}; }
+        .code-editor-container .token.builtin { color: ${theme.dracula.cyan}; }
+        .code-editor-container .token.boolean { color: ${theme.dracula.purple}; }
+        .code-editor-container .token.punctuation { color: ${theme.colors.text}; }
+        .code-editor-container textarea { outline: none !important; caret-color: ${theme.colors.text}; }
+        .code-editor-container textarea::placeholder { color: ${theme.colors.textMuted}; }
+      `}</style>
+      <div className="code-editor-container" style={{ height: '100%' }}>
+        <Editor
+          value={value || ''}
+          onValueChange={handleChange}
+          highlight={highlight}
+          placeholder={placeholder}
+          padding={12}
+          tabSize={4}
+          insertSpaces={true}
+          style={{
+            fontFamily: "'Consolas', 'Monaco', 'Fira Code', monospace",
+            fontSize: 13,
+            lineHeight: 1.5,
+            backgroundColor: theme.colors.backgroundAlt,
+            color: theme.colors.text,
+            minHeight: '100%',
+            height: '100%',
+            overflow: 'auto'
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CodeEditor;