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

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

@@ -0,0 +1,251 @@
+import { Fragment, useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeCheckbox,
+  VscodeDivider,
+  VscodeOption,
+  VscodeSingleSelect,
+  VscodeTextfield
+} from '@vscode-elements/react-elements';
+import { Undo } from 'iconoir-react';
+import { useSystem } from '@/system/provider';
+import type { SettingDescriptor, SettingsValues } from '@/store/settingsSchema';
+import styles from './styles.module.css';
+import { BasePanel } from '../base';
+import { SectionTitle } from '../common/SectionTitle';
+import { ConversionsSettings } from './ConversionsSettings';
+
+type RowProps = {
+  descriptor: SettingDescriptor;
+  value: unknown;
+  setValue: (value: unknown) => void;
+};
+
+/** The input control for a descriptor, chosen by its `type`. */
+const SettingControl = ({ descriptor, value, setValue }: RowProps) => {
+  switch (descriptor.type) {
+    case 'boolean':
+      return (
+        <VscodeCheckbox
+          checked={Boolean(value)}
+          onChange={(e: any) => setValue(Boolean(e?.target?.checked))}
+        />
+      );
+    case 'enum':
+      return (
+        <VscodeSingleSelect
+          value={String(value ?? '')}
+          onChange={(e: any) => {
+            const next = e?.target?.value as string | undefined;
+            if (next !== undefined) setValue(next);
+          }}
+        >
+          {descriptor.options.map((option) => (
+            <VscodeOption key={option.value} value={option.value}>
+              {option.label}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+      );
+    case 'number':
+      return (
+        <VscodeTextfield
+          type="number"
+          value={String(value ?? '')}
+          min={descriptor.min}
+          max={descriptor.max}
+          step={descriptor.step}
+          style={{ width: '100%' }}
+          onChange={(e: any) => {
+            const next = Number(e?.target?.value);
+            if (!Number.isNaN(next)) setValue(next);
+          }}
+        />
+      );
+    case 'string':
+      return (
+        <VscodeTextfield
+          value={String(value ?? '')}
+          placeholder={descriptor.placeholder}
+          style={{ width: '100%' }}
+          onChange={(e: any) => setValue(String(e?.target?.value ?? ''))}
+        />
+      );
+    case 'custom': {
+      const Render = descriptor.render;
+      return (
+        <Render value={value} setValue={setValue} descriptor={descriptor} />
+      );
+    }
+  }
+};
+
+const ResetButton = ({ onClick }: { onClick: () => void }) => (
+  <button
+    type="button"
+    className={styles.reset}
+    title="Reset to default"
+    aria-label="Reset to default"
+    onClick={onClick}
+  >
+    <Undo width={13} height={13} />
+  </button>
+);
+
+const Label = ({
+  descriptor,
+  modified
+}: {
+  descriptor: SettingDescriptor;
+  modified: boolean;
+}) => (
+  <span className={styles.label}>
+    {descriptor.title}
+    {modified && <span className={styles.modified} title="Modified" />}
+  </span>
+);
+
+/** A single auto-generated setting row. Booleans put the control inline with the
+ *  label (toggle layout); other types stack the control under the label. */
+const SettingRow = ({ descriptor, value, setValue }: RowProps) => {
+  const modified = descriptor.type !== 'custom' && value !== descriptor.default;
+  const reset = () => setValue(descriptor.default);
+
+  if (descriptor.type === 'custom') {
+    return (
+      <div className={styles.setting}>
+        {descriptor.title && (
+          <span className={styles.label}>{descriptor.title}</span>
+        )}
+        {descriptor.description && (
+          <span className={styles.description}>{descriptor.description}</span>
+        )}
+        <SettingControl
+          descriptor={descriptor}
+          value={value}
+          setValue={setValue}
+        />
+      </div>
+    );
+  }
+
+  if (descriptor.type === 'boolean') {
+    return (
+      <div className={`${styles.setting} ${styles.toggle}`}>
+        <SettingControl
+          descriptor={descriptor}
+          value={value}
+          setValue={setValue}
+        />
+        <div className={styles.body}>
+          <Label descriptor={descriptor} modified={modified} />
+          {descriptor.description && (
+            <span className={styles.description}>{descriptor.description}</span>
+          )}
+        </div>
+        {modified && <ResetButton onClick={reset} />}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.setting}>
+      <div className={styles.labelRow}>
+        <Label descriptor={descriptor} modified={modified} />
+        {modified && <ResetButton onClick={reset} />}
+      </div>
+      {descriptor.description && (
+        <span className={styles.description}>{descriptor.description}</span>
+      )}
+      <SettingControl
+        descriptor={descriptor}
+        value={value}
+        setValue={setValue}
+      />
+    </div>
+  );
+};
+
+/**
+ * Schema-driven Settings panel. Rows are auto-generated from the descriptor
+ * registry (`system.settingsSchema`) — built-in and plugin-contributed settings
+ * render through the same path — grouped by section, filterable, with reset.
+ */
+export const Settings = () => {
+  const system = useSystem();
+  const descriptors = useStore(system.settingsSchema, (s) => s.settings);
+  const sectionOrder = useStore(system.settingsSchema, (s) => s.sectionOrder);
+  const values = useStore(system.systemSettings) as SettingsValues & {
+    setSetting: (key: string, value: unknown) => void;
+  };
+  const [query, setQuery] = useState('');
+
+  const bySection = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const matches = (d: SettingDescriptor) =>
+      !q ||
+      [d.title, d.description, d.section, d.key].some(
+        (field) => typeof field === 'string' && field.toLowerCase().includes(q)
+      );
+    const visible = (d: SettingDescriptor) => (d.when ? d.when(values) : true);
+
+    const map = new Map<string, SettingDescriptor[]>();
+    for (const descriptor of descriptors) {
+      if (!matches(descriptor) || !visible(descriptor)) continue;
+      const rows = map.get(descriptor.section) ?? [];
+      rows.push(descriptor);
+      map.set(descriptor.section, rows);
+    }
+    for (const rows of map.values()) {
+      rows.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }
+    return map;
+  }, [descriptors, query, values]);
+
+  const visibleSections = sectionOrder.filter(
+    (section) => (bySection.get(section)?.length ?? 0) > 0
+  );
+
+  return (
+    <BasePanel>
+      <div className={styles.searchRow}>
+        <VscodeTextfield
+          value={query}
+          placeholder="Search settings"
+          style={{ width: '100%' }}
+          onChange={(e: any) => setQuery(String(e?.target?.value ?? ''))}
+        />
+      </div>
+
+      {visibleSections.length === 0 ? (
+        <div className={styles.empty}>No settings match “{query}”.</div>
+      ) : (
+        <div className={styles.list}>
+          {visibleSections.map((section, index) => (
+            <Fragment key={section}>
+              {index > 0 && <VscodeDivider className={styles.divider} />}
+              <SectionTitle>{section}</SectionTitle>
+              {bySection.get(section)!.map((descriptor) => (
+                <Fragment key={descriptor.key}>
+                  <SettingRow
+                    descriptor={descriptor}
+                    // Fall back to the descriptor default so plugin-registered
+                    // settings (whose value is not seeded into the settings
+                    // store until first changed) show their real initial state.
+                    value={values[descriptor.key] ?? descriptor.default}
+                    setValue={(next) => values.setSetting(descriptor.key, next)}
+                  />
+                  {/* The conversions editor is a bespoke built-in control shown
+                      under Auto-convert when it is enabled. */}
+                  {descriptor.key === 'autoConvert' && values.autoConvert ? (
+                    <ConversionsSettings />
+                  ) : null}
+                </Fragment>
+              ))}
+            </Fragment>
+          ))}
+        </div>
+      )}
+    </BasePanel>
+  );
+};

package/src/components/panels/systemSettings/styles.module.css

@@ -0,0 +1,138 @@
+/* Compact, VSCode-settings-like layout */
+
+.searchRow {
+    padding-bottom: var(--space-2, 0.5rem);
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Label + reset affordance on one line (non-toggle rows) */
+.labelRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+/* Small dot next to a label whose value differs from its default */
+.modified {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-left: 0.4rem;
+    border-radius: 50%;
+    background: var(--ds-focus-border, #0078d4);
+    vertical-align: middle;
+}
+
+/* Ghost icon button to restore a setting's default */
+.reset {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    padding: 0.15rem;
+    background: transparent;
+    border: none;
+    border-radius: var(--component-radii-sm, 4px);
+    color: var(--ds-fg-muted);
+    cursor: pointer;
+}
+
+.reset:hover {
+    background: var(--ds-toolbar-hover-bg, rgba(90, 93, 94, 0.31));
+    color: var(--ds-fg);
+}
+
+/* A single setting row */
+.setting {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    padding: var(--space-1, 0.25rem) 0;
+}
+
+/* Toggle settings put the control inline with the label */
+.toggle {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.toggle .body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    min-width: 0;
+}
+
+.label {
+    font-size: var(--fs-label, 0.8rem);
+    color: var(--ds-fg);
+    line-height: 1.3;
+}
+
+.description {
+    font-size: var(--fs-desc, 0.72rem);
+    line-height: 1.35;
+    color: var(--ds-fg-muted);
+}
+
+.divider {
+    margin: 0.25rem 0;
+}
+
+/* Conversions editor */
+.conversions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    margin-top: 0.35rem;
+    padding-left: 0.5rem;
+    border-left: 1px solid var(--ds-sash-border, var(--ds-border, #2b2b2b));
+}
+
+.conversionsLabel {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+}
+
+.empty {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    opacity: 0.8;
+}
+
+.rule {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+}
+
+.ruleText {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ruleNode {
+    opacity: 0.65;
+}
+
+/* Stack the add-rule inputs vertically so nothing overflows the panel */
+.addForm {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.addForm vscode-single-select,
+.addForm vscode-button {
+    width: 100%;
+}

package/src/components/panels/traces/GridLines.tsx

@@ -0,0 +1,38 @@
+import { memo } from 'react';
+import type { Tick } from './types';
+
+const LINE_STYLE_BASE: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: 1,
+  backgroundColor: 'var(--ds-panel-border)',
+  opacity: 0.3
+};
+
+type GridLinesProps = {
+  ticks: Tick[];
+  padding: number;
+};
+
+export const GridLines = memo(function GridLines({
+  ticks,
+  padding
+}: GridLinesProps) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: padding,
+        right: padding,
+        bottom: 0,
+        pointerEvents: 'none'
+      }}
+    >
+      {ticks.map(({ time, leftPct }) => (
+        <div key={time} style={{ ...LINE_STYLE_BASE, left: `${leftPct}%` }} />
+      ))}
+    </div>
+  );
+});

package/src/components/panels/traces/TimeGrid.tsx

@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import type { Tick } from './types';
+
+const TICK_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center'
+};
+
+const LABEL_STYLE: React.CSSProperties = {
+  fontSize: '10px',
+  color: 'var(--ds-fg-muted)',
+  padding: '2px 4px',
+  whiteSpace: 'nowrap'
+};
+
+type TimeGridProps = {
+  ticks: Tick[];
+  padding: number;
+};
+
+export const TimeGrid = memo(function TimeGrid({
+  ticks,
+  padding
+}: TimeGridProps) {
+  return (
+    <div
+      style={{
+        position: 'sticky',
+        top: 0,
+        height: 24,
+        background: 'var(--ds-editor-bg)',
+        borderBottom: '1px solid var(--ds-panel-border)',
+        zIndex: 10,
+        padding: `0 ${padding}px`
+      }}
+    >
+      {ticks.map(({ time, leftPct }) => (
+        <div key={time} style={{ ...TICK_STYLE, left: `${leftPct}%` }}>
+          <div style={LABEL_STYLE}>{time.toFixed(0)}ms</div>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/components/panels/traces/TraceLane.tsx

@@ -0,0 +1,62 @@
+import { memo } from 'react';
+import type { LaneData } from './types';
+import styles from './index.module.css';
+
+type TraceLaneProps = {
+  laneData: LaneData;
+  laneHeight: number;
+  expanded: boolean;
+  hoveredSpanId: number | undefined;
+};
+
+/**
+ * Renders a single lane's spans.
+ *
+ * Event handling for hover/click is delegated to the parent scroll
+ * container via `data-*` attributes , no per-span closures needed.
+ */
+export const TraceLane = memo(function TraceLane({
+  laneData,
+  laneHeight,
+  expanded,
+  hoveredSpanId
+}: TraceLaneProps) {
+  return (
+    <div
+      className={styles.laneRow}
+      style={{ height: laneHeight * laneData.stackCount }}
+    >
+      {laneData.visualSpans.map((v) => {
+        const isHover = hoveredSpanId === v.span.id;
+        const showLabel = expanded && v.widthPct > 5;
+        return (
+          <div
+            key={v.span.id}
+            data-trace-span=""
+            data-span-id={v.span.id}
+            data-node-id={v.span.nodeId}
+            data-span-name={v.span.name}
+            data-span-duration={v.durationMs.toFixed(2)}
+            className={styles.span}
+            style={{
+              top: v.stack * laneHeight + 3,
+              height: laneHeight - 6,
+              left: `${v.leftPct}%`,
+              width: `${v.widthPct}%`,
+              minWidth: 3,
+              backgroundColor: v.bg,
+              borderColor: isHover ? 'rgba(229,231,235,0.9)' : v.border
+            }}
+            title={`${v.span.name}\n${v.durationMs.toFixed(2)} ms\n${v.span.nodeId}`}
+          >
+            {showLabel && (
+              <span className={styles.spanLabel}>
+                {v.span.name} ({v.durationMs.toFixed(1)}ms)
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/src/components/panels/traces/TraceTooltip.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import type { HoverInfo } from './types';
+import styles from './index.module.css';
+
+type TraceTooltipProps = {
+  hover: HoverInfo | null;
+};
+
+export const TraceTooltip = memo(function TraceTooltip({
+  hover
+}: TraceTooltipProps) {
+  if (!hover?.span) return null;
+  return (
+    <div className={styles.tooltip}>
+      <div className={styles.tooltipTitle}>{hover.span.name}</div>
+      <div className={styles.tooltipDuration}>
+        {hover.durationMs?.toFixed(2)} ms
+      </div>
+      <div className={styles.tooltipNodeId}>{hover.span.nodeId}</div>
+    </div>
+  );
+});

package/src/components/panels/traces/TracesHeader.tsx

@@ -0,0 +1,56 @@
+import { memo } from 'react';
+import { VscodeButton } from '@vscode-elements/react-elements';
+import styles from './index.module.css';
+
+type TracesHeaderProps = {
+  size: number;
+  lanes: number;
+  windowMs: number;
+  expanded: boolean;
+  onWindowChange: (ms: number) => void;
+  onToggleExpanded: () => void;
+};
+
+export const TracesHeader = memo(function TracesHeader({
+  size,
+  lanes,
+  windowMs,
+  expanded,
+  onWindowChange,
+  onToggleExpanded
+}: TracesHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <h2 className={styles.title}>Traces</h2>
+      <div className={styles.subtitle}>Node execution spans</div>
+      <div className={styles.windowControls}>
+        <label className={styles.windowLabel}>
+          <span>Window</span>
+          <select
+            className={styles.windowSelect}
+            value={windowMs}
+            onChange={(e) => onWindowChange(Number(e.target.value))}
+          >
+            <option value={100}>100 ms</option>
+            <option value={500}>500 ms</option>
+            <option value={1000}>1 s</option>
+            <option value={5000}>5 s</option>
+            <option value={30000}>30 s</option>
+            <option value={0}>Fit all</option>
+          </select>
+        </label>
+        <VscodeButton onClick={onToggleExpanded} type="button">
+          {expanded ? 'Condensed' : 'Expanded'}
+        </VscodeButton>
+      </div>
+      <div className={styles.stats}>
+        <div>
+          <span className={styles.statValue}>{size}</span> spans
+        </div>
+        <div>
+          <span className={styles.statValue}>{lanes}</span> lanes
+        </div>
+      </div>
+    </div>
+  );
+});