added TimerNode and other additional code and docs updates

Author: code-forge-temple

client/src/components/BaseDialog/BaseDialog.tsx

@@ -41,7 +41,7 @@ export function BaseDialog ({
                 <DialogTitle style={{cursor: 'move'}} id="draggable-dialog-title">
                     {title}
                 </DialogTitle>
-                <DialogContent sx={{p: 0, m: 2}}>
+                <DialogContent sx={{pt: '16px !important', pb: 0, pl: 0, pr: 0, m: 2}}>
                     {children}
                 </DialogContent>
                 <DialogActions>

client/src/components/DebouncedTextField/DebouncedTextField.tsx

@@ -0,0 +1,45 @@
+/************************************************************************
+ *    Copyright (C) 2025 Code Forge Temple                              *
+ *    This file is part of agentic-signal project                       *
+ *    See the LICENSE file in the project root for license details.     *
+ ************************************************************************/
+
+import {TextField, TextFieldProps} from '@mui/material';
+import {useDebouncedState} from '../../hooks/useDebouncedState';
+import {useEffect} from 'react';
+
+type DebouncedTextFieldProps = Omit<TextFieldProps, 'onChange'> & {
+    value: string | number;
+    onChange: (value: string) => void;
+    delay?: number;
+};
+
+export function DebouncedTextField ({
+    value,
+    onChange,
+    delay = 300,
+    type = 'text',
+    ...textFieldProps
+}: DebouncedTextFieldProps) {
+    const [debouncedValue, setDebouncedValue] = useDebouncedState({
+        callback: onChange,
+        delay,
+        initialValue: String(value)
+    });
+
+    useEffect(() => {
+        if (String(value) !== debouncedValue) {
+            setDebouncedValue(String(value));
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
+    return (
+        <TextField
+            {...textFieldProps}
+            type={type}
+            value={debouncedValue}
+            onChange={(e) => setDebouncedValue(e.target.value)}
+        />
+    );
+}

client/src/components/DebouncedTextField/index.ts

@@ -0,0 +1 @@
+export * from './DebouncedTextField';

client/src/components/Dock/components/ActionsDock/components/Settings/Settings.tsx

@@ -7,23 +7,15 @@
 import {useState, useEffect} from 'react';
 import './style.scss';
 import {useSettings} from '../../../../../../hooks/useSettings';
-import {useDebouncedState} from '../../../../../../hooks/useDebouncedState';
-import {TextField, IconButton, InputAdornment, Box, LinearProgress, List, ListItem, ListItemText} from '@mui/material';
+import {IconButton, InputAdornment, Box, LinearProgress, List, ListItem, ListItemText} from '@mui/material';
 import {Plus, Trash} from 'iconoir-react';
 import {OllamaService} from '../../../../../../services/ollamaService';
+import {DebouncedTextField} from '../../../../../DebouncedTextField';
 
 export const Settings = () => {
     const {settings, setSetting} = useSettings();
     const [hoveredOllamaListItemIdx, setHoveredOllamaListItemIdx] = useState<number | null>(null);
 
-    const [debouncedOllamaHost, setDebouncedOllamaHost] = useDebouncedState({
-        callback: (value: string) => {
-            setSetting("ollamaHost", value);
-        },
-        delay: 300,
-        initialValue: settings.ollamaHost
-    });
-
     const [modelInput, setModelInput] = useState('');
     const [isPulling, setIsPulling] = useState(false);
     const [progress, setProgress] = useState<number | null>(null);
@@ -97,24 +89,24 @@ export const Settings = () => {
 
     return (
         <>
-            <TextField
+            <DebouncedTextField
                 label="Ollama Host"
                 variant="outlined"
                 fullWidth
-                value={debouncedOllamaHost}
-                onChange={(e) => setDebouncedOllamaHost(e.target.value)}
+                value={settings.ollamaHost}
+                onChange={(value) => setSetting("ollamaHost", value)}
                 sx={{mt: 2}}
             />
             <Box sx={{display: 'flex', alignItems: 'center', mt: 2}}>
-                <TextField
+                <DebouncedTextField
                     label="Add Ollama Model"
                     variant="outlined"
                     value={
                         isPulling && progress !== null
                             ? `Downloading ${modelInput}   ${progress}%`
                             : modelInput
                     }
-                    onChange={e => setModelInput(e.target.value)}
+                    onChange={value => setModelInput(value)}
                     disabled={isPulling || !isOllamaHostValid}
                     fullWidth
                     helperText={!isOllamaHostValid ? "Invalid Ollama host - cannot add models" : ""}

client/src/components/FieldsetGroup/FieldsetGroup.tsx

@@ -0,0 +1,46 @@
+/************************************************************************
+ *    Copyright (C) 2025 Code Forge Temple                              *
+ *    This file is part of agentic-signal project                       *
+ *    See the LICENSE file in the project root for license details.     *
+ ************************************************************************/
+
+import {ReactNode} from 'react';
+import {FormControl, FormLabel} from "@mui/material";
+
+
+type FieldsetGroupProps = {
+    children: ReactNode;
+    title: string;
+};
+
+export const FieldsetGroup = ({children, title}: FieldsetGroupProps) => {
+    return (
+        <FormControl component="fieldset"
+            sx={{
+                width: '100%',
+                boxSizing: 'border-box',
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 2,
+                pt: 2, pb: 0, pl: 2, pr: 2,
+                mb: 2,
+            }}
+        >
+            <FormLabel
+                component="legend"
+                sx={{
+                    color: 'text.secondary',
+                    fontSize: 'small',
+                    padding: '0 7px 0 7px',
+                    margin: '0 -7px 0 -7px !important',
+                    fontWeight: 400,
+                    lineHeight: 1.4375,
+                    mb: 1
+                }}
+            >
+                {title}
+            </FormLabel>
+            {children}
+        </FormControl>
+    );
+};

client/src/components/FieldsetGroup/index.ts

@@ -0,0 +1 @@
+export * from './FieldsetGroup';

client/src/components/nodes/BaseNode/BaseNode.tsx

@@ -15,7 +15,7 @@ const DEFAULT_PORT_COLOR = "#ffc107";
 
 const PORT_IDS = {
     input: "left-target",
-    output: "right-source"
+    output: "right-source",
 };
 
 type OnClick = (() => void) | {callback: () => void; highlight: boolean};
@@ -24,13 +24,14 @@ type BaseNodeProps = {
     id: string;
     nodeIcon: React.ReactElement<{className?: string}>;
     title: string;
+    run?: OnClick;
     running?: boolean;
+    stoppable?: boolean;
     ports: {
         input?: boolean | {isValidConnection?: IsValidConnection, color?: string};
         output?: boolean | {isValidConnection?: IsValidConnection, color?: string};
     };
     settings?: OnClick;
-    run?: OnClick;
     logs?: OnClick;
     output?: OnClick;
     extraPorts?: React.ReactNode;
@@ -46,7 +47,7 @@ function buttonsPropsFactory (buttonProp: OnClick): React.SVGProps<SVGSVGElement
     }
 }
 
-export const BaseNode = ({id, nodeIcon, title, running, ports, settings, run, logs, output, extraPorts}: BaseNodeProps) => {
+export const BaseNode = ({id, nodeIcon, title, running, ports, settings, run, stoppable, logs, output, extraPorts}: BaseNodeProps) => {
     const {setEdges} = useReactFlow();
 
     useEffect(() => {
@@ -106,7 +107,8 @@ export const BaseNode = ({id, nodeIcon, title, running, ports, settings, run, lo
                         <EyeSolid {...buttonsPropsFactory(output)} />
                     </Tooltip>
                 ) : null}
-                {run && running ? <PlaySolid width={20} height={20} className="highlight" /> : null}
+                {run && running && !stoppable ? <PlaySolid width={20} height={20} className="highlight" /> : null}
+                {run && running && stoppable ? <PlaySolid {...buttonsPropsFactory(run)} className="highlight" /> : null}
                 {run && !running ? (
                     <Tooltip title={"run"} placement="bottom" arrow enterDelay={1000}>
                         <Play {...buttonsPropsFactory(run)} />

client/src/components/nodes/DataSourceNode.tsx

@@ -15,6 +15,8 @@ import {BaseDialog} from "../BaseDialog";
 import {LogsDialog} from "../LogsDialog";
 import {TaskNodeIcons} from "../../constants";
 import {useDebouncedState} from "../../hooks/useDebouncedState";
+import {useTimerTrigger} from "../../hooks/useTimerTrigger";
+import {TimerTriggerPort} from "./TimerNode/TimerTriggerPort";
 
 const DATA_SOURCE_TYPES = {
     TEXT: "text",
@@ -31,7 +33,7 @@ export function DataSourceNode ({data, id, type}: NodeProps<AppNode>) {
     const [isRunning, setIsRunning] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [openLogs, setOpenLogs] = useState(false);
-    const {title, dataSource, onResultUpdate, onConfigChange} = data;
+    const {title, dataSource, input, onResultUpdate, onConfigChange} = data;
 
     const handleRun = useCallback(() => {
         setError(null);
@@ -55,6 +57,8 @@ export function DataSourceNode ({data, id, type}: NodeProps<AppNode>) {
         }, setIsRunning);
     }, [dataSource.type, dataSource.value, id, onResultUpdate]);
 
+    useTimerTrigger(input?.timerTrigger, handleRun);
+
     const [debouncedDataSource, setDebouncedDataSource] = useDebouncedState({
         callback: (value: string) => {
             onConfigChange(id, {dataSource: {...dataSource, value}});
@@ -71,6 +75,9 @@ export function DataSourceNode ({data, id, type}: NodeProps<AppNode>) {
                 ports={{
                     output: true
                 }}
+                extraPorts = {
+                    <TimerTriggerPort />
+                }
                 title={title}
                 run={handleRun}
                 running={isRunning}

client/src/components/nodes/GetDataNode.tsx

@@ -8,14 +8,16 @@ import {type NodeProps} from "@xyflow/react";
 import {useCallback, useState} from "react";
 import {AppNode, assertIsEnhancedNodeData, assertIsGetDataNodeData} from "../../types/workflow";
 import {BaseNode} from "./BaseNode";
-import {FormControl, InputLabel, MenuItem, Select, TextField} from "@mui/material";
+import {FormControl, InputLabel, MenuItem, Select} from "@mui/material";
 
 import {runTask} from "./BaseNode/utils";
 import {BaseDialog} from "../BaseDialog";
 import {LogsDialog} from "../LogsDialog";
 import {FetchDataType, TaskNodeIcons} from "../../constants";
 import {parseUrl} from "../../utils";
-import {useDebouncedState} from "../../hooks/useDebouncedState";
+import {DebouncedTextField} from "../DebouncedTextField";
+import {useTimerTrigger} from "../../hooks/useTimerTrigger";
+import {TimerTriggerPort} from "./TimerNode/TimerTriggerPort";
 
 const DATA_TYPE_LABEL = "Data Type";
 
@@ -27,24 +29,25 @@ export function GetDataNode ({data, id, type}: NodeProps<AppNode>) {
     const [error, setError] = useState<string | null>(null);
     const [openSettings, setOpenSettings] = useState(false);
     const [openLogs, setOpenLogs] = useState(false);
+    const {input, url, title, dataType, onResultUpdate, onConfigChange} = data;
 
     const handleRun = useCallback(() => {
         setError(null);
-        data.onResultUpdate(id);
+        onResultUpdate(id);
 
         runTask(async () => {
             try {
-                const url = parseUrl(data.url);
+                const parsedUrl = parseUrl(url);
 
-                const response = await fetch(url);
+                const response = await fetch(parsedUrl);
 
                 if (!response.ok) {
                     throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
 
                 let getData;
 
-                switch (data.dataType) {
+                switch (dataType) {
                     case "json":
                         getData = await response.json();
                         break;
@@ -61,25 +64,19 @@ export function GetDataNode ({data, id, type}: NodeProps<AppNode>) {
                         getData = await response.text();
                 }
 
-                data.onResultUpdate(id, getData);
+                onResultUpdate(id, getData);
             } catch (error) {
                 setError(`Error fetching data: ${error instanceof Error ? error.message : 'Unknown error'}`);
 
-                data.onResultUpdate(id);
+                onResultUpdate(id);
             }
 
         }, setIsRunning);
     }, [data, id]);
 
-    const [url, setUrl] = useDebouncedState({
-        callback: (value: string) => {
-            data.onConfigChange(id, {url: value});
-        },
-        delay: 300,
-        initialValue: data.url
-    });
+    useTimerTrigger(input?.timerTrigger, handleRun);
 
-    const hasMissingConfig = !data.url || !data.dataType;
+    const hasMissingConfig = !url || !dataType;
 
     return (
         <>
@@ -89,7 +86,10 @@ export function GetDataNode ({data, id, type}: NodeProps<AppNode>) {
                 ports={{
                     output: true
                 }}
-                title={data.title}
+                extraPorts = {
+                    <TimerTriggerPort />
+                }
+                title={title}
                 settings={{callback: () => setOpenSettings(true), highlight: hasMissingConfig}}
                 run={handleRun}
                 running={isRunning}
@@ -99,33 +99,33 @@ export function GetDataNode ({data, id, type}: NodeProps<AppNode>) {
             <LogsDialog
                 open={openLogs}
                 onClose={() => setOpenLogs(false)}
-                title={data.title}
+                title={title}
                 error={error}
             />
 
             <BaseDialog
                 open={openSettings}
                 onClose={() => setOpenSettings(false)}
-                title={data.title}
+                title={title}
             >
-                <TextField
+                <DebouncedTextField
                     label="URL"
                     variant="outlined"
                     fullWidth
                     value={url}
-                    onChange={(e) => {
-                        setUrl(e.target.value);
+                    onChange={(value) => {
+                        onConfigChange(id, {url: value});
                     }}
-                    sx={{mt: 2}}
+                    sx={{mb: 2}}
                 />
                 <FormControl fullWidth size="small" sx={{mb: 2, mt: 1}}>
                     <InputLabel id="data-type-label">{DATA_TYPE_LABEL}</InputLabel>
                     <Select
                         labelId="data-type-label"
                         label={DATA_TYPE_LABEL}
-                        value={data.dataType || ""}
+                        value={dataType || ""}
                         onChange={e => {
-                            data.onConfigChange(id, {dataType: e.target.value});
+                            onConfigChange(id, {dataType: e.target.value});
                         }}
                     >
                         <MenuItem value="" disabled>