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

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

@@ -7,14 +7,6 @@
     overflow: hidden;
 }
 
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    flex-shrink: 0;
-}
-
 .content {
     padding: 8px;
 }
@@ -42,30 +34,6 @@
     opacity: 0.7;
 }
 
-.eventList {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px;
-    min-height: 0;
-}
-
-.eventItem {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    min-height: 52px;
-    width: 100%;
-}
-
-.eventInfo {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
 .eventName {
     font-size: 13px;
     font-weight: 500;
@@ -78,12 +46,6 @@
     line-height: 1.2;
 }
 
-.eventActions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-}
-
 /* Edit Panel Specific Styles */
 
 .editRoot {
@@ -99,7 +61,7 @@
     display: flex;
     gap: 1em;
     align-items: center;
-    border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.08));
+    border-bottom: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
 }
 
 .editorFields {
@@ -128,28 +90,12 @@
     margin-bottom: 4px;
 }
 
-.col4 {
-    grid-column: span 4;
-}
-
-.col8 {
-    grid-column: span 8;
-}
-
-.col3 {
-    grid-column: span 3;
-}
-
-.col1 {
-    grid-column: span 1;
-}
-
 .parametersSection {
     display: flex;
     flex-direction: column;
     gap: 0;
-    border-top: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.1));
-    background: var(--vscode-sideBar-background, var(--colors-bgPanel));
+    border-top: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.1));
+    background: var(--ds-sidebar-bg, var(--colors-bgPanel));
     flex: 1;
     min-height: 0;
 }
@@ -159,7 +105,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.08));
+    border-bottom: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
 }
 
 .parametersTitle {
@@ -188,16 +134,12 @@
     gap: 16px;
 }
 
-.parametersGridHeader {
-    display: none;
-}
-
 .parameterRow {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 12px;
-    background: var(--vscode-input-background, rgba(255, 255, 255, 0.05));
+    background: var(--ds-input-bg, rgba(255, 255, 255, 0.05));
     border-radius: 4px;
     position: relative;
 }
@@ -227,7 +169,7 @@
 
 .editorActions {
     padding: 12px 16px;
-    border-top: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.08));
+    border-top: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
 }
 
 .actions {

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

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { useStore } from 'zustand';
+import { VscodeButton, VscodeTextfield } from '@vscode-elements/react-elements';
+import { Trash } from 'iconoir-react';
+import { useActiveGraph } from '@/system/provider';
+import type { GraphSession } from '@/system/graphSession';
+import { BasePanel } from '../base';
+import { SectionTitle } from '../common/SectionTitle';
+
+export function GraphPropertiesPanel() {
+  const session = useActiveGraph();
+  if (!session) {
+    return (
+      <BasePanel>
+        <div style={{ padding: 12, opacity: 0.7 }}>No graph open.</div>
+      </BasePanel>
+    );
+  }
+  return <GraphProperties session={session} />;
+}
+
+const GraphProperties: React.FC<{ session: GraphSession }> = ({ session }) => {
+  const name = useStore(session.metaStore, (s) => s.name);
+  const metadata = useStore(session.metaStore, (s) => s.metadata);
+  const { setName, setMetadataValue, removeMetadataKey, setMetadata } =
+    session.metaStore.getState();
+
+  const entries = Object.entries(metadata);
+
+  const renameKey = (oldKey: string, newKey: string, value: any) => {
+    const trimmed = newKey.trim();
+    if (trimmed === oldKey) return;
+    const next = { ...session.metaStore.getState().metadata };
+    delete next[oldKey];
+    if (trimmed) next[trimmed] = value;
+    setMetadata(next);
+  };
+
+  const addEntry = () => {
+    const current = session.metaStore.getState().metadata;
+    let i = 1;
+    let key = `key${i}`;
+    while (key in current) key = `key${++i}`;
+    setMetadataValue(key, '');
+  };
+
+  return (
+    <BasePanel>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0
+        }}
+      >
+        <SectionTitle>Name</SectionTitle>
+        <VscodeTextfield
+          value={name}
+          placeholder="Graph name"
+          style={{ width: '100%' }}
+          onChange={(e: any) => setName(String(e?.target?.value ?? ''))}
+        />
+
+        <SectionTitle>Metadata</SectionTitle>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {entries.length === 0 && (
+            <div
+              style={{
+                fontSize: 'var(--fs-desc, 0.72rem)',
+                color: 'var(--ds-fg-muted)'
+              }}
+            >
+              No metadata. Add a key/value pair below.
+            </div>
+          )}
+          {entries.map(([key, value]) => (
+            <MetadataRow
+              key={key}
+              entryKey={key}
+              value={value}
+              onRename={renameKey}
+              onValueChange={(v) => setMetadataValue(key, v)}
+              onRemove={() => removeMetadataKey(key)}
+            />
+          ))}
+          <VscodeButton secondary onClick={addEntry}>
+            + Add metadata
+          </VscodeButton>
+        </div>
+      </div>
+    </BasePanel>
+  );
+};
+
+const MetadataRow: React.FC<{
+  entryKey: string;
+  value: any;
+  onRename: (oldKey: string, newKey: string, value: any) => void;
+  onValueChange: (value: string) => void;
+  onRemove: () => void;
+}> = ({ entryKey, value, onRename, onValueChange, onRemove }) => {
+  // Key edits commit on blur (renaming changes identity); value edits are live.
+  const [draftKey, setDraftKey] = useState(entryKey);
+
+  return (
+    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      <VscodeTextfield
+        value={draftKey}
+        placeholder="key"
+        style={{ flex: 1, minWidth: 0 }}
+        onChange={(e: any) => setDraftKey(String(e?.target?.value ?? ''))}
+        onBlur={() => onRename(entryKey, draftKey, value)}
+      />
+      <VscodeTextfield
+        value={String(value ?? '')}
+        placeholder="value"
+        style={{ flex: 1, minWidth: 0 }}
+        onChange={(e: any) => onValueChange(String(e?.target?.value ?? ''))}
+      />
+      <VscodeButton secondary iconOnly title="Remove" onClick={onRemove}>
+        <Trash />
+      </VscodeButton>
+    </div>
+  );
+};

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { VscodeBadge, VscodeDivider } from '@vscode-elements/react-elements';
 import { useStore } from 'zustand';
