Multi-Gateway Connections

CREATE TABLE gateways (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  host TEXT NOT NULL,
  port INTEGER NOT NULL,
  token TEXT,                    -- Encrypted gateway auth token
  is_primary INTEGER DEFAULT 0,  -- Only one can be primary
  status TEXT DEFAULT 'unknown', -- online, offline, timeout
  last_seen INTEGER,
  latency INTEGER,               -- ms
  sessions_count INTEGER DEFAULT 0,
  agents_count INTEGER DEFAULT 0,
  created_at INTEGER NOT NULL,
  updated_at INTEGER NOT NULL
)

const connectTo = (gw: Gateway) => {
  const proto = window.location.protocol === 'https:' ? 'wss' : 'ws'
  const wsUrl = `${proto}://${gw.host}:${gw.port}`
  
  // Token is fetched from database by gateway ID
  connect(wsUrl, '')
}

interface ConnectionState {
  isConnected: boolean
  url: string | null
  latency: number | null
  lastPing: number | null
  error: string | null
}

const { connection } = useMissionControl()

<div className="flex items-center gap-3">
  <span className={`w-2.5 h-2.5 rounded-full ${
    connection.isConnected ? 'bg-green-500' : 'bg-red-500 animate-pulse'
  }`} />
  <div>
    <div className="text-sm font-medium">
      {connection.isConnected ? 'Connected' : 'Disconnected'}
    </div>
    <div className="text-xs text-muted-foreground">
      {connection.url || 'No active connection'}
      {connection.latency != null && ` (${connection.latency}ms)`}
    </div>
  </div>
</div>

function GatewayCard({ gateway, isCurrentlyConnected }) {
  const statusColors: Record<string, string> = {
    online: 'bg-green-500',
    offline: 'bg-red-500',
    timeout: 'bg-amber-500',
    unknown: 'bg-muted-foreground/30',
  }

  const lastSeen = gateway.last_seen
    ? new Date(gateway.last_seen * 1000).toLocaleString()
    : 'Never probed'

  return (
    <div className={`bg-card border rounded-lg p-4 ${
      isCurrentlyConnected ? 'border-green-500/30 bg-green-500/5' : 'border-border'
    }`}>
      <div className="flex items-center gap-2">
        <span className={`w-2 h-2 rounded-full ${
          statusColors[gateway.status] || statusColors.unknown
        }`} />
        <h3 className="text-sm font-semibold">{gateway.name}</h3>
        {gateway.is_primary && (
          <span className="text-2xs px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30">
            PRIMARY
          </span>
        )}
        {isCurrentlyConnected && (
          <span className="text-2xs px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">
            CONNECTED
          </span>
        )}
      </div>
      <div className="flex items-center gap-4 mt-1.5 text-xs text-muted-foreground">
        <span className="font-mono">{gateway.host}:{gateway.port}</span>
        <span>Token: {gateway.token_set ? 'Set' : 'None'}</span>
        {gateway.latency != null && <span>Latency: {gateway.latency}ms</span>}
        <span>Last: {lastSeen}</span>
      </div>
    </div>
  )
}

export function MultiGatewayPanel() {
  const [gateways, setGateways] = useState<Gateway[]>([])
  const [directConnections, setDirectConnections] = useState<DirectConnection[]>([])
  const { connection } = useMissionControl()
  const { connect } = useWebSocket()

  return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold">Gateway Manager</h2>
          <p className="text-xs text-muted-foreground mt-0.5">
            Manage multiple OpenClaw gateway connections
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button onClick={probeAll}>Probe All</button>
          <button onClick={() => setShowAdd(!showAdd)}>+ Add Gateway</button>
        </div>
      </div>

      {/* Current Connection Info */}
      <div className="bg-card border rounded-lg p-4">
        <ConnectionStatus connection={connection} />
      </div>

      {/* Add Form */}
      {showAdd && <AddGatewayForm onAdded={...} onCancel={...} />}

      {/* Gateway List */}
      <div className="space-y-2">
        {gateways.map(gw => (
          <GatewayCard
            key={gw.id}
            gateway={gw}
            isCurrentlyConnected={connection.url?.includes(`:${gw.port}`) ?? false}
            onSetPrimary={() => setPrimary(gw)}
            onDelete={() => deleteGateway(gw.id)}
            onConnect={() => connectTo(gw)}
            onProbe={() => probeGateway(gw)}
          />
        ))}
      </div>

      {/* Direct CLI Connections */}
      <div>
        <h3 className="text-sm font-semibold mb-3">Direct CLI Connections</h3>
        {directConnections.map(conn => (
          <DirectConnectionCard
            key={conn.id}
            connection={conn}
            onDisconnect={() => disconnectCli(conn.connection_id)}
          />
        ))}
      </div>
    </div>
  )
}