@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/components/panels/logs/index.tsx

@@ -0,0 +1,288 @@
+import React, { useCallback, useEffect, useRef, useMemo } from 'react';
+import {
+  Search,
+  Xmark,
+  Download,
+  TrashSolid,
+  WarningCircle,
+  InfoCircle,
+  InfoCircleSolid,
+  WarningCircleSolid,
+  ArrowDownCircle,
+  ArrowDownCircleSolid,
+  Clock,
+  ClockSolid
+} from 'iconoir-react';
+import { VscodeTextfield } from '@vscode-elements/react-elements';
+import { useActiveGraph } from '@/system/provider';
+import { useStore } from 'zustand';
+import clsx from 'clsx';
+import { BasePanel } from '../base';
+import type { LogSeverity } from '@kiberon-labs/behave-graph';
+import styles from './index.module.css';
+import { Icon } from '@/components/primitives/icon';
+
+const LEVELS: readonly LogSeverity[] = ['verbose', 'info', 'warning', 'error'];
+
+const LOG_COLORS: Record<LogSeverity, string> = {
+  verbose: 'var(--ds-terminal-cyan, #29b8db)',
+  info: 'var(--ds-chart-blue, #3794ff)',
+  warning: 'var(--ds-warning, #cca700)',
+  error: 'var(--ds-error, #f48771)'
+};
+
+const IconType: Record<LogSeverity, React.ReactNode> = {
+  verbose: <InfoCircleSolid />,
+  info: <InfoCircle />,
+  warning: <WarningCircle />,
+  error: <WarningCircleSolid />
+};
+
+const pad = (value: number, length = 2) => String(value).padStart(length, '0');
+
+/** VS Code style log timestamp: 24h clock with milliseconds. */
+const formatTimestamp = (date: Date) =>
+  `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
+    date.getSeconds()
+  )}.${pad(date.getMilliseconds(), 3)}`;
+
+const escapeRegExp = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/** Splits a message into plain/highlighted segments for the active search term. */
+const renderMessage = (message: string, term: string): React.ReactNode => {
+  if (!term) return message;
+  const regex = new RegExp(`(${escapeRegExp(term)})`, 'ig');
+  const parts = message.split(regex);
+  return parts.map((part, index) =>
+    part.toLowerCase() === term.toLowerCase() ? (
+      <mark key={index} className={styles.highlight}>
+        {part}
+      </mark>
+    ) : (
+      <React.Fragment key={index}>{part}</React.Fragment>
+    )
+  );
+};
+
+export function LogsPanel() {
+  const system = useActiveGraph()!;
+  const logs = useStore(system.logsStore, (x) => x.logs);
+  const clearLogs = useStore(system.logsStore, (x) => x.clear);
+
+  const [searchText, setSearchText] = React.useState('');
+  const [currentSearchTerm, setCurrentSearchTerm] = React.useState('');
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const [showTimestamps, setShowTimestamps] = React.useState(true);
+  const [selectedLevels, setSelectedLevels] = React.useState<Set<LogSeverity>>(
+    new Set(LEVELS)
+  );
+
+  const messagesEndRef = useRef<null | HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (autoScroll) {
+      messagesEndRef.current?.scrollIntoView({ block: 'end' });
+    }
+  }, [logs, autoScroll]);
+
+  const onSearchChange = useCallback((e: any) => {
+    const next = e.target.value as string;
+    setSearchText(next);
+    // live-filter as the user types, like the VS Code filter box
+    setCurrentSearchTerm(next);
+  }, []);
+
+  const clearSearch = useCallback(() => {
+    setSearchText('');
+    setCurrentSearchTerm('');
+  }, []);
+
+  const toggleLevel = useCallback((level: LogSeverity) => {
+    setSelectedLevels((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(level)) {
+        newSet.delete(level);
+      } else {
+        newSet.add(level);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const filteredLogs = useMemo(() => {
+    let result = logs.filter((log) => selectedLevels.has(log.type));
+
+    if (currentSearchTerm) {
+      const lowerCaseSearchText = currentSearchTerm.toLowerCase();
+      result = result.filter((log) => {
+        const logDataString = log.data.message.toLowerCase();
+        const logTypeString = log.type.toLowerCase();
+        return (
+          logDataString.includes(lowerCaseSearchText) ||
+          logTypeString.includes(lowerCaseSearchText)
+        );
+      });
+    }
+
+    return result;
+  }, [logs, currentSearchTerm, selectedLevels]);
+
+  const levelCounts = useMemo(() => {
+    const counts: Record<LogSeverity, number> = {
+      verbose: 0,
+      info: 0,
+      warning: 0,
+      error: 0
+    };
+    for (const log of logs) counts[log.type]++;
+    return counts;
+  }, [logs]);
+
+  const exportLogs = useCallback(() => {
+    const logData = filteredLogs.map((log) => ({
+      timestamp: log.time.toISOString(),
+      level: log.type,
+      message: log.data.message
+    }));
+    const blob = new Blob([JSON.stringify(logData, null, 2)], {
+      type: 'application/json'
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `logs-${new Date().toISOString()}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [filteredLogs]);
+
+  const copyToClipboard = useCallback(
+    (text: string) => {
+      navigator.clipboard.writeText(text).then(() => {
+        system.editor.notifications.success('Copied to clipboard');
+      });
+    },
+    [system]
+  );
+
+  return (
+    <BasePanel>
+      {/* Toolbar */}
+      <div className={styles.toolbar}>
+        <div className={styles.searchBar}>
+          <div className={styles.searchField}>
+            <Search className={styles.searchIcon} width={14} height={14} />
+            <VscodeTextfield
+              className={styles.searchInput}
+              value={searchText}
+              placeholder="Filter logs"
+              onChange={onSearchChange}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') clearSearch();
+              }}
+            />
+            {searchText && (
+              <Icon title="Clear filter" onClick={clearSearch}>
+                <Xmark width={14} height={14} />
+              </Icon>
+            )}
+          </div>
+
+          <div className={styles.toolbarActions}>
+            <Icon
+              title={autoScroll ? 'Auto-scroll on' : 'Auto-scroll off'}
+              className={clsx(autoScroll && styles.actionActive)}
+              onClick={() => setAutoScroll((v) => !v)}
+            >
+              {autoScroll ? <ArrowDownCircleSolid /> : <ArrowDownCircle />}
+            </Icon>
+            <Icon
+              title={showTimestamps ? 'Hide timestamps' : 'Show timestamps'}
+              className={clsx(showTimestamps && styles.actionActive)}
+              onClick={() => setShowTimestamps((v) => !v)}
+            >
+              {showTimestamps ? <ClockSolid /> : <Clock />}
+            </Icon>
+            <Icon title="Export logs" onClick={exportLogs}>
+              <Download />
+            </Icon>
+            <Icon title="Clear logs" onClick={clearLogs}>
+              <TrashSolid />
+            </Icon>
+          </div>
+        </div>
+
+        {/* Level filter toggles */}
+        <div className={styles.filters}>
+          {LEVELS.map((level) => {
+            const active = selectedLevels.has(level);
+            return (
+              <button
+                type="button"
+                key={level}
+                className={clsx(styles.levelChip, !active && styles.levelOff)}
+                style={{ ['--chip-color' as string]: LOG_COLORS[level] }}
+                onClick={() => toggleLevel(level)}
+                aria-pressed={active}
+                title={`${active ? 'Hide' : 'Show'} ${level} logs`}
+              >
+                <span className={styles.levelChipIcon}>{IconType[level]}</span>
+                <span className={styles.levelChipLabel}>{level}</span>
+                <span className={styles.levelChipCount}>
+                  {levelCounts[level]}
+                </span>
+              </button>
+            );
+          })}
+          <span className={styles.logCount}>
+            {filteredLogs.length === logs.length
+              ? `${logs.length} logs`
+              : `${filteredLogs.length} / ${logs.length} logs`}
+          </span>
+        </div>
+      </div>
+
+      {/* Log list */}
+      <div className={styles.logsContainer}>
+        {filteredLogs.length === 0 ? (
+          <div className={styles.emptyState}>
+            {logs.length === 0
+              ? 'No logs to display.'
+              : 'No logs match the current filter.'}
+          </div>
+        ) : (
+          <div className={styles.logsList} role="log" aria-live="polite">
+            {filteredLogs.map((log, index) => (
+              <div
+                key={index}
+                className={styles.row}
+                data-severity={log.type}
+                onDoubleClick={() => copyToClipboard(log.data.message)}
+                title="Double-click to copy"
+              >
+                <span
+                  className={styles.rowIcon}
+                  style={{ color: LOG_COLORS[log.type] }}
+                  aria-label={log.type}
+                >
+                  {IconType[log.type]}
+                </span>
+                {showTimestamps && (
+                  <time className={styles.rowTime}>
+                    {formatTimestamp(log.time)}
+                  </time>
+                )}
+                <span className={styles.rowMessage}>
+                  {renderMessage(log.data.message, currentSearchTerm)}
+                </span>
+              </div>
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+    </BasePanel>
+  );
+}

package/src/components/panels/nodeInputs/InputControl.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  VscodeOption,
+  VscodeSingleSelect
+} from '@vscode-elements/react-elements';
+import type { ControlComponent } from '@/store/controls';
+import styles from './index.module.css';
+import type { ChoiceJSON } from '@kiberon-labs/behave-graph';
+
+interface InputControlProps {
+  input: {
+    name: string;
+    valueType: string;
+    defaultValue?: any;
+    choices?: ChoiceJSON;
+    value: any;
+    connected: boolean;
+  };
+  ControlComponent: ControlComponent;
+  onValueChange: (inputName: string, newValue: any) => void;
+}
+
+export const InputControl: React.FC<InputControlProps> = ({
+  input,
+  ControlComponent,
+  onValueChange
+}) => {
+  return (
+    <div className={styles.inputRow}>
+      <div className={styles.inputMeta}>
+        <div className={styles.inputName} title={input.valueType}>
+          {input.name}
+        </div>
+        <div className={styles.inputSubtext}>
+          {input.connected ? 'Connected' : input.valueType}
+        </div>
+      </div>
+
+      <div>
+        {input.connected ? (
+          <div className={styles.connectedMessage}>Socket is connected</div>
+        ) : input.choices && input.choices.length > 0 ? (
+          <VscodeSingleSelect
+            value={input.value ?? ''}
+            onChange={(e: any) => onValueChange(input.name, e?.target?.value)}
+          >
+            {input.choices.map((choice) => (
+              <VscodeOption key={choice.text} value={choice.value}>
+                {choice.text}
+              </VscodeOption>
+            ))}
+          </VscodeSingleSelect>
+        ) : (
+          <ControlComponent
+            value={input.value}
+            onChange={(newValue) => onValueChange(input.name, newValue)}
+            valueType={input.valueType}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/panels/nodeInputs/InputsGroup.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { InputControl } from './InputControl';
+import type { ControlComponent } from '@/store/controls';
+import styles from './index.module.css';
+import { EyeClosed, EyeSolid } from 'iconoir-react';
+import { Icon } from '@/components/primitives/icon';
+import type { ChoiceJSON } from '@kiberon-labs/behave-graph';
+
+export interface InputItem {
+  name: string;
+  valueType: string;
+  defaultValue?: unknown;
+  choices?: ChoiceJSON;
+  value: unknown;
+  connected: boolean;
+}
+
+interface InputsGroupProps {
+  inputs: InputItem[];
+  controls: Record<string, ControlComponent>;
+  defaultControl: ControlComponent;
+  onValueChange: (inputName: string, newValue: unknown) => void;
+  hiddenInputs?: Record<string, boolean>;
+  onToggleInput?: (inputName: string) => void;
+}
+
+export const InputsGroup: React.FC<InputsGroupProps> = ({
+  inputs,
+  controls,
+  defaultControl,
+  onValueChange,
+  hiddenInputs = {},
+  onToggleInput
+}) => {
+  if (inputs.length === 0) return null;
+  return (
+    <div className={styles.stackColPadded}>
+      {inputs.map((input) => {
+        const Control = controls[input.valueType] ?? defaultControl;
+        const isHidden = hiddenInputs[input.name] ?? false;
+
+        return (
+          <div key={input.name} className={styles.inputWithToggle}>
+            {onToggleInput && (
+              <Icon
+                className={styles.inputToggle}
+                onClick={() => onToggleInput(input.name)}
+                title={isHidden ? 'Show input on node' : 'Hide input on node'}
+              >
+                {isHidden ? <EyeClosed /> : <EyeSolid />}
+              </Icon>
+            )}
+            <div className={styles.inputControlWrapper}>
+              <InputControl
+                input={input}
+                ControlComponent={Control}
+                onValueChange={onValueChange}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/panels/nodeInputs/MultipleNodesView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { VscodeDivider } from '@vscode-elements/react-elements';
+import type { Node } from 'reactflow';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import styles from './index.module.css';
+
+interface MultipleNodesViewProps {
+  selectedNodes: Node[];
+  allSpecsJson: NodeSpecJSON[];
+}
+
+export const MultipleNodesView: React.FC<MultipleNodesViewProps> = ({
+  selectedNodes,
+  allSpecsJson
+}) => {
+  return (
+    <div className={styles.panel}>
+      <div className={styles.sectionTitle}>
+        Multiple Nodes Selected ({selectedNodes.length})
+      </div>
+      <VscodeDivider />
+      <div className={styles.listGap1}>
+        {selectedNodes.map((node) => {
+          const spec = allSpecsJson.find((s) => s.type === node.type);
+          return (
+            <div key={node.id} className={styles.nodeCard}>
+              <div className={styles.nodeCardTitle}>
+                {spec?.label || node.type}
+              </div>
+              <div className={styles.nodeCardMeta}>ID: {node.id}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/panels/nodeInputs/NodeSettings.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { VscodeDivider, VscodeTextarea } from '@vscode-elements/react-elements';
+import { description } from '@/annotations';
+import type { IBehaveNode } from '@/types/nodes.js';
+import styles from './index.module.css';
+
+interface NodeSettingsProps {
+  selectedNode: IBehaveNode;
+  onSave: (annotationKey: string, value: string) => void;
+}
+
+export const NodeSettings: React.FC<NodeSettingsProps> = ({
+  selectedNode,
+  onSave
+}) => {
+  const annotations = selectedNode.data?.annotations;
+  const currentDescription = annotations?.[description] ?? '';
+  const [descriptionDraft, setDescriptionDraft] = useState(currentDescription);
+
+  useEffect(() => {
+    setDescriptionDraft(currentDescription);
+  }, [currentDescription]);
+
+  const handleSaveDescription = (rawDescription: string) => {
+    onSave(description, rawDescription);
+  };
+
+  return (
+    <div className={styles.stackGap2}>
+      <div className={styles.stackGap2Padded}>
+        <div className={styles.settingsRow}>
+          <div>Type</div>
+          <div>{selectedNode.data.type}</div>
+        </div>
+        <div className={styles.settingsRow}>
+          <div>ID</div>
+          <div>{selectedNode.id}</div>
+        </div>
+
+        <VscodeDivider />
+
+        <div className={styles.descriptionSection}>
+          <div className={styles.subTitle}>Description</div>
+          <VscodeTextarea
+            placeholder="No description provided."
+            className={styles.descriptionTextarea}
+            value={descriptionDraft}
+            onInput={(e: any) => setDescriptionDraft(e?.target?.value ?? '')}
+            onBlur={() => {
+              handleSaveDescription(descriptionDraft);
+            }}
+            onKeyDown={(e: any) => {
+              if (e?.key === 'Escape') {
+                e?.preventDefault?.();
+                setDescriptionDraft('');
+              }
+            }}
+            rows={4}
+          />
+        </div>
+
+        <VscodeDivider />
+
+        <div className={styles.annotationsSection}>
+          <div className={styles.subTitle}>Annotations</div>
+          {annotations == null ? (
+            <div className={styles.annotationsEmpty}>No annotations.</div>
+          ) : typeof annotations === 'string' ||
+            typeof annotations === 'number' ||
+            typeof annotations === 'boolean' ? (
+            <div className={styles.annotationsValue}>{String(annotations)}</div>
+          ) : Array.isArray(annotations) &&
+            annotations.every(
+              (x) => typeof x === 'string' || typeof x === 'number'
+            ) ? (
+            <ul className={styles.annotationsList}>
+              {annotations.map((x, i) => (
+                <li key={i} className={styles.annotationsListItem}>
+                  {String(x)}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <pre className={styles.annotationsPre}>
+              {JSON.stringify(annotations, null, 2)}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/panels/nodeInputs/NodeTitleEditor.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { VscodeTextfield } from '@vscode-elements/react-elements';
+import { InfoCircle } from 'iconoir-react';
+import { annotatedTitle } from '@/annotations';
+import type { IBehaveNode } from '@/types/nodes.js';
+import styles from './index.module.css';
+
+interface NodeTitleEditorProps {
+  selectedNode: IBehaveNode;
+  nodeLabel: string;
+  onSave: (annotationKey: string, value: string) => void;
+  nodeType?: string;
+  nodeIcon?: React.ReactNode;
+  hasDocumentation?: boolean;
+  onShowDocumentation?: (nodeType: string) => void;
+}
+
+export const NodeTitleEditor: React.FC<NodeTitleEditorProps> = ({
+  selectedNode,
+  nodeLabel,
+  onSave,
+  nodeType,
+  nodeIcon,
+  hasDocumentation,
+  onShowDocumentation
+}) => {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState('');
+
+  const annotations = (selectedNode as any)?.data?.annotations;
+
+  const annotationTitle = React.useMemo(() => {
+    if (
+      !annotations ||
+      typeof annotations !== 'object' ||
+      Array.isArray(annotations)
+    )
+      return undefined;
+    const title = annotations?.[annotatedTitle];
+    return typeof title === 'string' ? title : undefined;
+  }, [annotations]);
+
+  const displayedTitle = React.useMemo(() => {
+    const trimmed = annotationTitle?.trim();
+    return trimmed ? trimmed : nodeLabel;
+  }, [annotationTitle, nodeLabel]);
+
+  useEffect(() => {
+    setIsEditingTitle(false);
+    setTitleDraft('');
+  }, [selectedNode.id]);
+
+  const handleSaveTitle = (rawTitle: string) => {
+    onSave(annotatedTitle, rawTitle);
+    setIsEditingTitle(false);
+  };
+
+  const handleShowDocs = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (onShowDocumentation && nodeType) {
+        onShowDocumentation(nodeType);
+      }
+    },
+    [onShowDocumentation, nodeType]
+  );
+
+  if (!isEditingTitle) {
+    return (
+      <>
+        <div className={styles.panelTitleContainer}>
+          {nodeIcon && <div className={styles.nodeTitleIcon}>{nodeIcon}</div>}
+          <div
+            className={styles.panelTitle}
+            onDoubleClick={() => {
+              setTitleDraft(displayedTitle);
+              setIsEditingTitle(true);
+            }}
+            title="Double-click to rename"
+          >
+            {displayedTitle}
+          </div>
+          {hasDocumentation && onShowDocumentation && (
+            <button
+              className={styles.infoButton}
+              onClick={handleShowDocs}
+              title="Show documentation"
+            >
+              <InfoCircle />
+            </button>
+          )}
+        </div>
+        <div className={styles.panelId}>#{selectedNode.id}</div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.panelTitleEdit}>
+        <VscodeTextfield
+          className={styles.panelTitleTextfield}
+          value={titleDraft}
+          onInput={(e: any) => setTitleDraft(e?.target?.value ?? '')}
+          onBlur={() => {
+            handleSaveTitle(titleDraft);
+          }}
+          onKeyDown={(e: any) => {
+            if (e?.key === 'Enter') {
+              e?.preventDefault?.();
+              handleSaveTitle(titleDraft);
+            }
+
+            if (e?.key === 'Escape') {
+              e?.preventDefault?.();
+              setIsEditingTitle(false);
+              setTitleDraft('');
+            }
+          }}
+        />
+      </div>
+      <div className={styles.panelId}>{selectedNode.id}</div>
+    </>
+  );
+};