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

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(--vscode-descriptionForeground)',
+  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(--vscode-editor-background)',
+        borderBottom: '1px solid var(--vscode-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>
+  );
+});

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

@@ -0,0 +1,166 @@
+.root {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+}
+
+.title {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+}
+
+.subtitle {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(156 163 175);
+
+}
+
+.windowControls {
+    margin-left: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(156 163 175);
+
+}
+
+.windowLabel {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.windowSelect {
+    background-color: rgb(17 24 39);
+    /* gray-900 */
+    border: 1px solid rgb(55 65 81);
+    /* gray-700 */
+    border-radius: 0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    color: rgb(229 231 235);
+    /* gray-200 */
+}
+
+.stats {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(156 163 175);
+
+}
+
+.statValue {
+    color: rgb(229 231 235);
+    /* gray-200 */
+}
+
+.empty {
+    padding: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: rgb(156 163 175);
+
+}
+
+.scroll {
+    position: relative;
+    flex: 1 1 0%;
+    overflow: auto;
+    min-height: 0;
+}
+
+.lanes {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.laneRow {
+    position: relative;
+    border-bottom: 1px solid rgb(31 41 55);
+    /* gray-800 */
+    overflow: hidden;
+}
+
+.span {
+    position: absolute;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    border-width: 1px;
+    border-style: solid;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    font-size: 11px;
+    font-family: var(--vscode-font-family);
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
+    pointer-events: auto;
+}
+
+.spanLabel {
+    font-weight: 500;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 4px;
+}
+
+.tooltip {
+    position: absolute;
+    left: 0.5rem;
+    bottom: 0.5rem;
+    z-index: 10;
+    pointer-events: none;
+    max-width: 70%;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-radius: 0.25rem;
+    background-color: rgb(17 24 39);
+    /* gray-900 */
+    border: 1px solid rgb(55 65 81);
+    /* gray-700 */
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(243 244 246);
+    /* gray-100 */
+}
+
+.tooltipTitle {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tooltipDuration {
+    color: rgb(209 213 219);
+    /* gray-300 */
+}
+
+.tooltipNodeId {
+    color: rgb(107 114 128);
+    /* gray-500 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

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

@@ -0,0 +1,294 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useStore } from 'zustand';
+import { useSystem } from '@/system';
+import type { TraceSpan } from '@/store/traces';
+import { VscodeButton, VscodeDivider } from '@vscode-elements/react-elements';
+import styles from './index.module.css';
+import { BasePanel } from '../base';
+import type { HoverInfo, ViewState } from './types';
+import { clamp } from './utils';
+import { useDerivedSpans } from './useDerivedSpans';
+import { TracesHeader } from './TracesHeader';
+import { TimeGrid } from './TimeGrid';
+import { GridLines } from './GridLines';
+import { TraceLane } from './TraceLane';
+import { TraceTooltip } from './TraceTooltip';
+
+const PADDING = 8;
+
+export function TracesPanel() {
+  const system = useSystem();
+  const version = useStore(system.traceStore, (s) => s.version);
+  const clear = useStore(system.traceStore, (s) => s.clear);
+  const collector = system.traceStore.getState().collector;
+
+  const [hover, setHover] = useState<HoverInfo | null>(null);
+  const [windowMs, setWindowMs] = useState<number>(5000);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [view, setView] = useState<ViewState>(() => ({
+    start: 0,
+    range: 5000,
+    follow: true
+  }));
+
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const dragRef = useRef<{
+    dragging: boolean;
+    startClientX: number;
+    startViewStart: number;
+    startViewRange: number;
+  }>({
+    dragging: false,
+    startClientX: 0,
+    startViewStart: 0,
+    startViewRange: 0
+  });
+
+  const laneHeight = expanded ? 32 : 16;
+
+  const derived = useDerivedSpans(collector, version, windowMs, view);
+
+  // Keep the view aligned to the selector when following.
+  useEffect(() => {
+    if (derived.size <= 0 || !view.follow) return;
+    const desiredRange = windowMs <= 0 ? derived.range : Math.max(1, windowMs);
+    const range = clamp(desiredRange, 1, derived.range);
+    const start = clamp(
+      derived.maxEnd - range,
+      derived.minStart,
+      derived.maxEnd - range
+    );
+    setView((v) =>
+      v.range === range && v.start === start ? v : { ...v, range, start }
+    );
+  }, [
+    derived.size,
+    derived.range,
+    derived.minStart,
+    derived.maxEnd,
+    windowMs,
+    view.follow
+  ]);
+
+  const clampViewStart = useCallback(
+    (start: number, range: number) =>
+      clamp(start, derived.minStart, derived.maxEnd - range),
+    [derived.minStart, derived.maxEnd]
+  );
+
+  // ---------- Event delegation for span hover / click ----------
+
+  const findSpanElement = (target: EventTarget | null): HTMLElement | null => {
+    let el = target as HTMLElement | null;
+    while (el && !el.hasAttribute('data-trace-span')) {
+      if (el === scrollRef.current) return null;
+      el = el.parentElement;
+    }
+    return el;
+  };
+
+  const handleDelegatedMouseOver = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const spanEl = findSpanElement(e.target);
+      if (!spanEl) return;
+      const name = spanEl.getAttribute('data-span-name') ?? '';
+      const nodeId = spanEl.getAttribute('data-node-id') ?? '';
+      const durationMs = Number(
+        spanEl.getAttribute('data-span-duration') ?? '0'
+      );
+      const id = Number(spanEl.getAttribute('data-span-id') ?? '0');
+      setHover({
+        span: { id, nodeId, name } as TraceSpan,
+        durationMs
+      });
+    },
+    []
+  );
+
+  const handleDelegatedMouseOut = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const spanEl = findSpanElement(e.relatedTarget);
+      if (!spanEl) setHover(null);
+    },
+    []
+  );
+
+  const handleDelegatedClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const spanEl = findSpanElement(e.target);
+      if (!spanEl) return;
+      const nodeId = spanEl.getAttribute('data-node-id');
+      if (!nodeId) return;
+      system.actionStore.getState().actions.focusNode(nodeId);
+      system.selectionStore.getState().setSelectedNodeId(nodeId);
+    },
+    [system.actionStore, system.selectionStore]
+  );
+
+  // ---------- Wheel zoom / pan ----------
+
+  const handleWheel = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      if (derived.size === 0) return;
+
+      const el = scrollRef.current;
+      if (el) {
+        const canScroll = el.scrollHeight > el.clientHeight;
+        if (canScroll) {
+          const atTop = el.scrollTop <= 0;
+          const atBottom =
+            el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+          const wouldScroll =
+            (e.deltaY > 0 && !atBottom) || (e.deltaY < 0 && !atTop);
+          if (wouldScroll && !e.shiftKey) return;
+        }
+      }
+
+      const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+      const x = clamp(e.clientX - rect.left, 0, rect.width);
+      const t =
+        derived.viewStart + (x / Math.max(1, rect.width)) * derived.viewRange;
+
+      if (e.shiftKey) {
+        const deltaT = (e.deltaY / Math.max(1, rect.width)) * derived.viewRange;
+        setView((v) => {
+          const start = clampViewStart(v.start + deltaT, v.range);
+          return { ...v, start, follow: false };
+        });
+        e.preventDefault();
+        return;
+      }
+
+      const zoomFactor = Math.exp(e.deltaY * 0.0015);
+      setView((v) => {
+        const nextRange = clamp(v.range * zoomFactor, 1, derived.range);
+        const k = x / Math.max(1, rect.width);
+        const nextStart = clampViewStart(t - k * nextRange, nextRange);
+        return {
+          ...v,
+          range: nextRange,
+          start: nextStart,
+          follow: false
+        };
+      });
+      e.preventDefault();
+    },
+    [
+      derived.size,
+      derived.viewStart,
+      derived.viewRange,
+      derived.range,
+      clampViewStart
+    ]
+  );
+
+  // ---------- Drag pan ----------
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (derived.size === 0) return;
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('[data-trace-span]')) return;
+      dragRef.current.dragging = true;
+      dragRef.current.startClientX = e.clientX;
+      dragRef.current.startViewStart = derived.viewStart;
+      dragRef.current.startViewRange = derived.viewRange;
+      setView((v) => ({ ...v, follow: false }));
+    },
+    [derived.size, derived.viewStart, derived.viewRange]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!dragRef.current.dragging) return;
+      const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+      const dx = e.clientX - dragRef.current.startClientX;
+      const deltaT =
+        (-dx / Math.max(1, rect.width)) * dragRef.current.startViewRange;
+      const nextStart = clampViewStart(
+        dragRef.current.startViewStart + deltaT,
+        dragRef.current.startViewRange
+      );
+      setView((v) => ({ ...v, start: nextStart }));
+    },
+    [clampViewStart]
+  );
+
+  const stopDrag = useCallback(() => {
+    dragRef.current.dragging = false;
+  }, []);
+
+  // ---------- Header callbacks ----------
+
+  const handleWindowChange = useCallback((ms: number) => {
+    setWindowMs(ms);
+    setView((v) => ({ ...v, follow: true }));
+  }, []);
+
+  const handleToggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  const handleClear = useCallback(() => clear(), [clear]);
+
+  return (
+    <BasePanel>
+      <TracesHeader
+        size={derived.size}
+        lanes={derived.lanes}
+        windowMs={windowMs}
+        expanded={expanded}
+        onWindowChange={handleWindowChange}
+        onToggleExpanded={handleToggleExpanded}
+      />
+      <VscodeDivider />
+
+      {derived.size === 0 ? (
+        <div className={styles.empty}>
+          No spans captured yet. Run/trigger the graph to record node execution.
+        </div>
+      ) : (
+        <div
+          ref={scrollRef}
+          className={styles.scroll}
+          onWheel={handleWheel}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={stopDrag}
+          onMouseLeave={stopDrag}
+          onMouseOver={handleDelegatedMouseOver}
+          onMouseOut={handleDelegatedMouseOut}
+          onClick={handleDelegatedClick}
+          style={{
+            cursor: dragRef.current.dragging ? 'grabbing' : 'grab'
+          }}
+        >
+          <TimeGrid ticks={derived.ticks} padding={PADDING} />
+
+          <div
+            className={styles.lanes}
+            style={{ padding: PADDING, position: 'relative' }}
+          >
+            <GridLines ticks={derived.ticks} padding={PADDING} />
+
+            {derived.laneData.map((ld, lane) => (
+              <TraceLane
+                key={lane}
+                laneData={ld}
+                laneHeight={laneHeight}
+                expanded={expanded}
+                hoveredSpanId={hover?.span?.id}
+              />
+            ))}
+          </div>
+
+          <TraceTooltip hover={hover} />
+        </div>
+      )}
+
+      <VscodeButton onClick={handleClear} type="button">
+        Clear
+      </VscodeButton>
+    </BasePanel>
+  );
+}

package/src/components/panels/traces/types.ts

@@ -0,0 +1,48 @@
+import type { TraceSpan } from '@/store/traces';
+
+export type VisualSpan = {
+  span: TraceSpan;
+  leftPct: number;
+  widthPct: number;
+  rightPct: number;
+  stack: number;
+  durationMs: number;
+  bg: string;
+  border: string;
+};
+
+export type LaneData = {
+  stackCount: number;
+  visualSpans: VisualSpan[];
+};
+
+export type HoverInfo = {
+  span?: TraceSpan;
+  durationMs?: number;
+};
+
+export type ViewState = {
+  start: number;
+  range: number;
+  follow: boolean;
+};
+
+export type DerivedData = {
+  now: number;
+  size: number;
+  lanes: number;
+  minStart: number;
+  maxEnd: number;
+  range: number;
+  viewStart: number;
+  viewEnd: number;
+  viewRange: number;
+  buckets: Array<TraceSpan[]>;
+  laneData: LaneData[];
+  ticks: Tick[];
+};
+
+export type Tick = {
+  time: number;
+  leftPct: number;
+};