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

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { VscodeBadge, VscodeDivider } from '@vscode-elements/react-elements';
+import { useStore } from 'zustand';
+import { useActiveGraph } from '@/system/provider';
+import styles from './styles.module.css';
+import { BasePanel } from '../base';
+
+export function HistoryPanel() {
+  const system = useActiveGraph()!;
+  const history = useStore(system.undoManager.store, (s) => s.history);
+  const redoStack = useStore(system.undoManager.store, (s) => s.redoStack);
+
+  const historyNewestFirst = React.useMemo(
+    () => [...history].reverse(),
+    [history]
+  );
+
+  const Row = ({
+    kind,
+    index,
+    name
+  }: {
+    kind: 'undo' | 'redo';
+    index: number;
+    name: string;
+  }) => {
+    return (
+      <div
+        className={`${styles.row} ${kind === 'undo' ? styles.undo : styles.redo}`}
+        title={name}
+      >
+        <div className={styles.badgeCell}>
+          <VscodeBadge className={styles.kindBadge}>
+            {kind === 'undo' ? 'Undo' : 'Redo'}
+          </VscodeBadge>
+        </div>
+        <div className={styles.index}>{index}</div>
+        <div className={styles.name}>{name}</div>
+      </div>
+    );
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.sectionTitle}>
+        <div>Previous</div>
+        <VscodeBadge className={styles.countBadge}>
+          {history.length}
+        </VscodeBadge>
+      </div>
+
+      <div className={styles.list}>
+        {historyNewestFirst.map((entry, idx) => (
+          <Row
+            key={`${entry.name}-${idx}`}
+            kind="undo"
+            index={historyNewestFirst.length - idx}
+            name={entry.name}
+          />
+        ))}
+        {historyNewestFirst.length === 0 && (
+          <div className={styles.empty}>No previous actions</div>
+        )}
+      </div>
+
+      <div className={styles.now}>
+        <VscodeDivider />
+        <div className={styles.nowLabel}>Now</div>
+      </div>
+
+      <div className={styles.sectionTitle}>
+        <div>Future</div>
+        <VscodeBadge className={styles.countBadge}>
+          {redoStack.length}
+        </VscodeBadge>
+      </div>
+
+      {redoStack.length !== 0 && (
+        <div className={styles.list}>
+          {redoStack.map((entry, idx) => (
+            <Row
+              key={`${entry.name}-${idx}`}
+              kind="redo"
+              index={idx + 1}
+              name={entry.name}
+            />
+          ))}
+        </div>
+      )}
+    </BasePanel>
+  );
+}

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

