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

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

@@ -30,6 +30,7 @@ export const OutputsGroup: React.FC<OutputsGroupProps> = ({
           <div key={output.name} className={styles.inputWithToggle}>
             {onToggleOutput && (
               <Icon
+                className={styles.inputToggle}
                 onClick={() => onToggleOutput(output.name)}
                 title={isHidden ? 'Show output on node' : 'Hide output on node'}
               >
@@ -42,18 +43,7 @@ export const OutputsGroup: React.FC<OutputsGroupProps> = ({
                   <div className={styles.inputName} title={output.valueType}>
                     {output.name}
                   </div>
-                  <div className={styles.inputSubtext}>
-                    {output.connected ? 'Connected' : output.valueType}
-                  </div>
-                </div>
-                <div>
-                  {output.connected ? (
-                    <div className={styles.connectedMessage}>
-                      Socket is connected
-                    </div>
-                  ) : (
-                    <div className={styles.connectedMessage}>Not connected</div>
-                  )}
+                  <div className={styles.inputSubtext}>{output.valueType}</div>
                 </div>
               </div>
             </div>

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

@@ -7,17 +7,6 @@
     padding: 0.5rem;
 }
 
-.panelScrollable {
-    display: flex;
-    flex: 1 1 0%;
-    flex-direction: column;
-    gap: 0.5rem;
-    height: 100%;
-    margin-bottom: 0.25rem;
-    overflow: auto;
-    padding: 0.5rem;
-}
-
 .listGap1 {
     display: flex;
     flex-direction: column;
@@ -30,15 +19,6 @@
     gap: 0.5rem;
 }
 
-.stackCol {
-    display: flex;
-    flex-direction: column;
-}
-
-.cardPadding {
-    padding: 0.5rem;
-}
-
 .sectionTitle {
     font-size: 1.05em;
     font-weight: 600;
@@ -61,26 +41,30 @@
 }
 
 .emptyState {
-    font-size: 0.9em;
-    font-style: italic;
-    opacity: 0.7;
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
     text-align: center;
-    padding: 2rem;
+    padding: 2rem 1rem;
+    line-height: 1.4;
 }
 
 .panelTitle {
-    font-size: 1.05em;
-    text-align: center;
+    font-size: 0.95rem;
+    text-align: left;
     font-weight: 600;
     cursor: text;
     flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .panelTitleContainer {
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+    justify-content: flex-start;
+    gap: 0.4rem;
     position: relative;
 }
 
@@ -115,7 +99,7 @@
 }
 
 .infoButton:hover {
-    background: var(--vscode-button-secondaryBackground, #313131);
+    background: var(--ds-button-secondary-bg, #313131);
     opacity: 1 !important;
 }
 
@@ -138,10 +122,13 @@
 }
 
 .panelId {
-    font-size: 0.6em;
-    opacity: 0.5;
-    text-align: center;
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    opacity: 0.8;
+    text-align: left;
     font-weight: 400;
+    font-variant-numeric: tabular-nums;
+    margin-bottom: 0.25rem;
 }
 
 .toolbar {
@@ -149,10 +136,9 @@
 }
 
 .noInputs {
-    font-size: 0.9em;
-    font-style: italic;
-    opacity: 0.7;
-    padding: 0.75rem;
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    padding: 0.75rem 0.2em;
 }
 
 .stackColPadded {
@@ -162,34 +148,38 @@
 }
 
 .inputRow {
-    display: grid;
-    grid-template-columns: minmax(120px, 1fr) minmax(160px, 1fr);
-    align-items: center;
-    gap: 0.4em;
-    padding: 0.2em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.25rem 0.2em;
+}
+
+/* Control fills the row width below the label, VSCode-settings style */
+.inputRow > div:last-child {
+    width: 100%;
 }
 
 .inputMeta {
     display: flex;
-    flex-direction: column;
-    gap: 2px;
+    align-items: baseline;
+    gap: 0.4rem;
 }
 
 .inputName {
-    font-size: 0.9em;
+    font-size: var(--fs-label, 0.8rem);
     font-weight: 600;
     text-transform: capitalize;
 }
 
 .inputSubtext {
-    font-size: 0.75em;
-    opacity: 0.7;
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    opacity: 0.8;
 }
 
 .connectedMessage {
-    font-size: 0.85em;
-    font-style: italic;
-    opacity: 0.7;
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
 }
 
 .stackGap2Padded {
@@ -199,31 +189,59 @@
     padding: 0.2em;
 }
 
+/* Shared compact uppercase sub-section label for the Settings tab */
+.subTitle {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+}
+
 .settingsRow {
     display: flex;
     justify-content: space-between;
     gap: 0.4em;
+    font-size: var(--fs-label, 0.8rem);
 }
 
-.annotationsSection {
+.settingsRow > div:first-child {
+    color: var(--ds-fg-muted);
+}
+
+.settingsRow > div:last-child {
+    min-width: 0;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.descriptionSection {
     display: flex;
     flex-direction: column;
-    gap: 0.2em;
+    gap: 0.35rem;
 }
 
-.annotationsTitle {
-    font-size: 0.95em;
-    font-weight: 600;
+.descriptionTextarea {
+    width: 100%;
+}
+
+.annotationsSection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
 }
 
 .annotationsEmpty {
-    font-size: 0.85em;
-    font-style: italic;
-    opacity: 0.7;
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
 }
 
 .annotationsValue {
-    font-size: 0.85em;
+    font-size: var(--fs-desc, 0.72rem);
 }
 
 .annotationsList {
@@ -232,16 +250,16 @@
 }
 
 .annotationsListItem {
-    font-size: 0.85em;
+    font-size: var(--fs-desc, 0.72rem);
 }
 
 .annotationsPre {
     margin: 0;
-    padding: 0.2em;
+    padding: 0.5rem;
     border: 1px solid var(--color-neutral-stroke-subtle);
-    border-radius: 0.2em;
+    border-radius: var(--component-radii-sm, 4px);
     background: var(--color-neutral-background-strong);
-    font-size: 0.8em;
+    font-size: var(--fs-desc, 0.72rem);
     overflow: auto;
     white-space: pre-wrap;
     word-break: break-word;
@@ -249,11 +267,22 @@
 
 .panelHeader {
     display: flex;
-    justify-content: flex-end;
-    padding: 0.25rem 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem 0.2em;
+    margin-bottom: 0.25rem;
     border-bottom: 1px solid var(--color-neutral-stroke-subtle);
 }
 
+.panelHeaderLabel {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+}
+
 
 
 .inputWithToggle {
@@ -262,19 +291,14 @@
     gap: 0.25rem;
 }
 
-.visibilityToggle {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    font-size: 0.85em;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-    flex-shrink: 0;
-    margin-top: 0.2em;
+/* Per-input visibility toggle: subtle by default, full strength on row hover */
+.inputToggle {
+    opacity: 0.45;
+    transition: opacity 0.1s ease;
 }
 
-.visibilityToggle:hover {
+.inputWithToggle:hover .inputToggle,
+.inputToggle:focus-visible {
     opacity: 1;
 }
 

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { useSystem } from '@/system/provider';
+import { useActiveGraph, GraphProvider } from '@/system/provider';
 import {
   VscodeTabHeader,
   VscodeTabPanel,
@@ -27,8 +27,11 @@ import { EyeClosed, EyeSolid } from 'iconoir-react';
 import { Icon } from '@/components/primitives/icon';
 
 export function NodeInputsPanel() {
-  const system = useSystem();
-  const documentation = useStore(system.documentationStore, (x) => x.docs);
+  const system = useActiveGraph()!;
+  const documentation = useStore(
+    system.editor.documentationStore,
+    (x) => x.docs
+  );
 
   const {
     allSpecsJson,
@@ -182,7 +185,7 @@ export function NodeInputsPanel() {
       system.refStore.getState().setRef('selectedDocumentationType', nodeType);
 
       // Open documentation browser panel
-      const currentLayout = system.tabStore.getState().layout;
+      const currentLayout = system.editor.tabStore.getState().layout;
 
       // Close existing doc browser if open
       const existingPanel = findTabInLayout(currentLayout, 'docbrowser');
@@ -203,7 +206,7 @@ export function NodeInputsPanel() {
         height: 700
       });
 
-      system.tabStore.getState().setLayout(newLayout);
+      system.editor.tabStore.getState().setLayout(newLayout);
     },
     [system]
   );
@@ -262,6 +265,7 @@ export function NodeInputsPanel() {
           <VscodeTabPanel>
             {inputsWithControls.length > 0 && (
               <div className={styles.panelHeader}>
+                <span className={styles.panelHeaderLabel}>Inputs</span>
                 <Icon
                   onClick={handleToggleAllInputs}
                   title="Toggle all input visibility"
@@ -277,12 +281,17 @@ export function NodeInputsPanel() {
               </div>
             )}
 
-            {generatorNode && (
-              <SocketGenerators
-                generators={matchingGenerators}
-                generatorNode={generatorNode}
-              />
-            )}
+            {generatorNode &&
+              (
+                // Generators read per-graph state via useGraph(); bind them to the
+                // active session since this panel lives outside the graph tab.
+                <GraphProvider value={system}>
+                  <SocketGenerators
+                    generators={matchingGenerators}
+                    generatorNode={generatorNode}
+                  />
+                </GraphProvider>
+              )}
             {inputsWithControls.length === 0 &&
               matchingGenerators.length === 0 && (
                 <div className={styles.noInputs}>
@@ -302,6 +311,7 @@ export function NodeInputsPanel() {
           <VscodeTabPanel>
             {outputsWithInfo.length > 0 && (
               <div className={styles.panelHeader}>
+                <span className={styles.panelHeaderLabel}>Outputs</span>
                 <Icon
                   onClick={handleToggleAllOutputs}
                   title="Toggle all output visibility"

package/src/components/panels/nodeInputs/useNodeHandlers.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import type { IBehaveNode } from '@/types/nodes';
-import type { System } from '@/system';
+import type { GraphSession } from '@/system/graphSession';
 
 export function useNodeHandlers(
-  system: System,
+  system: GraphSession,
   selectedNode: IBehaveNode | null
 ) {
   const handleSaveTitle = useCallback(

package/src/components/panels/nodeInputs/useNodeInputsData.ts

@@ -3,9 +3,9 @@ import { useStore } from 'zustand';
 import { configureSockets } from '@/util/sockets';
 import { isHandleConnected } from '@/util/isHandleConnected';
 import type { IBehaveNode } from '@/types/nodes';
-import type { System } from '@/system';
+import type { GraphSession } from '@/system/graphSession';
 
-export function useNodeInputsData(system: System) {
+export function useNodeInputsData(system: GraphSession) {
   const selectedNodeId = useStore(
     system.selectionStore,
     (x) => x.selectedNodeId
@@ -14,13 +14,16 @@ export function useNodeInputsData(system: System) {
   const edges = useStore(system.edgeStore, (x) => x.edges);
   const controls = useStore(system.controlStore, (x) => x.controls);
   const defaultControl = useStore(system.controlStore, (x) => x.defaultControl);
-  const generators = useStore(system.socketGeneratorStore, (s) => s.generators);
+  const generators = useStore(
+    system.editor.socketGeneratorStore,
+    (s) => s.generators
+  );
   const generatorLocation = useStore(
-    system.systemSettings,
+    system.editor.systemSettings,
     (s) => s.generatorLocation
   );
 
-  const allSpecsJson = useStore(system.specStore, (x) => x.specs);
+  const allSpecsJson = useStore(system.editor.specStore, (x) => x.specs);
 
   const selectedNodes = useMemo(() => {
     return nodes.filter(
@@ -97,49 +100,26 @@ export function useNodeInputsData(system: System) {
   const outputsWithInfo = useMemo(() => {
     if (!selectedNode || !nodeSpec) return [];
 
-    const { pairs, valueOutputs } = configureSockets(
+    // `valueOutputs` already contains every non-flow output. (The `pairs` from
+    // configureSockets also carry these value outputs in their second slot ,
+    // iterating both would render each value output twice and collide on the
+    // React key, e.g. `provider` / `agent`.)
+    const { valueOutputs } = configureSockets(
       selectedNode.data.configuration,
       nodeSpec,
       selectedNode.data.dynamicPorts
     );
 
-    const outputs: Array<{
-      name: string;
-      valueType: string;
-      connected: boolean;
-    }> = [];
-
-    // Collect flow-paired outputs (non-flow)
-    for (const [, output] of pairs) {
-      if (output && output.valueType !== 'flow') {
-        outputs.push({
-          name: output.name,
-          valueType: output.valueType,
-          connected: isHandleConnected(
-            edges,
-            selectedNode.id,
-            output.name,
-            'source'
-          )
-        });
-      }
-    }
-
-    // Value-only outputs
-    for (const output of valueOutputs) {
-      outputs.push({
-        name: output.name,
-        valueType: output.valueType,
-        connected: isHandleConnected(
-          edges,
-          selectedNode.id,
-          output.name,
-          'source'
-        )
-      });
-    }
-
-    return outputs;
+    return valueOutputs.map((output) => ({
+      name: output.name,
+      valueType: output.valueType,
+      connected: isHandleConnected(
+        edges,
+        selectedNode.id,
+        output.name,
+        'source'
+      )
+    }));
   }, [selectedNode, nodeSpec, edges]);
 
   const matchingGenerators = useMemo(() => {

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { useSystem } from '@/system/provider';
+import { useActiveGraph } from '@/system/provider';
 import { useStore } from 'zustand';
 import { NodePicker } from '@/components/contextMenus/NodePicker';
 import type { ExtendedNodeSpecJSON } from '@/components/contextMenus/NodePicker';
@@ -12,9 +12,9 @@ import {
 } from '@/components/layoutController/utils';
 
 export function NodePickerPanel() {
-  const sys = useSystem();
-  const specJson = useStore(sys.specStore, (x) => x.specs);
-  const documentation = useStore(sys.documentationStore, (x) => x.docs);
+  const sys = useActiveGraph()!;
+  const specJson = useStore(sys.editor.specStore, (x) => x.specs);
+  const documentation = useStore(sys.editor.documentationStore, (x) => x.docs);
   const reactflowRef = useStore(sys.refStore, (x) => x.refs.reactflow);
   const screenPosition = useStore(
     sys.refStore,
@@ -32,9 +32,9 @@ export function NodePickerPanel() {
   // For now, we'll use undefined which means no filtering
   const nodePickFilters = undefined;
   const closeNodePicker = useCallback(() => {
-    const currentLayout = sys.tabStore.getState().layout;
+    const currentLayout = sys.editor.tabStore.getState().layout;
     const newLayout = removeTabFromLayout(currentLayout, 'nodepicker');
-    sys.tabStore.getState().setLayout(newLayout);
+    sys.editor.tabStore.getState().setLayout(newLayout);
   }, [sys]);
 
   const handleShowDocumentation = useCallback(
@@ -43,7 +43,7 @@ export function NodePickerPanel() {
       sys.refStore.getState().setRef('selectedDocumentationType', nodeType);
 
       // Open documentation browser panel
-      const currentLayout = sys.tabStore.getState().layout;
+      const currentLayout = sys.editor.tabStore.getState().layout;
 
       // Close existing doc browser if open
       const existingPanel = findTabInLayout(currentLayout, 'docbrowser');
@@ -64,7 +64,7 @@ export function NodePickerPanel() {
         height: 700
       });
 
-      sys.tabStore.getState().setLayout(newLayout);
+      sys.editor.tabStore.getState().setLayout(newLayout);
     },
     [sys]
   );

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

@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--vscode-panel-border);
+  border-bottom: 1px solid var(--ds-panel-border);
 }
 
 .title {
@@ -20,7 +20,7 @@
 }
 
 .count {
-  color: var(--vscode-descriptionForeground);
+  color: var(--ds-fg-muted);
   font-size: 0.9rem;
 }
 
@@ -35,14 +35,14 @@
 
 .idCell code {
   font-size: 0.85rem;
-  color: var(--vscode-textPreformat-foreground);
-  background-color: var(--vscode-textCodeBlock-background);
+  color: var(--ds-preformat-fg);
+  background-color: var(--ds-code-bg);
   padding: 0.125rem 0.375rem;
   border-radius: 3px;
 }
 
 .groupCell {
-  color: var(--vscode-descriptionForeground);
+  color: var(--ds-fg-muted);
   font-size: 0.9rem;
 }
 
@@ -54,8 +54,8 @@
 .badge {
   display: inline-block;
   padding: 0.125rem 0.5rem;
-  background-color: var(--vscode-badge-background);
-  color: var(--vscode-badge-foreground);
+  background-color: var(--ds-badge-bg);
+  color: var(--ds-badge-fg);
   border-radius: 10px;
   font-size: 0.75rem;
   font-weight: 500;

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

@@ -1,9 +1,3 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
 .searchGroup {
     display: flex;
     flex-direction: column;
@@ -19,48 +13,4 @@
 
 .fullWidth {
     width: 100%;
-}
-
-.resultsContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin-top: 8px;
-}
-
-.resultsList {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    max-height: 400px;
-    overflow-y: auto;
-    border: 1px solid var(--vscode-panel-border);
-    border-radius: 4px;
-    padding: 8px;
-}
-
-.resultItem {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    cursor: pointer;
-    border: 1px solid var(--vscode-panel-border);
-    border-radius: 4px;
-    background-color: var(--vscode-list-hoverBackground);
-    padding: 8px;
-    transition: all 0.2s;
-}
-
-.resultItem:hover {
-    background-color: var(--vscode-list-activeSelectionBackground);
-}
-
-.resultId {
-    font-weight: bold;
-    font-size: 0.9em;
-}
-
-.resultType {
-    font-size: 0.8em;
-    opacity: 0.7;
 }

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

@@ -11,7 +11,7 @@ import {
   VscodeCollapsible,
   VscodeBadge
 } from '@vscode-elements/react-elements';
-import { useRefFromStore, useSystem } from '@/system';
+import { useRefFromStore, useActiveGraph } from '@/system';
 import type { Node } from 'reactflow';
 import { Search } from 'iconoir-react';
 import Fuse from 'fuse.js';
@@ -36,7 +36,7 @@ export const SearchPanel = () => {
   const [nodeType, setNodeType] = React.useState('');
   const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
 
-  const sys = useSystem();
+  const sys = useActiveGraph()!;
   const graphNodes = useStore(sys.nodeStore, (s) => s.nodes);
   const reactflow = useRefFromStore(sys.refStore, 'reactflow');