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

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

@@ -1,11 +1,138 @@
-.title {
-    font-size: 0.9em;
-    font-weight: 600;
-    color: var(--vscode-foreground);
+/* 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: 0.85em;
-    color: var(--vscode-descriptionForeground);
-    opacity: 0.9;
-}
+    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

@@ -6,7 +6,7 @@ const LINE_STYLE_BASE: React.CSSProperties = {
   top: 0,
   bottom: 0,
   width: 1,
-  backgroundColor: 'var(--vscode-panel-border)',
+  backgroundColor: 'var(--ds-panel-border)',
   opacity: 0.3
 };
 

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

@@ -12,7 +12,7 @@ const TICK_STYLE: React.CSSProperties = {
 
 const LABEL_STYLE: React.CSSProperties = {
   fontSize: '10px',
-  color: 'var(--vscode-descriptionForeground)',
+  color: 'var(--ds-fg-muted)',
   padding: '2px 4px',
   whiteSpace: 'nowrap'
 };
@@ -32,8 +32,8 @@ export const TimeGrid = memo(function TimeGrid({
         position: 'sticky',
         top: 0,
         height: 24,
-        background: 'var(--vscode-editor-background)',
-        borderBottom: '1px solid var(--vscode-panel-border)',
+        background: 'var(--ds-editor-bg)',
+        borderBottom: '1px solid var(--ds-panel-border)',
         zIndex: 10,
         padding: `0 ${padding}px`
       }}

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

@@ -13,7 +13,7 @@ type TraceLaneProps = {
  * 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.
+ * container via `data-*` attributes , no per-span closures needed.
  */
 export const TraceLane = memo(function TraceLane({
   laneData,

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

@@ -1,10 +1,3 @@
-.root {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
 .header {
     display: flex;
     flex-direction: column;
@@ -109,7 +102,7 @@
     align-items: center;
     overflow: hidden;
     font-size: 11px;
-    font-family: var(--vscode-font-family);
+    font-family: var(--ds-font-ui);
     color: rgba(255, 255, 255, 0.95);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     white-space: nowrap;

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

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useStore } from 'zustand';
-import { useSystem } from '@/system';
+import { useActiveGraph } 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 { clamp, MAX_ZOOM_OUT_FACTOR } from './utils';
 import { useDerivedSpans } from './useDerivedSpans';
 import { TracesHeader } from './TracesHeader';
 import { TimeGrid } from './TimeGrid';
@@ -17,7 +17,7 @@ import { TraceTooltip } from './TraceTooltip';
 const PADDING = 8;
 
 export function TracesPanel() {
-  const system = useSystem();
+  const system = useActiveGraph()!;
   const version = useStore(system.traceStore, (s) => s.version);
   const clear = useStore(system.traceStore, (s) => s.clear);
   const collector = system.traceStore.getState().collector;
@@ -161,7 +161,11 @@ export function TracesPanel() {
 
       const zoomFactor = Math.exp(e.deltaY * 0.0015);
       setView((v) => {
-        const nextRange = clamp(v.range * zoomFactor, 1, derived.range);
+        const nextRange = clamp(
+          v.range * zoomFactor,
+          1,
+          derived.range * MAX_ZOOM_OUT_FACTOR
+        );
         const k = x / Math.max(1, rect.width);
         const nextStart = clampViewStart(t - k * nextRange, nextRange);
         return {

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

@@ -7,11 +7,27 @@ import type {
   ViewState,
   VisualSpan
 } from './types';
-import { calculateTimeInterval, clamp, hashToHue } from './utils';
+import {
+  calculateTimeInterval,
+  clamp,
+  hashToHue,
+  MAX_ZOOM_OUT_FACTOR
+} from './utils';
 
 const MIN_WIDTH_PCT = 0.5;
 const OVERLAP_EPSILON_PCT = 0.5;
 
+/**
+ * Minimum *visual* span length (ms). Instant nodes record start === end (0ms),
+ * which otherwise collapses the range (maxEnd <= minStart) and renders nothing.
+ * The true duration is still reported to the tooltip.
+ */
+const MIN_SPAN_MS = 1;
+
+/** Effective end used for layout: clamps instant/zero-length spans to MIN_SPAN_MS. */
+const visualEnd = (start: number, rawEnd: number): number =>
+  Math.max(rawEnd, start + MIN_SPAN_MS);
+
 const EMPTY: DerivedData = {
   now: 0,
   size: 0,
@@ -30,7 +46,8 @@ const EMPTY: DerivedData = {
 function computeTicks(
   viewStart: number,
   viewEnd: number,
-  viewRange: number
+  viewRange: number,
+  origin: number
 ): Tick[] {
   const interval = calculateTimeInterval(viewRange);
   const firstTick = Math.ceil(viewStart / interval) * interval;
@@ -38,7 +55,9 @@ function computeTicks(
   for (let t = firstTick; t <= viewEnd; t += interval) {
     const leftPct = ((t - viewStart) / viewRange) * 100;
     if (leftPct >= 0 && leftPct <= 100) {
-      ticks.push({ time: t, leftPct });
+      // Position uses absolute time; the label is relative to the trace origin
+      // (first span) so it reads 0ms… instead of the raw clock value.
+      ticks.push({ time: t - origin, leftPct });
     }
   }
   return ticks;
@@ -50,163 +69,239 @@ export function useDerivedSpans(
   windowMs: number,
   view: ViewState
 ): DerivedData {
-  return useMemo(() => {
-    const now = performance.now();
-    const { capacity, size, writeIndex, spans } = collector;
+  return useMemo(
+    () => computeDerivedSpans(collector, windowMs, view),
+    [collector, version, windowMs, view.follow, view.range, view.start]
+  );
+}
 
-    if (size <= 0) return { ...EMPTY, now };
+/**
+ * Pure span → layout derivation used by {@link useDerivedSpans}. Exported so the
+ * layout math (lane assignment, min-span visibility, ticks, zoom clamping) can be
+ * unit-tested without a React render.
+ */
+type TraceSpan = import('@/store/traces').TraceSpan;
 
-    let minStart = Number.POSITIVE_INFINITY;
-    let maxEnd = Number.NEGATIVE_INFINITY;
-    let maxLane = -1;
+interface SpanScan {
+  minStart: number;
+  maxEnd: number;
+  maxLane: number;
+  buckets: TraceSpan[][];
+}
 
-    const buckets: Array<import('@/store/traces').TraceSpan[]> = [];
+/** Walk the ring buffer newest-window-first, bucketing spans by lane and
+ * tracking the overall time/lane bounds. */
+function scanSpans(collector: SpanCollector, now: number): SpanScan {
+  const { capacity, size, writeIndex, spans } = collector;
+  let minStart = Number.POSITIVE_INFINITY;
+  let maxEnd = Number.NEGATIVE_INFINITY;
+  let maxLane = -1;
+  const buckets: TraceSpan[][] = [];
 
-    const startIndex = (writeIndex - size + capacity) % capacity;
-    for (let i = 0; i < size; i++) {
-      const idx = (startIndex + i) % capacity;
-      const s = spans[idx];
-      if (!s) continue;
+  const startIndex = (writeIndex - size + capacity) % capacity;
+  for (let i = 0; i < size; i++) {
+    const idx = (startIndex + i) % capacity;
+    const s = spans[idx];
+    if (!s) continue;
 
-      const end = Number.isNaN(s.end) ? now : s.end;
-      minStart = Math.min(minStart, s.start);
-      maxEnd = Math.max(maxEnd, end);
-      maxLane = Math.max(maxLane, s.lane);
+    const rawEnd = Number.isNaN(s.end) ? now : s.end;
+    const end = visualEnd(s.start, rawEnd);
+    minStart = Math.min(minStart, s.start);
+    maxEnd = Math.max(maxEnd, end);
+    maxLane = Math.max(maxLane, s.lane);
 
-      (buckets[s.lane] ??= []).push(s);
-    }
+    (buckets[s.lane] ??= []).push(s);
+  }
 
-    if (
-      !Number.isFinite(minStart) ||
-      !Number.isFinite(maxEnd) ||
-      maxEnd <= minStart
-    ) {
-      return {
-        ...EMPTY,
-        now,
-        size,
-        lanes: maxLane + 1,
-        buckets,
-        laneData: []
-      };
-    }
+  return { minStart, maxEnd, maxLane, buckets };
+}
 
-    const fullRange = Math.max(1, maxEnd - minStart);
-
-    const desiredRange = windowMs <= 0 ? fullRange : Math.max(1, windowMs);
-    const desiredStart = Math.max(minStart, maxEnd - desiredRange);
-
-    const effectiveRange = clamp(
-      view.follow ? desiredRange : view.range,
-      1,
-      fullRange
-    );
-    const effectiveStart = clamp(
-      view.follow ? desiredStart : view.start,
-      minStart,
-      maxEnd - effectiveRange
-    );
-
-    const viewStart = effectiveStart;
-    const viewEnd = viewStart + effectiveRange;
-    const viewRange = effectiveRange;
-
-    const laneData: LaneData[] = Array.from({ length: maxLane + 1 }, () => ({
-      stackCount: 1,
-      visualSpans: [] as VisualSpan[]
-    }));
-
-    for (let lane = 0; lane <= maxLane; lane++) {
-      const laneSpans = buckets[lane];
-      if (!laneSpans || laneSpans.length === 0) {
-        laneData[lane] = { stackCount: 1, visualSpans: [] };
-        continue;
-      }
-
-      const tmp: Array<{
-        span: import('@/store/traces').TraceSpan;
-        leftPct: number;
-        widthPct: number;
-        rightPct: number;
-        durationMs: number;
-      }> = [];
-
-      for (const s of laneSpans) {
-        const end = Number.isNaN(s.end) ? now : s.end;
-        if (end < viewStart || s.start > viewEnd) continue;
-
-        const visibleStart = Math.max(s.start, viewStart);
-        const visibleEnd = Math.min(end, viewEnd);
-        if (visibleEnd <= visibleStart) continue;
-
-        const rawLeft = ((visibleStart - viewStart) / viewRange) * 100;
-        const rawWidth = ((visibleEnd - visibleStart) / viewRange) * 100;
-        const leftPct = clamp(rawLeft, 0, 100);
-        const widthPct = clamp(
-          Math.max(MIN_WIDTH_PCT, rawWidth),
-          0,
-          100 - leftPct
-        );
-        const rightPct = leftPct + widthPct;
-        const durationMs = Math.max(0, end - s.start);
-
-        tmp.push({ span: s, leftPct, widthPct, rightPct, durationMs });
-      }
-
-      tmp.sort((a, b) => a.leftPct - b.leftPct);
-
-      const stackRight: number[] = [];
-      const visualSpans: VisualSpan[] = [];
-
-      for (const v of tmp) {
-        let stack = 0;
-        for (; stack < stackRight.length; stack++) {
-          if (v.leftPct >= stackRight[stack]! + OVERLAP_EPSILON_PCT) break;
-        }
-        if (stack === stackRight.length) stackRight.push(v.rightPct);
-        else stackRight[stack] = Math.max(stackRight[stack]!, v.rightPct);
-
-        const hue = hashToHue(v.span.nodeId);
-        const isOpen = Number.isNaN(v.span.end);
-        const lightness = clamp(56 - stack * 7, 30, 60);
-        const bg = isOpen
-          ? `hsla(${hue}, 80%, ${clamp(lightness + 6, 30, 65)}%, 0.35)`
-          : `hsla(${hue}, 80%, ${lightness}%, 0.6)`;
-        const border = `hsla(${hue}, 90%, ${clamp(lightness + 22, 45, 80)}%, 0.95)`;
-
-        visualSpans.push({
-          span: v.span,
-          leftPct: v.leftPct,
-          widthPct: v.widthPct,
-          rightPct: v.rightPct,
-          durationMs: v.durationMs,
-          stack,
-          bg,
-          border
-        });
-      }
-
-      laneData[lane] = {
-        stackCount: Math.max(1, stackRight.length),
-        visualSpans
-      };
-    }
+interface ViewWindow {
+  viewStart: number;
+  viewEnd: number;
+  viewRange: number;
+}
+
+/** Resolve the visible time window from the data bounds, the follow/zoom mode,
+ * and the requested window size. */
+function resolveViewWindow(
+  scan: SpanScan,
+  fullRange: number,
+  windowMs: number,
+  view: ViewState
+): ViewWindow {
+  const { minStart, maxEnd } = scan;
+  const desiredRange = windowMs <= 0 ? fullRange : Math.max(1, windowMs);
+  const desiredStart = Math.max(minStart, maxEnd - desiredRange);
+
+  // Following snaps to the data range; manual zoom may pull back past the data
+  // extent (up to MAX_ZOOM_OUT_FACTOR×) so short traces aren't un-zoom-out-able.
+  const viewRange = clamp(
+    view.follow ? desiredRange : view.range,
+    1,
+    view.follow ? fullRange : fullRange * MAX_ZOOM_OUT_FACTOR
+  );
+  const viewStart = clamp(
+    view.follow ? desiredStart : view.start,
+    minStart,
+    maxEnd - viewRange
+  );
+
+  return { viewStart, viewEnd: viewStart + viewRange, viewRange };
+}
+
+type PlacedSpan = {
+  span: TraceSpan;
+  leftPct: number;
+  widthPct: number;
+  rightPct: number;
+  durationMs: number;
+};
 
-    const ticks = computeTicks(viewStart, viewEnd, viewRange);
+/** Project a single span onto the view window, or null if it falls outside. */
+function placeSpan(
+  s: TraceSpan,
+  now: number,
+  win: ViewWindow
+): PlacedSpan | null {
+  const { viewStart, viewEnd, viewRange } = win;
+  const rawEnd = Number.isNaN(s.end) ? now : s.end;
+  const end = visualEnd(s.start, rawEnd);
+  if (end < viewStart || s.start > viewEnd) return null;
 
+  const visibleStart = Math.max(s.start, viewStart);
+  const visibleEnd = Math.min(end, viewEnd);
+  if (visibleEnd <= visibleStart) return null;
+
+  const rawLeft = ((visibleStart - viewStart) / viewRange) * 100;
+  const rawWidth = ((visibleEnd - visibleStart) / viewRange) * 100;
+  const leftPct = clamp(rawLeft, 0, 100);
+  const widthPct = clamp(Math.max(MIN_WIDTH_PCT, rawWidth), 0, 100 - leftPct);
+  const rightPct = leftPct + widthPct;
+  // Report the true duration (0ms for instant nodes), not the padded one.
+  const durationMs = Math.max(0, rawEnd - s.start);
+
+  return { span: s, leftPct, widthPct, rightPct, durationMs };
+}
+
+/** Pack a placed span into the lowest stack row that has cleared its left edge,
+ * returning the chosen stack index and updating `stackRight` in place. */
+function assignStack(placed: PlacedSpan, stackRight: number[]): number {
+  let stack = 0;
+  for (; stack < stackRight.length; stack++) {
+    if (placed.leftPct >= stackRight[stack]! + OVERLAP_EPSILON_PCT) break;
+  }
+  if (stack === stackRight.length) stackRight.push(placed.rightPct);
+  else stackRight[stack] = Math.max(stackRight[stack]!, placed.rightPct);
+  return stack;
+}
+
+/** Build the fill/border colours for a span at a given stack depth. */
+function spanColors(
+  span: TraceSpan,
+  stack: number
+): { bg: string; border: string } {
+  const hue = hashToHue(span.nodeId);
+  const isOpen = Number.isNaN(span.end);
+  const lightness = clamp(56 - stack * 7, 30, 60);
+  const bg = isOpen
+    ? `hsla(${hue}, 80%, ${clamp(lightness + 6, 30, 65)}%, 0.35)`
+    : `hsla(${hue}, 80%, ${lightness}%, 0.6)`;
+  const border = `hsla(${hue}, 90%, ${clamp(lightness + 22, 45, 80)}%, 0.95)`;
+  return { bg, border };
+}
+
+/** Lay out one lane's spans into stacked, coloured visual spans. */
+function buildLaneData(
+  laneSpans: TraceSpan[] | undefined,
+  now: number,
+  win: ViewWindow
+): LaneData {
+  if (!laneSpans || laneSpans.length === 0) {
+    return { stackCount: 1, visualSpans: [] };
+  }
+
+  const placed: PlacedSpan[] = [];
+  for (const s of laneSpans) {
+    const p = placeSpan(s, now, win);
+    if (p) placed.push(p);
+  }
+  placed.sort((a, b) => a.leftPct - b.leftPct);
+
+  const stackRight: number[] = [];
+  const visualSpans: VisualSpan[] = [];
+  for (const v of placed) {
+    const stack = assignStack(v, stackRight);
+    const { bg, border } = spanColors(v.span, stack);
+    visualSpans.push({
+      span: v.span,
+      leftPct: v.leftPct,
+      widthPct: v.widthPct,
+      rightPct: v.rightPct,
+      durationMs: v.durationMs,
+      stack,
+      bg,
+      border
+    });
+  }
+
+  return { stackCount: Math.max(1, stackRight.length), visualSpans };
+}
+
+export function computeDerivedSpans(
+  collector: SpanCollector,
+  windowMs: number,
+  view: ViewState
+): DerivedData {
+  const now = performance.now();
+
+  if (collector.size <= 0) return { ...EMPTY, now };
+
+  const scan = scanSpans(collector, now);
+  const { minStart, maxEnd, maxLane, buckets } = scan;
+  const { size } = collector;
+
+  if (
+    !Number.isFinite(minStart) ||
+    !Number.isFinite(maxEnd) ||
+    maxEnd <= minStart
+  ) {
     return {
+      ...EMPTY,
       now,
       size,
       lanes: maxLane + 1,
-      minStart,
-      maxEnd,
-      range: fullRange,
-      viewStart,
-      viewEnd,
-      viewRange,
       buckets,
-      laneData,
-      ticks
+      laneData: []
     };
-  }, [collector, version, windowMs, view.follow, view.range, view.start]);
+  }
+
+  const fullRange = Math.max(1, maxEnd - minStart);
+  const win = resolveViewWindow(scan, fullRange, windowMs, view);
+
+  const laneData: LaneData[] = Array.from({ length: maxLane + 1 }, (_, lane) =>
+    buildLaneData(buckets[lane], now, win)
+  );
+
+  const ticks = computeTicks(
+    win.viewStart,
+    win.viewEnd,
+    win.viewRange,
+    minStart
+  );
+
+  return {
+    now,
+    size,
+    lanes: maxLane + 1,
+    minStart,
+    maxEnd,
+    range: fullRange,
+    viewStart: win.viewStart,
+    viewEnd: win.viewEnd,
+    viewRange: win.viewRange,
+    buckets,
+    laneData,
+    ticks
+  };
 }

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

@@ -8,6 +8,14 @@ export const hashToHue = (str: string): number => {
 export const clamp = (v: number, min: number, max: number): number =>
   Math.max(min, Math.min(max, v));
 
+/**
+ * How far past the captured data extent the user may zoom out. Without headroom
+ * the view range is clamped to the data range, so you hit a wall and "can't zoom
+ * out" , especially for very short traces. This lets the trace be pulled back
+ * into a smaller cluster with surrounding space.
+ */
+export const MAX_ZOOM_OUT_FACTOR = 8;
+
 const NICE_INTERVALS = [
   1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000
 ] as const;