@@ -0,0 +1,97 @@
+.sectionTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 0.85em;
+    color: rgba(255, 255, 255, 0.72);
+    user-select: none;
+}
+
+.countBadge {
+    font-variant-numeric: tabular-nums;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow: auto;
+    background: transparent;
+    padding: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    border-radius: 6px;
+}
+
+.row {
+    display: grid;
+    grid-template-columns: 76px 52px 1fr;
+    align-items: center;
+    column-gap: 12px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    cursor: default;
+}
+
+.row:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.undo {
+    border-left: 3px solid #f14c4c;
+}
+
+.redo {
+    border-left: 3px solid #73c991;
+}
+
+.badgeCell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+}
+
+.kindBadge {
+    flex: 0 0 auto;
+}
+
+.index {
+    font-size: 0.85em;
+    color: rgba(255, 255, 255, 0.72);
+    opacity: 0.9;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.empty {
+    padding: 10px;
+    font-size: 0.9em;
+    color: rgba(255, 255, 255, 0.72);
+    opacity: 0.9;
+}
+
+.now {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 6px 0;
+    user-select: none;
+}
+
+.nowLabel {
+    font-size: 0.8em;
+    color: rgba(255, 255, 255, 0.72);
+    text-align: center;
+}

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

@@ -0,0 +1,68 @@
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.header {
+    padding-bottom: 0.5rem;
+}
+
+.helpText {
+    font-size: 0.75rem;
+    opacity: 0.7;
+}
+
+.table {
+    width: 100%;
+}
+
+.actionCell {
+    width: 40%;
+}
+
+.actionInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.actionLabel {
+    font-weight: 500;
+}
+
+.actionId {
+    font-size: 0.75rem;
+    opacity: 0.6;
+}
+
+.keybindingCell {
+    width: 40%;
+}
+
+.keyBadge {
+    font-size: 0.875rem;
+    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;
+    display: inline-block;
+}
+
+.actionsCell {
+    width: 20%;
+    text-align: right;
+}
+
+.buttonGroup {
+    display: flex;
+    gap: 0.25rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.textfield {
+    width: 100%;
+}

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

@@ -0,0 +1,166 @@
+import { useSystem } from '@/system/provider';
+import {
+  VscodeButton,
+  VscodeLabel,
+  VscodeTextfield,
+  VscodeTable,
+  VscodeTableBody,
+  VscodeTableCell,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableRow
+} from '@vscode-elements/react-elements';
+import { useState } from 'react';
+import { useStore } from 'zustand';
+import styles from './index.module.css';
+import { BasePanel } from '../base';
+
+export const KeymapsPanel = () => {
+  const system = useSystem();
+  const keymap = useStore(system.hotKeyStore, (s) => s.keymap);
+  const descriptions = useStore(system.hotKeyStore, (s) => s.descriptions);
+  const register = useStore(system.hotKeyStore, (s) => s.register);
+
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+
+  const handleEdit = (action: string) => {
+    const current = keymap[action];
+    setEditingKey(action);
+    setEditValue(Array.isArray(current) ? current.join(', ') : current || '');
+  };
+
+  const handleSave = (action: string) => {
+    const trimmedValue = editValue.trim();
+    if (trimmedValue) {
+      // Parse the input - if it contains commas, treat as array
+      const newValue = trimmedValue.includes(',')
+        ? trimmedValue
+            .split(',')
+            .map((k) => k.trim())
+            .filter((k) => k.length > 0)
+        : trimmedValue;
+
+      register({
+        action,
+        trigger: newValue
+      });
+    }
+    setEditingKey(null);
+    setEditValue('');
+  };
+
+  const handleCancel = () => {
+    setEditingKey(null);
+    setEditValue('');
+  };
+
+  const handleReset = (action: string) => {
+    // Reset to default - you might want to store defaults separately
+    // For now, this just clears the binding
+    const confirmed = confirm(`Reset keybinding for ${action}?`);
+    if (confirmed) {
+      register({
+        action,
+        trigger: ''
+      });
+      setEditingKey(null);
+    }
+  };
+
+  const formatKeymap = (value: string | string[] | undefined): string => {
+    if (!value) {
+      return 'Not set';
+    }
+    if (Array.isArray(value)) {
+      return value.join(', ');
+    }
+    return value;
+  };
+
+  const getDescription = (action: string): string => {
+    return descriptions[action] || action;
+  };
+
+  // Get all actions from keymap
+  const actions = Object.keys(keymap).sort();
+
+  return (
+    <BasePanel>
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <VscodeLabel>Keyboard Shortcuts</VscodeLabel>
+          <span className={styles.helpText}>
+            Customize keyboard shortcuts for various actions. Use commas to
+            separate multiple key combinations.
+          </span>
+        </div>
+
+        <VscodeTable className={styles.table} zebra>
+          <VscodeTableHeader slot="header">
+            <VscodeTableHeaderCell>Command</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Key Binding</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Actions</VscodeTableHeaderCell>
+          </VscodeTableHeader>
+          <VscodeTableBody slot="body">
+            {actions.map((action) => (
+              <VscodeTableRow key={action}>
+                <VscodeTableCell className={styles.actionCell}>
+                  <div className={styles.actionInfo}>
+                    <div className={styles.actionLabel} title={action}>
+                      {getDescription(action)}
+                    </div>
+                  </div>
+                </VscodeTableCell>
+
+                <VscodeTableCell className={styles.keybindingCell}>
+                  {editingKey === action ? (
+                    <VscodeTextfield
+                      value={editValue}
+                      onChange={(e) => {
+                        const target = e.target as HTMLInputElement;
+                        setEditValue(target.value);
+                      }}
+                      placeholder="e.g., ctrl+k or ctrl+k, command+k"
+                      className={styles.textfield}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleSave(action);
+                        } else if (e.key === 'Escape') {
+                          handleCancel();
+                        }
+                      }}
+                      autoFocus
+                    />
+                  ) : (
+                    <span className={styles.keyBadge}>
+                      {formatKeymap(keymap[action])}
+                    </span>
+                  )}
+                </VscodeTableCell>
+
+                <VscodeTableCell className={styles.actionsCell}>
+                  {editingKey === action ? (
+                    <div className={styles.buttonGroup}>
+                      <VscodeButton onClick={() => handleSave(action)}>
+                        Save
+                      </VscodeButton>
+                      <VscodeButton onClick={handleCancel}>Cancel</VscodeButton>
+                      <VscodeButton onClick={() => handleReset(action)}>
+                        Reset
+                      </VscodeButton>
+                    </div>
+                  ) : (
+                    <VscodeButton onClick={() => handleEdit(action)}>
+                      Edit
+                    </VscodeButton>
+                  )}
+                </VscodeTableCell>
+              </VscodeTableRow>
+            ))}
+          </VscodeTableBody>
+        </VscodeTable>
+      </div>
+    </BasePanel>
+  );
+};