claude-code-swarm 0.3.2 → 0.3.4

package/references/openteams/editor/src/components/inspector/RoleInspector.tsx

@@ -1,508 +0,0 @@
-import { useState, useCallback } from 'react';
-import { useConfigStore } from '../../stores/config-store';
-import { useCanvasStore } from '../../stores/canvas-store';
-import { useHistoryStore } from '../../stores/history-store';
-import type { RoleNodeData, SubscriptionSummary } from '../../types/editor';
-import { rebuildDerivedEdges } from '../../lib/rebuild-edges';
-
-interface Props {
-  nodeId: string;
-  data: RoleNodeData;
-}
-
-type Tab = 'identity' | 'communication' | 'capabilities' | 'prompts';
-
-export function RoleInspector({ nodeId, data }: Props) {
-  const [activeTab, setActiveTab] = useState<Tab>('identity');
-  const configStore = useConfigStore();
-  const role = configStore.roles.get(data.roleName);
-  const pushSnapshot = useHistoryStore(s => s.pushSnapshot);
-
-  const updateRole = useCallback((updates: Record<string, unknown>) => {
-    if (!role) return;
-    pushSnapshot();
-    const updated = { ...role, ...updates };
-    useConfigStore.getState().setRole(data.roleName, updated);
-    // Update node data to match
-    useCanvasStore.getState().updateNodeData(nodeId, {
-      ...updates,
-      displayName: updates.displayName ?? data.displayName,
-      description: updates.description ?? data.description,
-      capabilities: updates.capabilities ?? data.capabilities,
-    });
-  }, [role, data, nodeId, pushSnapshot]);
-
-  if (!role) return <div style={panelStyle}>Role not found</div>;
-
-  return (
-    <div data-testid="role-inspector" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Header */}
-      <div data-testid="role-inspector-header" style={{
-        padding: '12px',
-        borderBottom: '1px solid var(--color-border)',
-        fontWeight: 600,
-        fontSize: '14px',
-        color: 'var(--color-text)',
-      }}>
-        Role: {data.roleName}
-      </div>
-
-      {/* Tabs */}
-      <div style={{
-        display: 'flex',
-        borderBottom: '1px solid var(--color-border)',
-      }}>
-        {(['identity', 'communication', 'capabilities', 'prompts'] as Tab[]).map(tab => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            data-testid={`role-tab-${tab}`}
-            style={{
-              flex: 1,
-              padding: '8px 4px',
-              fontSize: '13px',
-              background: 'none',
-              border: 'none',
-              borderBottom: activeTab === tab ? '2px solid var(--color-accent)' : '2px solid transparent',
-              color: activeTab === tab ? 'var(--color-text)' : 'var(--color-text-muted)',
-              cursor: 'pointer',
-              fontWeight: activeTab === tab ? 600 : 400,
-              textTransform: 'capitalize',
-            }}
-          >
-            {tab}
-          </button>
-        ))}
-      </div>
-
-      {/* Content */}
-      <div style={{ flex: 1, overflow: 'auto', padding: '12px' }}>
-        {activeTab === 'identity' && (
-          <IdentityTab role={role} data={data} nodeId={nodeId} updateRole={updateRole} />
-        )}
-        {activeTab === 'communication' && (
-          <CommunicationTab data={data} />
-        )}
-        {activeTab === 'capabilities' && (
-          <CapabilitiesTab role={role} data={data} updateRole={updateRole} />
-        )}
-        {activeTab === 'prompts' && (
-          <PromptsTab role={role} updateRole={updateRole} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function IdentityTab({ role, data, nodeId, updateRole }: {
-  role: { name: string; displayName: string; description: string; model?: string; extends?: string };
-  data: RoleNodeData;
-  nodeId: string;
-  updateRole: (u: Record<string, unknown>) => void;
-}) {
-  const configStore = useConfigStore();
-  const pushSnapshot = useHistoryStore(s => s.pushSnapshot);
-
-  const handlePositionChange = (pos: 'root' | 'companion' | 'spawned') => {
-    pushSnapshot();
-    if (pos === 'root') {
-      configStore.setTopologyRoot(data.roleName);
-      // Remove from companions if it was there
-      configStore.setTopologyCompanions(
-        configStore.topologyCompanions.filter(c => c !== data.roleName)
-      );
-    } else if (pos === 'companion') {
-      if (configStore.topologyRoot === data.roleName) {
-        configStore.setTopologyRoot('');
-      }
-      if (!configStore.topologyCompanions.includes(data.roleName)) {
-        configStore.setTopologyCompanions([...configStore.topologyCompanions, data.roleName]);
-      }
-    } else {
-      if (configStore.topologyRoot === data.roleName) {
-        configStore.setTopologyRoot('');
-      }
-      configStore.setTopologyCompanions(
-        configStore.topologyCompanions.filter(c => c !== data.roleName)
-      );
-    }
-    useCanvasStore.getState().updateNodeData(nodeId, { topologyPosition: pos });
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      <Field label="Name">
-        <input style={{ ...inputStyle, opacity: 0.6 }} value={data.roleName} readOnly data-testid="role-name" />
-      </Field>
-      <Field label="Display Name">
-        <input
-          style={inputStyle}
-          value={role.displayName}
-          onChange={e => updateRole({ displayName: e.target.value })}
-          data-testid="role-display-name"
-        />
-      </Field>
-      <Field label="Description">
-        <textarea
-          style={{ ...inputStyle, minHeight: '60px', resize: 'vertical' }}
-          value={role.description}
-          onChange={e => updateRole({ description: e.target.value })}
-          data-testid="role-description"
-        />
-      </Field>
-      <Field label="Model">
-        <select
-          style={inputStyle}
-          value={data.model || ''}
-          data-testid="role-model"
-          onChange={e => {
-            pushSnapshot();
-            const model = e.target.value || undefined;
-            useCanvasStore.getState().updateNodeData(nodeId, { model });
-            useConfigStore.getState().setRoleModel(data.roleName, model);
-          }}
-        >
-          <option value="">— default —</option>
-          <option value="sonnet">sonnet</option>
-          <option value="opus">opus</option>
-          <option value="haiku">haiku</option>
-        </select>
-      </Field>
-      <Field label="Position">
-        <select
-          style={inputStyle}
-          value={data.topologyPosition}
-          onChange={e => handlePositionChange(e.target.value as 'root' | 'companion' | 'spawned')}
-          data-testid="role-position"
-        >
-          <option value="root">Root</option>
-          <option value="companion">Companion</option>
-          <option value="spawned">Spawned</option>
-        </select>
-      </Field>
-      <Field label="Extends">
-        <select
-          style={inputStyle}
-          value={role.extends || ''}
-          onChange={e => updateRole({ extends: e.target.value || undefined })}
-        >
-          <option value="">— none —</option>
-          {Array.from(useConfigStore.getState().roles.keys())
-            .filter(n => n !== data.roleName)
-            .map(n => <option key={n} value={n}>{n}</option>)
-          }
-        </select>
-      </Field>
-    </div>
-  );
-}
-
-function CommunicationTab({ data }: { data: RoleNodeData }) {
-  const configStore = useConfigStore();
-  const pushSnapshot = useHistoryStore(s => s.pushSnapshot);
-  const emissions = configStore.emissions[data.roleName] || [];
-  const subscriptions = configStore.subscriptions[data.roleName] || [];
-  const peerRoutes = configStore.peerRoutes;
-  const channels = configStore.channels;
-
-  const outRoutes = peerRoutes.filter(r => r.from === data.roleName);
-  const inRoutes = peerRoutes.filter(r => r.to === data.roleName);
-
-  const handleRemoveEmission = (signal: string) => {
-    pushSnapshot();
-    const updated = emissions.filter(s => s !== signal);
-    useConfigStore.getState().setEmissions(data.roleName, updated);
-    rebuildDerivedEdges();
-    useCanvasStore.getState().updateNodeData(`role-${data.roleName}`, { emits: updated });
-  };
-
-  const handleAddEmission = () => {
-    const signal = prompt('Signal name (UPPER_CASE):');
-    if (!signal) return;
-    pushSnapshot();
-    const updated = [...emissions, signal];
-    useConfigStore.getState().setEmissions(data.roleName, updated);
-    rebuildDerivedEdges();
-    useCanvasStore.getState().updateNodeData(`role-${data.roleName}`, { emits: updated });
-  };
-
-  const handleRemoveSubscription = (index: number) => {
-    pushSnapshot();
-    const updated = subscriptions.filter((_, i) => i !== index);
-    useConfigStore.getState().setSubscriptions(data.roleName, updated);
-    rebuildDerivedEdges();
-    const subs = updated.map(s => ({ channel: s.channel, signals: s.signals || ('all' as const) }));
-    useCanvasStore.getState().updateNodeData(`role-${data.roleName}`, { subscribesTo: subs });
-  };
-
-  const handleAddSubscription = () => {
-    const channelNames = Object.keys(channels);
-    if (channelNames.length === 0) {
-      alert('No channels defined. Create a channel first.');
-      return;
-    }
-    const channel = prompt(`Channel name (${channelNames.join(', ')}):`);
-    if (!channel || !channels[channel]) return;
-    pushSnapshot();
-    const updated = [...subscriptions, { channel }];
-    useConfigStore.getState().setSubscriptions(data.roleName, updated);
-    rebuildDerivedEdges();
-    const subs = updated.map(s => ({ channel: s.channel, signals: s.signals || ('all' as const) }));
-    useCanvasStore.getState().updateNodeData(`role-${data.roleName}`, { subscribesTo: subs });
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {/* Emissions */}
-      <div>
-        <div style={sectionLabel}>Emits</div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-          {emissions.map(sig => (
-            <span key={sig} style={tagStyle}>
-              {sig}
-              <button onClick={() => handleRemoveEmission(sig)} style={tagRemoveBtn}>{'\u00D7'}</button>
-            </span>
-          ))}
-          <button onClick={handleAddEmission} style={addBtnStyle}>+</button>
-        </div>
-      </div>
-
-      {/* Subscriptions */}
-      <div>
-        <div style={sectionLabel}>Subscribes to</div>
-        {subscriptions.map((sub, i) => (
-          <div key={i} style={{ fontSize: '13px', padding: '4px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <span>
-              <strong>{sub.channel}</strong>
-              {sub.signals ? ` (${sub.signals.join(', ')})` : ' (all)'}
-            </span>
-            <button onClick={() => handleRemoveSubscription(i)} style={tagRemoveBtn}>{'\u00D7'}</button>
-          </div>
-        ))}
-        <button onClick={handleAddSubscription} style={{ ...addBtnStyle, marginTop: '4px' }}>+ Subscription</button>
-      </div>
-
-      {/* Peer Routes */}
-      <div>
-        <div style={sectionLabel}>Peer Routes (outgoing)</div>
-        {outRoutes.length === 0 && <div style={emptyStyle}>None</div>}
-        {outRoutes.map((r, i) => (
-          <div key={i} style={{ fontSize: '13px', padding: '2px 0', color: 'var(--color-text-secondary)' }}>
-            {'\u2192'} {r.to} via {r.via} {r.signals?.length ? `[${r.signals.join(', ')}]` : ''}
-          </div>
-        ))}
-        <button
-          onClick={() => {
-            const allRoles = Array.from(useConfigStore.getState().roles.keys()).filter(r => r !== data.roleName);
-            if (allRoles.length === 0) { alert('No other roles to route to.'); return; }
-            const to = prompt(`Target role (${allRoles.join(', ')}):`);
-            if (!to || !useConfigStore.getState().roles.has(to)) return;
-            pushSnapshot();
-            const route = { from: data.roleName, to, via: 'direct' as const, signals: [] };
-            useConfigStore.getState().addPeerRoute(route);
-            // Add peer route edge to canvas
-            useCanvasStore.getState().addEdge({
-              id: `peer-${data.roleName}-${to}-${Date.now()}`,
-              source: `role-${data.roleName}`,
-              target: `role-${to}`,
-              type: 'peer-route',
-              data: { kind: 'peer-route', signals: [], via: 'direct' },
-            });
-            // Update route counts on node
-            const newOutCount = useConfigStore.getState().peerRoutes.filter(r2 => r2.from === data.roleName).length;
-            useCanvasStore.getState().updateNodeData(`role-${data.roleName}`, { peerRoutesOut: newOutCount });
-            const newInCount = useConfigStore.getState().peerRoutes.filter(r2 => r2.to === to).length;
-            useCanvasStore.getState().updateNodeData(`role-${to}`, { peerRoutesIn: newInCount });
-          }}
-          style={{ ...addBtnStyle, marginTop: '4px' }}
-        >
-          + Add Route
-        </button>
-      </div>
-      <div>
-        <div style={sectionLabel}>Peer Routes (incoming)</div>
-        {inRoutes.length === 0 && <div style={emptyStyle}>None</div>}
-        {inRoutes.map((r, i) => (
-          <div key={i} style={{ fontSize: '13px', padding: '2px 0', color: 'var(--color-text-secondary)' }}>
-            {'\u2190'} {r.from} via {r.via} {r.signals?.length ? `[${r.signals.join(', ')}]` : ''}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function CapabilitiesTab({ role, data, updateRole }: {
-  role: { capabilities: string[]; extends?: string };
-  data: RoleNodeData;
-  updateRole: (u: Record<string, unknown>) => void;
-}) {
-  const configStore = useConfigStore();
-  const pushSnapshot = useHistoryStore(s => s.pushSnapshot);
-
-  const handleRemoveCap = (cap: string) => {
-    updateRole({ capabilities: role.capabilities.filter(c => c !== cap) });
-  };
-
-  const handleAddCap = () => {
-    const cap = prompt('Capability name:');
-    if (!cap) return;
-    updateRole({ capabilities: [...role.capabilities, cap] });
-  };
-
-  const allRoles = Array.from(configStore.roles.keys());
-  const spawnRules = configStore.spawnRules[data.roleName] || [];
-
-  const handleToggleSpawn = (target: string) => {
-    pushSnapshot();
-    const current = configStore.spawnRules[data.roleName] || [];
-    const updated = current.includes(target)
-      ? current.filter(r => r !== target)
-      : [...current, target];
-    configStore.setSpawnRules(data.roleName, updated);
-    useCanvasStore.getState().updateNodeData(`role-${data.roleName}`, { canSpawn: updated });
-    rebuildDerivedEdges();
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <div>
-        <div style={sectionLabel}>Capabilities</div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-          {role.capabilities.map(cap => (
-            <span key={cap} style={tagStyle}>
-              {cap}
-              <button onClick={() => handleRemoveCap(cap)} style={tagRemoveBtn}>{'\u00D7'}</button>
-            </span>
-          ))}
-          <button onClick={handleAddCap} style={addBtnStyle}>+</button>
-        </div>
-      </div>
-
-      <div>
-        <div style={sectionLabel}>Spawn Rules (can spawn)</div>
-        {allRoles.filter(r => r !== data.roleName).map(r => (
-          <label key={r} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px', padding: '2px 0', cursor: 'pointer' }}>
-            <input
-              type="checkbox"
-              checked={spawnRules.includes(r)}
-              onChange={() => handleToggleSpawn(r)}
-            />
-            {r}
-          </label>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function PromptsTab({ role, updateRole }: {
-  role: { promptContent?: string; additionalPrompts?: { name: string; content: string }[] };
-  updateRole: (u: Record<string, unknown>) => void;
-}) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      <Field label="Primary Prompt (ROLE.md)">
-        <textarea
-          style={{
-            ...inputStyle,
-            minHeight: '200px',
-            fontFamily: 'monospace',
-            fontSize: '13px',
-            resize: 'vertical',
-            lineHeight: '1.5',
-          }}
-          value={role.promptContent || ''}
-          onChange={e => updateRole({ promptContent: e.target.value })}
-          placeholder="# Role Name&#10;&#10;Write the role's prompt here..."
-        />
-      </Field>
-
-      {role.additionalPrompts?.map((p, i) => (
-        <Field key={i} label={p.name}>
-          <textarea
-            style={{
-              ...inputStyle,
-              minHeight: '120px',
-              fontFamily: 'monospace',
-              fontSize: '13px',
-              resize: 'vertical',
-              lineHeight: '1.5',
-            }}
-            value={p.content}
-            onChange={e => {
-              const prompts = [...(role.additionalPrompts || [])];
-              prompts[i] = { ...prompts[i], content: e.target.value };
-              updateRole({ additionalPrompts: prompts });
-            }}
-          />
-        </Field>
-      ))}
-
-      <button
-        onClick={() => {
-          const name = prompt('Section name (e.g., SOUL.md):');
-          if (!name) return;
-          const prompts = [...(role.additionalPrompts || []), { name, content: '' }];
-          updateRole({ additionalPrompts: prompts });
-        }}
-        style={{ ...addBtnStyle, padding: '6px', fontSize: '12px' }}
-      >
-        + Add Prompt Section
-      </button>
-    </div>
-  );
-}
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <label style={{ fontSize: '13px', fontWeight: 600, color: 'var(--color-text-muted)', display: 'block', marginBottom: '4px' }}>
-        {label}
-      </label>
-      {children}
-    </div>
-  );
-}
-
-const panelStyle: React.CSSProperties = { padding: '12px', color: 'var(--color-text-muted)' };
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  padding: '6px 8px',
-  fontSize: '13px',
-  border: '1px solid var(--color-border)',
-  borderRadius: '4px',
-  background: 'var(--color-bg)',
-  color: 'var(--color-text)',
-  boxSizing: 'border-box',
-};
-const sectionLabel: React.CSSProperties = { fontSize: '13px', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: '6px' };
-const tagStyle: React.CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: '2px',
-  background: 'var(--color-border)',
-  color: 'var(--color-text-secondary)',
-  padding: '2px 6px',
-  borderRadius: '4px',
-  fontSize: '11px',
-  fontFamily: 'monospace',
-};
-const tagRemoveBtn: React.CSSProperties = {
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  color: 'var(--color-text-muted)',
-  padding: '0 2px',
-  fontSize: '13px',
-};
-const addBtnStyle: React.CSSProperties = {
-  background: 'none',
-  border: '1px dashed var(--color-border)',
-  borderRadius: '4px',
-  padding: '2px 8px',
-  cursor: 'pointer',
-  fontSize: '13px',
-  color: 'var(--color-text-muted)',
-};
-const emptyStyle: React.CSSProperties = { fontSize: '13px', color: 'var(--color-text-muted)', fontStyle: 'italic' };

package/references/openteams/editor/src/components/inspector/TeamInspector.tsx

@@ -1,126 +0,0 @@
-import { useConfigStore } from '../../stores/config-store';
-import { useHistoryStore } from '../../stores/history-store';
-import * as yaml from 'js-yaml';
-
-export function TeamInspector() {
-  const team = useConfigStore(s => s.team);
-  const pushSnapshot = useHistoryStore(s => s.pushSnapshot);
-  const setTeam = useConfigStore(s => s.setTeam);
-
-  const extensionsYaml = Object.keys(team.extensions).length > 0
-    ? yaml.dump(team.extensions, { lineWidth: -1, noRefs: true })
-    : '';
-
-  const handleExtensionsChange = (value: string) => {
-    try {
-      const parsed = yaml.load(value) as Record<string, unknown>;
-      if (typeof parsed === 'object' && parsed !== null) {
-        pushSnapshot();
-        setTeam({ extensions: parsed });
-      }
-    } catch {
-      // Invalid YAML — ignore until valid
-    }
-  };
-
-  return (
-    <div data-testid="team-inspector" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div style={{
-        padding: '12px',
-        borderBottom: '1px solid var(--color-border)',
-        fontWeight: 600,
-        fontSize: '14px',
-        color: 'var(--color-text)',
-      }}>
-        Team Settings
-      </div>
-
-      <div style={{ flex: 1, overflow: 'auto', padding: '12px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-        <Field label="Team Name">
-          <input
-            style={inputStyle}
-            value={team.name}
-            onChange={e => { pushSnapshot(); setTeam({ name: e.target.value }); }}
-            data-testid="team-name"
-          />
-        </Field>
-
-        <Field label="Description">
-          <textarea
-            style={{ ...inputStyle, minHeight: '60px', resize: 'vertical' }}
-            value={team.description}
-            onChange={e => { pushSnapshot(); setTeam({ description: e.target.value }); }}
-            data-testid="team-description"
-          />
-        </Field>
-
-        <Field label="Enforcement">
-          <select
-            style={inputStyle}
-            value={team.enforcement}
-            onChange={e => { pushSnapshot(); setTeam({ enforcement: e.target.value as 'strict' | 'permissive' | 'audit' }); }}
-            data-testid="team-enforcement"
-          >
-            <option value="permissive">permissive</option>
-            <option value="audit">audit</option>
-            <option value="strict">strict</option>
-          </select>
-        </Field>
-
-        <Field label="Version">
-          <input style={{ ...inputStyle, opacity: 0.6 }} value="1" readOnly />
-        </Field>
-
-        {extensionsYaml && (
-          <Field label="Extension Metadata (YAML)">
-            <textarea
-              style={{
-                ...inputStyle,
-                minHeight: '150px',
-                fontFamily: 'monospace',
-                fontSize: '13px',
-                resize: 'vertical',
-                lineHeight: '1.5',
-              }}
-              defaultValue={extensionsYaml}
-              onBlur={e => handleExtensionsChange(e.target.value)}
-            />
-          </Field>
-        )}
-
-        <div style={{
-          marginTop: '8px',
-          padding: '8px',
-          background: 'var(--color-bg)',
-          borderRadius: '6px',
-          fontSize: '13px',
-          color: 'var(--color-text-muted)',
-        }}>
-          Select a role or channel on the canvas to edit its properties. Click the canvas background to return here.
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <label style={{ fontSize: '13px', fontWeight: 600, color: 'var(--color-text-muted)', display: 'block', marginBottom: '4px' }}>
-        {label}
-      </label>
-      {children}
-    </div>
-  );
-}
-
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  padding: '6px 8px',
-  fontSize: '13px',
-  border: '1px solid var(--color-border)',
-  borderRadius: '4px',
-  background: 'var(--color-bg)',
-  color: 'var(--color-text)',
-  boxSizing: 'border-box' as const,
-};