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

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

@@ -0,0 +1,245 @@
+import { BasePanel } from '@/components/panels/base';
+import { layerId } from '@/annotations';
+import { useActiveGraph } from '@/system/provider';
+import {
+  VscodeButton,
+  VscodeCheckbox,
+  VscodeDivider
+} from '@vscode-elements/react-elements';
+import { useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import styles from './styles.module.css';
+
+type NodeWithAnnotations = {
+  id: string;
+  selected?: boolean;
+  data?: {
+    annotations?: Record<string, unknown>;
+  };
+};
+
+const getAnnotatedLayerId = (node: NodeWithAnnotations): string | undefined => {
+  const value = node.data?.annotations?.[layerId];
+  return typeof value === 'string' ? value : undefined;
+};
+
+const clampOpacityFromPercent = (percent: number): number => {
+  if (Number.isNaN(percent)) return 1;
+  return Math.max(0, Math.min(100, percent)) / 100;
+};
+
+export function LayersPanel() {
+  const system = useActiveGraph()!;
+
+  const layers = useStore(system.layerStore, (state) => state.layers);
+  const nodeLayers = useStore(system.layerStore, (state) => state.nodeLayers);
+  const defaultLayerId = useStore(
+    system.layerStore,
+    (state) => state.defaultLayerId
+  );
+
+  const nodes = useStore(system.nodeStore, (state) => state.nodes);
+
+  const [newLayerName, setNewLayerName] = useState('');
+
+  const selectedNodeIds = useMemo(() => {
+    return nodes.filter((node) => node.selected).map((node) => node.id);
+  }, [nodes]);
+
+  const layerRows = useMemo(() => {
+    const entries = Object.values(layers);
+    return entries.sort((a, b) => {
+      if (a.id === defaultLayerId) return -1;
+      if (b.id === defaultLayerId) return 1;
+      return a.name.localeCompare(b.name);
+    });
+  }, [defaultLayerId, layers]);
+
+  const selectedLayerId = useMemo(() => {
+    if (selectedNodeIds.length === 0) return undefined;
+
+    const effectiveLayerIds = selectedNodeIds.map((nodeId) => {
+      const node = nodes.find((candidate) => candidate.id === nodeId);
+      if (!node) return defaultLayerId;
+      return (
+        nodeLayers[nodeId] ??
+        getAnnotatedLayerId(node as NodeWithAnnotations) ??
+        defaultLayerId
+      );
+    });
+
+    const first = effectiveLayerIds[0];
+    const sameLayer = effectiveLayerIds.every((id) => id === first);
+    return sameLayer ? first : undefined;
+  }, [defaultLayerId, nodeLayers, nodes, selectedNodeIds]);
+
+  const updateNodeAnnotationsForLayer = (
+    nodeIds: string[],
+    nextLayerId: string
+  ): void => {
+    system.nodeStore.getState().setNodes((existing) =>
+      existing.map((node) => {
+        if (!nodeIds.includes(node.id)) return node;
+
+        const dataRecord =
+          node.data && typeof node.data === 'object'
+            ? (node.data as Record<string, unknown>)
+            : {};
+
+        const annotationsRecord =
+          dataRecord.annotations && typeof dataRecord.annotations === 'object'
+            ? (dataRecord.annotations as Record<string, unknown>)
+            : {};
+
+        return {
+          ...node,
+          data: {
+            ...dataRecord,
+            annotations: {
+              ...annotationsRecord,
+              [layerId]: nextLayerId
+            }
+          }
+        };
+      })
+    );
+  };
+
+  const handleCreateLayer = (): void => {
+    const nextName = newLayerName.trim();
+    if (!nextName) return;
+
+    system.layerStore.getState().createLayer(nextName);
+    setNewLayerName('');
+  };
+
+  const handleAssignSelected = (targetLayerId: string): void => {
+    if (selectedNodeIds.length === 0) return;
+
+    selectedNodeIds.forEach((nodeId) => {
+      system.layerStore.getState().setNodeLayer(nodeId, targetLayerId);
+    });
+    updateNodeAnnotationsForLayer(selectedNodeIds, targetLayerId);
+  };
+
+  const handleRemoveLayer = (targetLayerId: string): void => {
+    if (targetLayerId === defaultLayerId) return;
+
+    const affectedNodeIds = Object.entries(nodeLayers)
+      .filter(([, mappedLayerId]) => mappedLayerId === targetLayerId)
+      .map(([nodeId]) => nodeId);
+
+    system.layerStore.getState().removeLayer(targetLayerId);
+
+    if (affectedNodeIds.length > 0) {
+      updateNodeAnnotationsForLayer(affectedNodeIds, defaultLayerId);
+    }
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <span className={styles.title}>Layers</span>
+          <span className={styles.subtitle}>
+            {selectedNodeIds.length} selected node
+            {selectedNodeIds.length === 1 ? '' : 's'}
+          </span>
+        </div>
+
+        <div className={styles.addRow}>
+          <input
+            className={styles.nameInput}
+            value={newLayerName}
+            onChange={(event) => setNewLayerName(event.target.value)}
+            placeholder="New layer name"
+          />
+          <VscodeButton onClick={handleCreateLayer}>Add Layer</VscodeButton>
+        </div>
+
+        <VscodeDivider />
+
+        <div className={styles.list}>
+          {layerRows.map((layer) => {
+            const isDefault = layer.id === defaultLayerId;
+            const isSelectedLayer = selectedLayerId === layer.id;
+
+            return (
+              <div className={styles.row} key={layer.id}>
+                <div className={styles.rowTop}>
+                  <input
+                    className={styles.layerName}
+                    value={layer.name}
+                    onChange={(event) =>
+                      system.layerStore
+                        .getState()
+                        .renameLayer(layer.id, event.target.value)
+                    }
+                    aria-label={`Layer name ${layer.name}`}
+                  />
+                  {isDefault && <span className={styles.badge}>default</span>}
+                  {isSelectedLayer && (
+                    <span className={styles.badge}>selected</span>
+                  )}
+                </div>
+
+                <div className={styles.controls}>
+                  <VscodeCheckbox
+                    className={styles.checkboxLabel}
+                    checked={layer.visible}
+                    label="Visible"
+                    onChange={(event: any) =>
+                      system.layerStore
+                        .getState()
+                        .setLayerVisibility(
+                          layer.id,
+                          Boolean(event?.target?.checked)
+                        )
+                    }
+                  />
+
+                  <label className={styles.opacityLabel}>
+                    Opacity
+                    <input
+                      type="range"
+                      min={0}
+                      max={100}
+                      value={Math.round(layer.opacity * 100)}
+                      onChange={(event) =>
+                        system.layerStore
+                          .getState()
+                          .setLayerOpacity(
+                            layer.id,
+                            clampOpacityFromPercent(
+                              Number.parseInt(event.target.value, 10)
+                            )
+                          )
+                      }
+                    />
+                    <span>{Math.round(layer.opacity * 100)}%</span>
+                  </label>
+                </div>
+
+                <div className={styles.actions}>
+                  <VscodeButton
+                    onClick={() => handleAssignSelected(layer.id)}
+                    disabled={selectedNodeIds.length === 0}
+                  >
+                    Assign Selected
+                  </VscodeButton>
+                  <VscodeButton
+                    secondary
+                    disabled={isDefault}
+                    onClick={() => handleRemoveLayer(layer.id)}
+                  >
+                    Delete
+                  </VscodeButton>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </BasePanel>
+  );
+}

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

@@ -0,0 +1,107 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 0.75rem;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.subtitle {
+    font-size: 0.85rem;
+    color: var(--ds-fg-muted);
+}
+
+.addRow {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.nameInput {
+    flex: 1;
+    background: var(--ds-input-bg);
+    color: var(--ds-input-fg);
+    border: 1px solid var(--ds-input-border);
+    border-radius: 4px;
+    padding: 0.35rem 0.5rem;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: auto;
+}
+
+.row {
+    border: 1px solid var(--ds-panel-border);
+    border-radius: 6px;
+    padding: 0.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.rowTop {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.layerName {
+    flex: 1;
+    background: transparent;
+    color: var(--ds-editor-fg);
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.2rem 0.3rem;
+}
+
+.layerName:focus {
+    border-color: var(--ds-focus-border);
+    outline: none;
+}
+
+.badge {
+    font-size: 0.7rem;
+    color: var(--ds-badge-fg);
+    background: var(--ds-badge-bg);
+    border-radius: 99px;
+    padding: 0.1rem 0.45rem;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.checkboxLabel {
+    font-size: 0.85rem;
+}
+
+.opacityLabel {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.85rem;
+}
+
+.opacityLabel input[type='range'] {
+    width: 110px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.4rem;
+}

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

@@ -0,0 +1,6 @@
+.legendCol {
+  height: 1rem;
+  width: 1rem;
+  border-radius: 0.125rem;
+  border: 1px solid;
+}

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

@@ -0,0 +1,76 @@
+import cx from 'classnames';
+import React from 'react';
+import { useStore } from 'zustand';
+
+import { useSystem } from '@/system/provider';
+import {
+  VscodeTable,
+  VscodeTableBody,
+  VscodeTableCell,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableRow
+} from '@vscode-elements/react-elements';
+import { BasePanel } from '../base';
+import klasses from './index.module.css';
+
+export function LegendPanel() {
+  const system = useSystem();
+  const { valueTypeColors, icons, defaultIcon } = useStore(system.legendStore);
+
+  const entries = React.useMemo(() => {
+    const keys = new Set<string>([
+      ...Object.keys(valueTypeColors),
+      ...Object.keys(icons)
+    ]);
+
+    return [...keys]
+      .sort((a, b) => a.localeCompare(b))
+      .map((valueType) => {
+        const Icon = icons[valueType] ?? defaultIcon;
+        const color = valueTypeColors[valueType];
+        const [bgClass, borderClass] = [color, color];
+
+        return {
+          valueType,
+          Icon,
+          bgClass,
+          borderClass
+        };
+      });
+  }, [defaultIcon, icons, valueTypeColors]);
+
+  return (
+    <BasePanel>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        <VscodeTable zebra columns={['50', '50', 'auto']}>
+          <VscodeTableHeader>
+            <VscodeTableHeaderCell>Color</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Icon</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Type</VscodeTableHeaderCell>
+          </VscodeTableHeader>
+          <VscodeTableBody>
+            {entries.map(({ valueType, Icon, bgClass, borderClass }) => (
+              <VscodeTableRow key={valueType}>
+                <VscodeTableCell>
+                  <div
+                    style={{
+                      border: borderClass,
+                      background: bgClass
+                    }}
+                    className={cx(klasses.legendCol, bgClass, borderClass)}
+                    title={valueType}
+                  />
+                </VscodeTableCell>
+                <VscodeTableCell>
+                  <Icon />
+                </VscodeTableCell>
+                <VscodeTableCell>{valueType}</VscodeTableCell>
+              </VscodeTableRow>
+            ))}
+          </VscodeTableBody>
+        </VscodeTable>
+      </div>
+    </BasePanel>
+  );
+}

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

@@ -0,0 +1,218 @@
+/* ---- Toolbar ---------------------------------------------------------- */
+
+.toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--ds-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;
+}
+
+/* Keep the toolbar action icons inside their (ghost) buttons. */
+.toolbarActions svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* Active toggle: conveyed by the solid icon variant + an accent color, with no
+   box — the buttons stay ghost/invisible like the rest of the toolbar. */
+.actionActive {
+    color: var(--ds-focus-border, #3794ff);
+}
+
+/* ---- 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(--ds-focus-border);
+    outline-offset: 1px;
+}
+
+.levelOff {
+    background-color: transparent;
+    color: var(--ds-fg-muted, #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(--ds-fg-muted, #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(--ds-fg-muted, #9d9d9d);
+    font-size: 0.85rem;
+}
+
+.logsList {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--ds-font-mono, monospace);
+    font-size: var(--ds-font-mono-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(--ds-list-hover-bg, rgba(255, 255, 255, 0.06));
+}
+
+.row[data-severity='warning'] {
+    border-left-color: color-mix(in srgb, var(--ds-warning, #cca700) 60%, transparent);
+}
+
+.row[data-severity='error'] {
+    border-left-color: var(--ds-error, #f48771);
+    background-color: color-mix(in srgb, var(--ds-error, #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(--ds-fg-muted, #9d9d9d);
+    opacity: 0.85;
+    font-variant-numeric: tabular-nums;
+}
+
+.rowMessage {
+    flex: 1;
+    min-width: 0;
+    color: var(--ds-fg);
+}
+
+.row[data-severity='error'] .rowMessage {
+    color: var(--ds-error, #f48771);
+}
+
+.row[data-severity='verbose'] .rowMessage {
+    color: var(--ds-fg-muted, #9d9d9d);
+}
+
+.highlight {
+    background-color: var(--ds-find-match-bg, rgba(234, 92, 0, 0.33));
+    color: inherit;
+    border-radius: 2px;
+}