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

package/src/components/panels/logs/index.module.css

@@ -0,0 +1,212 @@
+/* ---- Toolbar ---------------------------------------------------------- */
+
+.toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.searchBar {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.searchField {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+}
+
+.searchIcon {
+    flex: none;
+    opacity: 0.6;
+}
+
+.searchInput {
+    flex: 1;
+}
+
+.toolbarActions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.actionActive {
+    color: var(--vscode-inputOption-activeForeground, #ffffff);
+    background-color: var(--vscode-inputOption-activeBackground, rgba(53, 116, 240, 0.25));
+    outline: 1px solid var(--vscode-inputOption-activeBorder, transparent);
+}
+
+/* ---- Level filter chips ---------------------------------------------- */
+
+.filters {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0 2px;
+}
+
+.levelChip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 9px;
+    border: 1px solid transparent;
+    border-radius: 11px;
+    background-color: color-mix(in srgb, var(--chip-color) 18%, transparent);
+    color: var(--chip-color);
+    font-size: 0.72rem;
+    line-height: 1.5;
+    cursor: pointer;
+    user-select: none;
+    transition: opacity 0.1s, background-color 0.1s;
+}
+
+.levelChip:hover {
+    background-color: color-mix(in srgb, var(--chip-color) 28%, transparent);
+}
+
+.levelChip:focus-visible {
+    outline: 1px solid var(--vscode-focusBorder);
+    outline-offset: 1px;
+}
+
+.levelOff {
+    background-color: transparent;
+    color: var(--vscode-descriptionForeground, #9d9d9d);
+    opacity: 0.6;
+}
+
+.levelChipIcon {
+    display: inline-flex;
+    width: 12px;
+    height: 12px;
+}
+
+.levelChipIcon svg {
+    width: 12px;
+    height: 12px;
+}
+
+.levelChipLabel {
+    text-transform: capitalize;
+}
+
+.levelChipCount {
+    font-variant-numeric: tabular-nums;
+    opacity: 0.8;
+    font-size: 0.9em;
+}
+
+.levelOff .levelChipCount {
+    opacity: 0.6;
+}
+
+.logCount {
+    margin-left: auto;
+    padding-right: 2px;
+    font-size: 0.72rem;
+    line-height: 1;
+    align-self: center;
+    color: var(--vscode-descriptionForeground, #9d9d9d);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ---- Log list --------------------------------------------------------- */
+
+.logsContainer {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    /* full-bleed list: cancel the BasePanel padding so rows span edge-to-edge */
+    margin: 0 calc(-1 * var(--component-spacing-xs, 0.25rem));
+}
+
+.emptyState {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 64px;
+    color: var(--vscode-descriptionForeground, #9d9d9d);
+    font-size: 0.85rem;
+}
+
+.logsList {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--vscode-editor-font-family, monospace);
+    font-size: var(--vscode-editor-font-size, 12px);
+    line-height: 18px;
+}
+
+.row {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 1px 8px;
+    border-left: 2px solid transparent;
+    user-select: text;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.row:hover {
+    background-color: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06));
+}
+
+.row[data-severity='warning'] {
+    border-left-color: color-mix(in srgb, var(--vscode-editorWarning-foreground, #cca700) 60%, transparent);
+}
+
+.row[data-severity='error'] {
+    border-left-color: var(--vscode-editorError-foreground, #f48771);
+    background-color: color-mix(in srgb, var(--vscode-editorError-foreground, #f48771) 8%, transparent);
+}
+
+.rowIcon {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    width: 14px;
+    height: 14px;
+    align-self: center;
+}
+
+.rowIcon svg {
+    width: 14px;
+    height: 14px;
+}
+
+.rowTime {
+    flex: none;
+    color: var(--vscode-descriptionForeground, #9d9d9d);
+    opacity: 0.85;
+    font-variant-numeric: tabular-nums;
+}
+
+.rowMessage {
+    flex: 1;
+    min-width: 0;
+    color: var(--vscode-foreground);
+}
+
+.row[data-severity='error'] .rowMessage {
+    color: var(--vscode-editorError-foreground, #f48771);
+}
+
+.row[data-severity='verbose'] .rowMessage {
+    color: var(--vscode-descriptionForeground, #9d9d9d);
+}
+
+.highlight {
+    background-color: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
+    color: inherit;
+    border-radius: 2px;
+}

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 { useSystem } 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(--vscode-terminal-ansiCyan, #29b8db)',
+  info: 'var(--vscode-charts-blue, #3794ff)',
+  warning: 'var(--vscode-editorWarning-foreground, #cca700)',
+  error: 'var(--vscode-editorError-foreground, #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 = useSystem();
+  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.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,64 @@
+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
+                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>
+  );
+};