-import { useSystem } from '@/system/provider';
+import { useActiveGraph } from '@/system/provider';
 import styles from './styles.module.css';
 import { BasePanel } from '../base';
 
 export function HistoryPanel() {
-  const system = useSystem();
+  const system = useActiveGraph()!;
   const history = useStore(system.undoManager.store, (s) => s.history);
   const redoStack = useStore(system.undoManager.store, (s) => s.redoStack);
 

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

@@ -1,12 +1,3 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    height: 100%;
-    padding: 20px;
-    color: inherit;
-}
-
 .sectionTitle {
     display: flex;
     align-items: center;

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

@@ -1,13 +1,3 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-    width: 100%;
-    padding: 0.5rem;
-    overflow: auto;
-}
-
 .content {
     display: flex;
     flex-direction: column;
@@ -52,9 +42,9 @@
 
 .keyBadge {
     font-size: 0.875rem;
-    font-family: var(--vscode-editor-font-family);
-    background: var(--vscode-editorWidget-background);
-    border: 1px solid var(--vscode-editorWidget-border);
+    font-family: var(--ds-font-mono);
+    background: var(--ds-widget-bg);
+    border: 1px solid var(--ds-border-subtle);
     padding: 0.25rem 0.5rem;
     border-radius: var(--component-radii-sm);
     word-break: break-all;

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

@@ -107,10 +107,9 @@ export const KeymapsPanel = () => {
               <VscodeTableRow key={action}>
                 <VscodeTableCell className={styles.actionCell}>
                   <div className={styles.actionInfo}>
-                    <div className={styles.actionLabel}>
+                    <div className={styles.actionLabel} title={action}>
                       {getDescription(action)}
                     </div>
-                    <code className={styles.actionId}>{action}</code>
                   </div>
                 </VscodeTableCell>
 

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

@@ -1,7 +1,11 @@
 import { BasePanel } from '@/components/panels/base';
 import { layerId } from '@/annotations';
-import { useSystem } from '@/system/provider';
-import { VscodeButton, VscodeDivider } from '@vscode-elements/react-elements';
+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';
@@ -25,7 +29,7 @@ const clampOpacityFromPercent = (percent: number): number => {
 };
 
 export function LayersPanel() {
-  const system = useSystem();
+  const system = useActiveGraph()!;
 
   const layers = useStore(system.layerStore, (state) => state.layers);
   const nodeLayers = useStore(system.layerStore, (state) => state.nodeLayers);
@@ -180,18 +184,19 @@ export function LayersPanel() {
                 </div>
 
                 <div className={styles.controls}>
-                  <label className={styles.checkboxLabel}>
-                    <input
-                      type="checkbox"
-                      checked={layer.visible}
-                      onChange={(event) =>
-                        system.layerStore
-                          .getState()
-                          .setLayerVisibility(layer.id, event.target.checked)
-                      }
-                    />
-                    Visible
-                  </label>
+                  <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

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

@@ -18,7 +18,7 @@
 
 .subtitle {
     font-size: 0.85rem;
-    color: var(--vscode-descriptionForeground);
+    color: var(--ds-fg-muted);
 }
 
 .addRow {
@@ -28,9 +28,9 @@
 
 .nameInput {
     flex: 1;
-    background: var(--vscode-input-background);
-    color: var(--vscode-input-foreground);
-    border: 1px solid var(--vscode-input-border);
+    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;
 }
@@ -43,7 +43,7 @@
 }
 
 .row {
-    border: 1px solid var(--vscode-panel-border);
+    border: 1px solid var(--ds-panel-border);
     border-radius: 6px;
     padding: 0.6rem;
     display: flex;
@@ -60,21 +60,21 @@
 .layerName {
     flex: 1;
     background: transparent;
-    color: var(--vscode-editor-foreground);
+    color: var(--ds-editor-fg);
     border: 1px solid transparent;
     border-radius: 4px;
     padding: 0.2rem 0.3rem;
 }
 
 .layerName:focus {
-    border-color: var(--vscode-focusBorder);
+    border-color: var(--ds-focus-border);
     outline: none;
 }
 
 .badge {
     font-size: 0.7rem;
-    color: var(--vscode-badge-foreground);
-    background: var(--vscode-badge-background);
+    color: var(--ds-badge-fg);
+    background: var(--ds-badge-bg);
     border-radius: 99px;
     padding: 0.1rem 0.45rem;
 }
@@ -87,9 +87,6 @@
 }
 
 .checkboxLabel {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
     font-size: 0.85rem;
 }
 

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

@@ -42,7 +42,7 @@ export function LegendPanel() {
 
   return (
     <BasePanel>
-      <div className="flex flex-col gap-1">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
         <VscodeTable zebra columns={['50', '50', 'auto']}>
           <VscodeTableHeader>
             <VscodeTableHeaderCell>Color</VscodeTableHeaderCell>

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

@@ -5,7 +5,7 @@
     flex-direction: column;
     gap: 8px;
     padding-bottom: 8px;
-    border-bottom: 1px solid var(--vscode-panel-border);
+    border-bottom: 1px solid var(--ds-panel-border);
 }
 
 .searchBar {
@@ -36,10 +36,16 @@
     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(--vscode-inputOption-activeForeground, #ffffff);
-    background-color: var(--vscode-inputOption-activeBackground, rgba(53, 116, 240, 0.25));
-    outline: 1px solid var(--vscode-inputOption-activeBorder, transparent);
+    color: var(--ds-focus-border, #3794ff);
 }
 
 /* ---- Level filter chips ---------------------------------------------- */
@@ -73,13 +79,13 @@
 }
 
 .levelChip:focus-visible {
-    outline: 1px solid var(--vscode-focusBorder);
+    outline: 1px solid var(--ds-focus-border);
     outline-offset: 1px;
 }
 
 .levelOff {
     background-color: transparent;
-    color: var(--vscode-descriptionForeground, #9d9d9d);
+    color: var(--ds-fg-muted, #9d9d9d);
     opacity: 0.6;
 }
 
@@ -114,7 +120,7 @@
     font-size: 0.72rem;
     line-height: 1;
     align-self: center;
-    color: var(--vscode-descriptionForeground, #9d9d9d);
+    color: var(--ds-fg-muted, #9d9d9d);
     font-variant-numeric: tabular-nums;
 }
 
@@ -134,15 +140,15 @@
     justify-content: center;
     height: 100%;
     min-height: 64px;
-    color: var(--vscode-descriptionForeground, #9d9d9d);
+    color: var(--ds-fg-muted, #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);
+    font-family: var(--ds-font-mono, monospace);
+    font-size: var(--ds-font-mono-size, 12px);
     line-height: 18px;
 }
 
@@ -158,16 +164,16 @@
 }
 
 .row:hover {
-    background-color: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06));
+    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(--vscode-editorWarning-foreground, #cca700) 60%, transparent);
+    border-left-color: color-mix(in srgb, var(--ds-warning, #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);
+    border-left-color: var(--ds-error, #f48771);
+    background-color: color-mix(in srgb, var(--ds-error, #f48771) 8%, transparent);
 }
 
 .rowIcon {
@@ -186,7 +192,7 @@
 
 .rowTime {
     flex: none;
-    color: var(--vscode-descriptionForeground, #9d9d9d);
+    color: var(--ds-fg-muted, #9d9d9d);
     opacity: 0.85;
     font-variant-numeric: tabular-nums;
 }
@@ -194,19 +200,19 @@
 .rowMessage {
     flex: 1;
     min-width: 0;
-    color: var(--vscode-foreground);
+    color: var(--ds-fg);
 }
 
 .row[data-severity='error'] .rowMessage {
-    color: var(--vscode-editorError-foreground, #f48771);
+    color: var(--ds-error, #f48771);
 }
 
 .row[data-severity='verbose'] .rowMessage {
-    color: var(--vscode-descriptionForeground, #9d9d9d);
+    color: var(--ds-fg-muted, #9d9d9d);
 }
 
 .highlight {
-    background-color: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
+    background-color: var(--ds-find-match-bg, rgba(234, 92, 0, 0.33));
     color: inherit;
     border-radius: 2px;
 }

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

@@ -14,7 +14,7 @@ import {
   ClockSolid
 } from 'iconoir-react';
 import { VscodeTextfield } from '@vscode-elements/react-elements';
-import { useSystem } from '@/system/provider';
+import { useActiveGraph } from '@/system/provider';
 import { useStore } from 'zustand';
 import clsx from 'clsx';
 import { BasePanel } from '../base';
@@ -25,10 +25,10 @@ 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)'
+  verbose: 'var(--ds-terminal-cyan, #29b8db)',
+  info: 'var(--ds-chart-blue, #3794ff)',
+  warning: 'var(--ds-warning, #cca700)',
+  error: 'var(--ds-error, #f48771)'
 };
 
 const IconType: Record<LogSeverity, React.ReactNode> = {
@@ -66,7 +66,7 @@ const renderMessage = (message: string, term: string): React.ReactNode => {
 };
 
 export function LogsPanel() {
-  const system = useSystem();
+  const system = useActiveGraph()!;
   const logs = useStore(system.logsStore, (x) => x.logs);
   const clearLogs = useStore(system.logsStore, (x) => x.clear);
 
@@ -161,7 +161,7 @@ export function LogsPanel() {
   const copyToClipboard = useCallback(
     (text: string) => {
       navigator.clipboard.writeText(text).then(() => {
-        system.notifications.success('Copied to clipboard');
+        system.editor.notifications.success('Copied to clipboard');
       });
     },
     [system]

package/src/components/panels/nodeInputs/InputsGroup.tsx

@@ -43,6 +43,7 @@ export const InputsGroup: React.FC<InputsGroupProps> = ({
           <div key={input.name} className={styles.inputWithToggle}>
             {onToggleInput && (
               <Icon
+                className={styles.inputToggle}
                 onClick={() => onToggleInput(input.name)}
                 title={isHidden ? 'Show input on node' : 'Hide input on node'}
               >

package/src/components/panels/nodeInputs/NodeSettings.tsx

@@ -40,7 +40,7 @@ export const NodeSettings: React.FC<NodeSettingsProps> = ({
         <VscodeDivider />
 
         <div className={styles.descriptionSection}>
-          <div className={styles.descriptionTitle}>Description</div>
+          <div className={styles.subTitle}>Description</div>
           <VscodeTextarea
             placeholder="No description provided."
             className={styles.descriptionTextarea}
@@ -62,7 +62,7 @@ export const NodeSettings: React.FC<NodeSettingsProps> = ({
         <VscodeDivider />
 
         <div className={styles.annotationsSection}>
-          <div className={styles.annotationsTitle}>Annotations</div>
+          <div className={styles.subTitle}>Annotations</div>
           {annotations == null ? (
             <div className={styles.annotationsEmpty}>No annotations.</div>
           ) : typeof annotations === 'string' ||

package/src/components/panels/nodeInputs/NodeTitleEditor.tsx

@@ -90,7 +90,7 @@ export const NodeTitleEditor: React.FC<NodeTitleEditorProps> = ({
             </button>
           )}
         </div>
-        <div className={styles.panelId}>{selectedNode.id}</div>
+        <div className={styles.panelId}>#{selectedNode.id}</div>
       </>
     );
   }